Nous allons voir dans ce tutoriel comment ajouter un tableau de codes promo par quantité sur Shopify

Comme vous le savez il est très bon pour vos taux de conversion de proposer des réductions selon la quantité achetée.

Certaines applications proposent de faire cela mais ont tendance à être payante et alourdir votre site.
C’est pour cette raison que j’ai décidé de vous proposer un petit de bout de code sympa et pratique.

Je vais dans un premier temps vous expliquer comment créer vos codes promo et ensuite comment intégrer ce bout de code sur votre thème.

Vous pouvez voir le résultat sur le site de démo ici: https://dgeodev.myshopify.com/products/produit-1

Création des codes promos

Rendez-vous dans votre administration et suivez les étapes suivantes:

Cliquez sur « Réductions » et créez le nombre de codes promos par quantité que vous souhaitez.
Cliquez sur « Créer un code de réduction » et mettez le pourcentage voulu.

Nous allons dans ce tuto en créer 4:

  • un de -10%
  • un de -15%
  • un de -20%
  • un de -25%

Mettez donc le type en pourcentage, la valeur et la quantité à 2 pour le 10%
Créez donc les 3 autres de la même façon, quantité 3 = 15% etc…

Passons désormais à la partie technique.

Intégration des codes

Rendez-vous dans les fichiers de votre thème, Boutique en ligne – Actions – Modifier le code.
Trouvez le formulaire dans Sections – « product-template.liquid » ou dans snippets un fichier « product-form.liquid » ou autres dérivés selon le thème utilisé.
En fait il faut trouver une balise select (ctrl + F rechercher un select) et à la fait du select> vous allez mettre le code suivant:

<div style="width:100%; margin:15px 5px !important;">
  <table class="discount-table" width="100%" style="margin-top:0 !important;margin-bottom:10px !important;">
    <tbody>
      <tr>
        <th><p><strong>Quantité</strong></p></th>
        <th><p><strong>% de remise</strong></p></th>
        <th><p><strong>Code Promo</strong></p></th>
      </tr>
      <tr>
        <td><p>2 achats</p></td>
        <td><p>10% de remise</p></td>
        <td><p>CODE10</p></td>
      </tr>
      <tr bgcolor="#f5f5f5">
        <td><p>3 achats</p></td>
        <td><p>15% de remise</p></td>
        <td><p>CODE15</p></td>
      </tr>
      <tr>
        <td><p>4 achats</p></td>
        <td><p>20% de remise</p></td>
        <td><p>CODE20</p></td>
      </tr>
      <tr bgcolor="#f5f5f5">
        <td><p>5 achats</p></td>
        <td><p>25% de remise</p></td>
        <td><p>CODE25</p></td>
      </tr>
    </tbody>
  </table>
  <p><span style="font-size:14px;font-weight:bold;font-style:italic;color:red;">N'oubliez pas de renseigner le code promo au moment du paiement !</span></p>
</div>

Un peu de personnalisation selon le produit

Si vous souhaitez mettre ce tableau de codes promo uniquement sur certaine fiche, je vous conseille de suivre le tutoriel qui explique Comment personnaliser votre fiche produit sur shopify.

Ce tutoriel existe aussi en vidéo

Bon tutos à tous !

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

🤗 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 16 commentaires

  1. Super sympa ce tableau par contre comment peu tu contrôler ça dans » Create discount code » sur shopify ? Je sais que l’on peut faire un code promo suivant le montant mais suivant le nombre d’articles achetés es ce possible ?

    Super taf ton site donne beaucoup d’idées , dès mes premières ventes je te ferais un don car c’est vraiment du bon boulot !

    1. Merci pour le com 😉 oui tu dois au préalable créer des code promo dans discount, le discount natif de shopify ne peut savoir combien le client achete mais tu peux estimer en ajoutant 2 valeurs d’un produit pour avoir le prix des 2 et créer ton discount en conséquence 😉 bye

  2. Salut à toi Dgeo, je ne comprend pas trop comment faut faire, est ce qu’il faut allez tout de même dans theme.scss ? Et ensuite de le coller dans . Désolé je ne comprend pas trop comment faut faire

    1. Hello, non il faut tout mettre dans ton éditeur d’une fiche produit 😉 pas besoin d’aller dans les fichiers pour ce tuto 😉

  3. Bonjour,

    Merci pour le tuto, intéressant !

    Je voudrai faire un peu pareil mais sans codes !

    Je cherche à mettre en place un système de remise par volume.

    Ex.:
    Jusqu’à 9 => Prix normal
    De 10 à 19 => -15%
    20 et plus => 25%

    Peut on faire ça?

    Merci

    Claude

    1. Hello, oui c’est possible en créant ces codes de réductions au préalable. Le tableaux est juste la à titre indicatif 😉

  4. Merci de ta réponse mais cela veux dire quoi?

    On créé ces codes dans « réductions » et ensuite? Parce que j’avais vu dans « réduction automatique » que l’on pouvait faire ça mais ce n’est pas cumulable. On va pouvoir créer le premier (De 10 à 19 => -15%) mais on ne peut pas créer le deuxième…. et encore moins un troisième…

    1. Il suffit de créer autant de codes réduction par quantité que souhaité et dans le tableau donner les codes promos qui correspondent. Les codes auto de shopify sont limités à 1 donc quasiment inutile

  5. Bonjour,

    Merci pour le tuto, j’ai une question svp, si je veux que le tableau s’affiche que sur une fiche produit spécifique et non pas sur toutes les pages que dois-je faire ?

    1. Hello, recherche dans le moteur de recherche « personnaliser fiche produit » et tu pourra réussir à faire ce que tu veux 😉

      1. moi jai ajouté sa pour que sa fonctionne 🙂 {% if product.tags contains ‘ecrire le tag ici’ %} {% endif %}

        1. Yes ! bonne idée bravo 🙂

  6. Bonjour,
    Le tableau est super, et te remercie pour tes tuto qui sont excellents.
    Je rencontre un souci au niveau des codes; Une fois le tableau installé et paramétré les réductions, j’ai fait un test avec plusieurs produits avec des quantités différentes. Ax2 achats, Bx3 achats et Cx4.achats
    Au passage à la caisse, tous les produits passent à -25% (code25=4 achats)
    Y aurait il une condition à mettre pour que dans le panier, chaque produit ait son code promo?
    S’il te plaît. Merci

    1. Hello, alors je ne sais pas trop, il faut jouer avec les conditions des codes promos, sur les quantités et si ca ne suffit pas pourquoi pas sur le, prix, le poid des produits etc 🙂 bon courage.

  7. C’est bon merci, j’ai pu faire mes conditions dans les réductions..Merci beaucoup…je penserai à te faire un don parce que tu es généreux je trouve…le bonsoir de Nouméa

    1. Hello, ok bravo ! merci et bonne continuation 😉

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation