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 Extraits (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 !

Inclus dans Speedfly

Merci de me laisser une petite note 😉

[Note moyenne de: 5 sur 6 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.

« Comment agrandir le bouton ajout au panier sur shopify ?

Comment créer un système de FAQ sur shopify ? »

Cet article a 20 commentaires

cyril
11 Nov 2017 Répondre

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. dgeo22
  14 Nov 2017 Répondre
  
  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
Polo
16 Juil 2018 Répondre

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. Dgeo Dev
  22 Juil 2018 Répondre
  
  Hello, non il faut tout mettre dans ton éditeur d’une fiche produit 😉 pas besoin d’aller dans les fichiers pour ce tuto 😉
Claude
11 Déc 2019 Répondre

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. Dgeo Dev
  11 Déc 2019 Répondre
  
  Hello, oui c’est possible en créant ces codes de réductions au préalable. Le tableaux est juste la à titre indicatif 😉
Claude
12 Déc 2019 Répondre

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. Dgeo Dev
  12 Déc 2019 Répondre
  
  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
yohan
7 Jan 2020 Répondre

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. Dgeo Dev
  9 Jan 2020 Répondre
  
  Hello, recherche dans le moteur de recherche « personnaliser fiche produit » et tu pourra réussir à faire ce que tu veux 😉
  1. thiery
    14 Fév 2020 Répondre
    
    moi jai ajouté sa pour que sa fonctionne 🙂 {% if product.tags contains ‘ecrire le tag ici’ %} {% endif %}
    1. Dgeo Dev
      14 Fév 2020 Répondre
      
      Yes ! bonne idée bravo 🙂
yolaine
23 Jan 2020 Répondre

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. Dgeo Dev
  23 Jan 2020 Répondre
  
  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.
yolaine
23 Jan 2020 Répondre

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. Dgeo Dev
  23 Jan 2020 Répondre
  
  Hello, ok bravo ! merci et bonne continuation 😉
Tony
15 Avr 2020 Répondre

Hello merci pour les tutos assez sympa mais dites moi,quels sont les majorités des thèmes avec lequel les codes marche merci
1. Dgeo Dev
  15 Avr 2020 Répondre
  
  Hello, sur la plupart des thèmes du store shopify et les plus populaires. Les thèmes qui posent problème sont généralement Turbo et Fastlane
Tony
15 Avr 2020 Répondre

Merci pour la réponse,c’est à mettre sur la page produit si je ne me trompe
1. Dgeo Dev
  17 Avr 2020 Répondre
  
  De rien et oui généralement mais le code peut être mis ou vous voulez 😉

Création des codes promos

Intégration des codes

Un peu de personnalisation selon le produit

Ce tutoriel existe aussi en vidéo

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cet article a 20 commentaires

cyril

dgeo22

Polo

Dgeo Dev

Claude

Dgeo Dev

Claude

Dgeo Dev

yohan

Dgeo Dev

thiery

Dgeo Dev

yolaine

Dgeo Dev

yolaine

Dgeo Dev

Tony

Dgeo Dev

Tony

Dgeo Dev

Laisser un commentaire Annuler la réponse

Création des codes promos

Intégration des codes

Un peu de personnalisation selon le produit

Ce tutoriel existe aussi en vidéo

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment faire un Carrousel d’Extra infos sur Shopify

Barre d’information Fidélité avec Code Promo et nombre de Visites sur Shopify

Comment Créer un Système d’images Avant / Après sur Shopify

Cet article a 20 commentaires

cyril

dgeo22

Polo

Dgeo Dev

Claude

Dgeo Dev

Claude

Dgeo Dev

yohan

Dgeo Dev

thiery

Dgeo Dev

yolaine

Dgeo Dev

yolaine

Dgeo Dev

Tony

Dgeo Dev

Tony

Dgeo Dev

Laisser un commentaire Annuler la réponse

Panier