Tuto ajouter un code promo au niveau du panier sur Shopify

Nous allons rajouter un champ code promo au niveau du panier qui sera automatiquement ajouté à la page de paiement

C’est très utile car de base shopify ne le propose qu’au niveau du checkout !

Pour ce faire suivez ces étapes:

Rendez vous dans online store – actions – edit code

Suivant votre thème vous devez trouver:

Cart.liquid dans le dossier Layout (si il est presque vide suivez l’étape en dessous)

cart-template.liquid dans le dossier Sections

Repérez une zone « total_discounts » ou une zone juste avant le bouton submit et collez le bout de code ci-dessous

Exemple:

code

<script> 
(function($) { 
 $(document).on('page:load page:change', function () { 
 if (localStorage.getItem('storedDiscount')){ 
 var discountStored = localStorage.getItem('storedDiscount'); 
 $('input[name="discount"]').val(localStorage.getItem('storedDiscount')); 
 } 
 $('form[action="/cart"]').on('submit', function(){ 
 var $discountCode = $('input[name="discount"]').val(); 
 localStorage.setItem('storedDiscount', $discountCode); 
 }); 
 }); 
})(jQuery); 
</script> 
<div class="discount-code-field" style="clear:both;display:block;overflow:hidden;">
<label>Vous avez un code promo?</label>
<input style="width:150px;float:right;font-size:13px;" placeholder="code promo" p autocomplete="off" type="text" name="discount" />
</div>

N’oubliez pas de faire une sauvegarde avant toutes modifications !

Cliquez sur Save et allez tester ca avec un de vos codes promos valides 😉

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 39 commentaires

  1. Bonjour,

    Le code ne fonctionne pas sous turbo ?

    Quand j’entre un code et que je clique sur next step, rien ne se passe au niveau du checkout aucun code n’est ajouté..

    1. Turbo est particulier, en général mes codes ne fonctionnent pas dessus

  2. Bonjour,
    Super je cherchait justement un moyen de faire ça …… Malheureusement je craint que comme d’habitude cela ne fonctionne pas avec le thème début :/

    1. Il suffisait de copier le code après le {% endif %} et non avant …. quel boulet !

      1. Bonjour,

        J’ai le thème Début et je n’arrive pas à voir la case « code promo »

        Je ne vois que : Les codes promo, les frais d’envoi et les taxes seront ajoutés à la caisse

        Il est vrai que mon site n’est pas encore ouvert au public, est-ce la raison?

        1. Bosoir, non logiquement ca n’impacte pas. étrange essaie de recommencer étape par étape

  3. Bonjour, il m’est impossible de mettre l’encadré code promo. Je n’ai pas de cart liquide dans layout ou sections mais que dans templates. J’ai essayé et ce ne marche pas. Pouvez vous m’aidez ?

    Merci d’avance pour votre travail

    1. Bonsoir, quel thème as tu ?

    2. J’ai réussi avec le thème supply sans soucis, essayer dans cart liquid peu importe sans dossier, faite une copie et essayer jusqu’à ce que sa arrive

  4. Bonjour impossible de le faire pouvez vous m’aider svp

  5. Bonsoir Geoffrey,

    Les deux balises ne sont pas bien alignées chez moi ..

    As-tu une solution ?

    Cdt,

  6. Possible d’avoir le même tuto avec l’actualisation du montant en direct ? merci et good job 🙂

    1. Bonjour, Merci pour le message. Non navré car le traitement se fait à la prochaine étape 😉

  7. Bonjour, après avoir entré le code il appairait bien sur le site mais lorsque j’entre le code promo il y’a aucune réduction prit en compte que faire ?

  8. Problème résolu je devais juste activer le code 🙂

  9. Merciii !!!! c’est magnifique. Par contre sur mon theme (narrative) la page code à modifier est —> « product-form.liquid »

    1. salut j’ai le theme narrative ou faut il copier le code svp

      1. Hello, templates – cart.liquid 🙂

  10. hello a tous,

    Le code fonctionne bien.

    Par contre, la phrase du label ; Vous avez un code promo? , n’est pa centré verticalement.
    Du coup ca fait un décalage avec le block ou il rentre leur code promo.

    J’essaye de modifier le CSS sans sucés. Un peu d’aide ? 🙂

    Aussi, j’aimerais encadrer en noir le block ou en rentre le code promo. Un peu d’aide encore ?

    Merci,
    Charlotte

    1. Hello, il faudra me linker le site sur mon facebook car je ne peux deviner le thème et surtout hors contexte c’est pas simple 😉

  11. Salut Dgeo et merci encore pour tout tes codes. Je trouve ton code vraiment interessent mais j’ai brooklyn et ton code aparait bien sur mon cart mais quand je rentre le code rien ne se passe alors que si je vais dans le checkout la il prend le code promo en compte. As tu une idée ?

    1. Hello, oui il est calculé seulement a l’étape suivante donc c’est normal 🙂

  12. Salut jai le theme narrative je ne sais pas ou copier le code pouvez vous m’aider svp!
    Merci

    1. Hello, regarde dans templates – cart.liquid ou tout autre fichier avec cart dedans 😉

      1. Merci ca fonctionne en fait il fallait obligatoirement désactiver le tiroir du panier sinon ça ne marche pas

        1. Salut, jai le theme Narrative aussi et je ne m’en sors pas ! Impossible de faire apparaître ce fichu code promo ! HELP ME PLEASE ^^

  13. je n’y arrive pas rien n’apparait je ne comprends pas je colle bien pourtant tout

    1. Bonsoir, essayez de le coller à différents endroits afin de déterminer l’emplacement adéquat.

  14. Ca fonctionne parfaitement.
    Pour le thème Supply, chercher le cart.liquid dans template et ça roule très bien !
    Merci beaucoup

  15. Bonjour,
    Dans le thème Brookly, dans Template/ Cart.liquid j’ai inséré le code mais y’a un décalage de texte.
    La case « vous avez un code promo est bien placé, mais impossible de rentrer un code dedans et le texte est superposé a la case « paiement »
    ce qui rends la navigation impossible…
    help?

  16. Re! en fait j’avais ouvert moi même la balise « DIV » …. c’est qui a tout décalé…
    Fonctionne très bien avec le thème Brooklyn ! Merci pour ce tuto!!

    1. Cool bravo ! 🙂

  17. Bonjour, j’ai le thème Début est j’ai réussi à faire apparaître l’encadrer Code Promo mais quand je met m’on code rien ne se passe. J’ai bien vérifier le code il fonctionne dans la page de paiement. Pouvez vous m’aidez?

    1. Hello, Le champ est la pour y mettre le code promo mais c’est seulement en cliquant sur valider mon panier ou autre intitulé de votre bouton menant à l’étape suivante que le code promo s’activera au checkout 🙂 Il n’est pas calculé à la volée au niveau du panier.

      1. C’est nul car si on utilise pas le checkout natif de Shopify ça ne marche pas

        1. Ah ca oui mais c’est aux checkout alternatifs de le prévoir 😉

  18. Bonjour, tout d’abord merci beaucoup pour ces nombreux tutos très utiles !

    J’avais une question, je suis sur le theme turbo et le script marche très bien seulement sur ordinateur est téléphone la case pour remplir son code promotionnel est décalé tout à droite. Une idée pour régler ce détail ? 🙂

    1. Hello, merci pour le message 😉
      Hum il faudrait me donner le lien en MP pour constater le problème et le corriger 🙂

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