Tuto créer une Free shipping bar pour avoir la livraison Offerte

Nous allons voir comment créer une Free shipping bar pour avoir la livraison Offerte à partir d’un certain montant !

Pour personnaliser je vous ai mis les variables à modifier entre commentaire afin de vous faciliter le travail

Les variables à modifier seront donc:

{% assign gd_texte_avant_le_prix = « Il ne vous reste plus que » %}
{% assign free_shipping = 60 %}
{% assign gd_texte_apres_le_prix = « à dépenser pour avoir la livraison GRATUITE » %}
{% assign gd_texte_livraison_offerte = « La Livraison vous est offerte » %}

N’oubliez pas d’adapter le prix selon vos critères, la il est actif sur 60€ (dollars selon votre paramétrage)

N’oubliez pas non plus de créer vos règles de shipping afin de créer un mode de livraison gratuite à partir de la somme que vous indiquerez dans la variable: free_shipping

Je recommande de faire une sauvegarde de votre thème avant toute modification (online store – actions – duplicate)

Partie CSS

Rendez vous dans online store – actions – edit code – assets

Trouvez votre fichier .scss.liquid

En général c’est theme.scss.liquid ou timber.scss.liquid ou default.scss.liquid ou style.scss.liquid

Copiez/Collez le code ci-dessous tout en bas du fichier:

Si vous souhaitez changer les couleurs il faudra modifier le : « ffffff » (blanc du texte) et « ff6600 » (orange du fond)

Si vous ne souhaitez pas que cette barre soit par dessus votre header, vous pouvez supprimer la propriété « position:absolute; »

.gd-free-shipping-bar{background-color:#ff6600;text-align:center;width:100%;display:block;padding:15px 10px;margin:0 auto 5px;}
.gd-free-shipping-bar p {color:#ffffff;}

Partie HTML

C’est la partie ou vous allez placer votre barre d’information

Rendez vous dans online store – actions – edit code – sections – header.liquid

Copiez/collez le bout de code ci-dessous en haut du fichier

{% comment %} 
Personalisation
Modifiez les variables ci-dessous afin de personnaliser vos textes
{% endcomment %}

{% assign gd_texte_avant_le_prix = "Il ne vous reste plus que" %}
{% assign free_shipping = 60 %}
{% assign gd_texte_apres_le_prix = "à dépenser pour avoir la livraison GRATUITE" %}
{% assign gd_texte_livraison_offerte = "La Livraison vous est offerte" %}

{% comment %} 
Fin de la zone de personalisation
{% endcomment %}

{% assign shipping_price_before = free_shipping | times: 100.0 | minus: cart.total_price %}
<div class="gd-free-shipping-bar {% if shipping_price_before > 0 %}{% endif %}">
{% if shipping_price_before > 0 %} 
<p>{{ gd_texte_avant_le_prix }} <strong class="gd-free-shipping-bar-number">{{shipping_price_before | money }}</strong> {{ gd_texte_apres_le_prix }} </p>
{% else %}
<span class="gd-free-shipping-bar-on">{{ gd_texte_livraison_offerte }}</span>
{% endif %}
</div>

Bonne installation à tous 😉

10 commentaires sur “Tuto créer une Free shipping bar pour avoir la livraison Offerte

  1. Franck Carletto

    Excellent tuto, comme d’habitude ! Geoffrey, tu es vraiment doué, merci de tes contributions !
    Je me posais une question, est ce qu’il est possible d’inverser le signe € pour l’avoir après le prix ? J’ai beau chercher, impossible de trouver.. En tout cas, tes codes sont excellents, et même ponctués d’annotations pour que les débutants comme moi s’y retrouvent.. chapeau !

    1. Dgeo Dev

      Bonsoir, Merci pour ce gentil message 😉
      Alors c’est dans ton paramétrage du format de prix de shopify dans Settings – General – change formating – et dans les 2 premiers champs tu remplaces par {{amount_with_comma_separator}}€
      Bonne soirée

      1. Franck Carletto

        Ah merci Geoffrey, t’es vraiment monstrueux ! Pas de quoi, tu le mérites vraiment, tes tutos sont réellement exceptionnels.. Mes business n’ont toujours pas décollé, mais pour sûr je pense à toi dès que ça arrive, tes tutos aident réellement à la conversion, bravo pour ce travail de qualité 😉

  2. charlotte

    Bonjour,

    J’offre le free shipping dans ma boutique.

    Par contre j’aimerais bien juste creer cette fameuse bar en haut de mon site internet. (mon theme me le permet seulement mais en dessous de mon header)

    Le code que tu proposes (avec quelques ajustements) pourrait-il fonctionner ?

    Merci,
    Charlotte

  3. aby

    Bonjour tout le monde,
    J’ai ajouté les code, cela fonctionne très bien sur mobile, par contre sur PC rien ne s’affiche et cela sur plusieurs navigateurs.
    Si quelqu’un a une idée je suis preneur.
    Merci d’avance.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*