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 😉

Merci de me laisser une petite note 😉
[Note moyenne: 1 sur 5]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 11 commentaires

  1. Bravo pour ce super tuto, pour cette nouvelle option que j’attendais depuis plusieurs mois !!!

    Tout fonctionne parfaitement 🙂

    1. Hello super, merci pour ce commentaire 😉

  2. 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. 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. 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é 😉

  3. Merci !
    Explications au top ! Simple… efficace… PARFAIT:)

    1. Merci Tom 😉

  4. 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

    1. Hello, oui si tu n’arrive pas à le mettre au dessus essaie de le mettre dans layout – theme.liquid juste en dessous de

  5. 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.

  6. Bonjour, tout d’abord merci pour tous ces tutos !

    J’ai en revanche un problème de couleur de texte pour la livraison offerte : elle est de la même couleur que la bannière.
    Y-a-t-il possibilité de changer cette couleur ?
    Je suis sur le thème supply.

    Merci d’avance !

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Booster ton taux de conversion ?

J'ai créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

En savoir plus