Comment créer une Free shipping bar pour avoir la livraison Offerte sur Shopify ?

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 (Boutique en ligne – actions – dupliquer)

Partie CSS

Rendez vous dans Boutique en ligne – actions – Modifier code – ressources (assets)

Trouvez votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise

En général c’est theme.css ou base.scss ou tout autre fichier .css utilisé par votre thème

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, .gd-free-shipping-bar-on {color:#ffffff;}

Partie HTML

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

Rendez vous dans Boutique en ligne – actions – modifier 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>

Attention ce tuto ne fonctionne qu’avec un type de panier page car la page doit se recharger 😉

Ce tutoriel existe aussi en vidéo

Bonne installation à tous 😉

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 4.5 sur 4 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 24 commentaires

  1. sarkis Arbajian

    30 Juin 2018 Répondre

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

    Tout fonctionne parfaitement 🙂

    1. Dgeo Dev

      30 Juin 2018 Répondre

      Hello super, merci pour ce commentaire 😉

  2. Franck Carletto

    2 Juil 2018 Répondre

    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

      2 Juil 2018 Répondre

      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

        27 Juil 2018 Répondre

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

    30 Août 2018 Répondre

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

    1. Dgeo Dev

      6 Sep 2018 Répondre

      Merci Tom 😉

  4. charlotte

    22 Sep 2018 Répondre

    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. Dgeo Dev

      24 Sep 2018 Répondre

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

  5. aby

    28 Oct 2018 Répondre

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

    26 Fév 2019 Répondre

    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 !

  7. lauren

    9 Jan 2022 Répondre

    Bonjour , est ce possible de ne pas l’afficher en page d’accueil , mais uniquement en page produits svp ?

    1. Dgeo Dev

      10 Jan 2022 Répondre

      Hello, oui c’est possible en englobant le code html de ceci :
      {% if template.name != « index » %}
      le code ci-dessus
      {% endif %}
      ou
      {% if template.name == « product » %}
      le code ci-dessus
      {% endif %}

  8. Fleur

    4 Mar 2022 Répondre

    Super tuto comme toujours et qui fonctionne parfaitement merci beaucoup !

  9. Pauline

    25 Mar 2022 Répondre

    Bonjour,
    Vos articles sont toujours super ! Intuitif, simple et accessible.
    Cependant, j’aimerai intégrer « Le montant avant la livraison gratuite » au moment du panier, du paiement direction?
    Est ce possible?
    Merci 🙂

    1. Dgeo Dev

      26 Mar 2022 Répondre

      Hello et merci pour le commentaire. Oui c’est possible mais pour ce faire il faudrait mettre le code html dans le fichier cart-template.liquid du dossier Sections et de limite supprimer la partie css afin de ne pas avoir de couleur. En ce qui concerne l’emplacement il faudra tester un peu partout dans le fichier afin de trouver l’endroit idéal 🙂 bonne journée

  10. HAMIOT

    4 Juil 2022 Répondre

    Bonjour merci pour tout, mais j’ai une question comment placer cette bannière uniquement dans le panier et non en page d’accueil ?

  11. Clarisse

    29 Nov 2023 Répondre

    Hello, merci beaucoup pour ce tuto ! Dans votre tuto vous dites « Si vous ne souhaitez pas que cette barre soit par dessus votre header, vous pouvez supprimer la propriété « position:absolute; » ». De quelle position absolue parlez vous ?

    Merci d’avance 🙂

    1. Dgeo Dev

      30 Nov 2023 Répondre

      Hello, avec plaisir 🙂 la propriété dans la partie css 🙂

  12. ACTI3D

    13 Fév 2024 Répondre

    Génial comme d’habitude ;-).
    Seul chose que je n’arrive pas à faire c’est quand je remonte sur ma page le bandeau apparait, je voudrais le bloquer en haut.
    Merci

    1. Dgeo Dev

      19 Fév 2024 Répondre

      Hello et merci pour le com 😉 Il faudrait dans ce cas rajouterdans les propriétés css de .gd-free-shipping-bar { … rajouter un position:fixed; top:0; width:100%; } mais attention ca risque de masquer une partie du header sinon tenter le position:sticky 😉

  13. Lorvens

    17 Fév 2024 Répondre

    a chaque produit ajoute dans le panier le panier affiche comment arreter ca svp

    1. Dgeo Dev

      19 Fév 2024 Répondre

      Hello, cela dépend du thème. Faut trouver une option mini panier ou panier modal ou drawer – sinon speedfly le propose au besoin 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier