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 😉

Cet article a 33 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 ! 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier