Nous allons voir dans ce tuto comment créer un tableau de remise avec code promo sur votre boutique shopify

Etant donné que nous allons mettre ce code dans votre éditeur de fiche produit, il sera contextuel ! De ce fait, vous pourrez mettre un tableau différent pour chaque produit.

Voila ce que cela va donner:

Quantité % de remise Code Promo
 2 achats  10% de remise  CODE10
 3 achats  15% de remise  CODE15
 4 achats  20% de remise  CODE20
 5 achats  25% de remise  CODE25

Idéalement pour les plus aguerris, je recommande de mettre la partie style… dans leur fichier theme.scss, timber.scss ou style.scss selon votre thème cela vous évitera de mettre la balise style dans votre éditeur (c’est sale:p) dans ce cas vous ne collerez donc que la balise table (tableau).

Passons à la partie technique

Rendez-vous sur une de vos fiche produit.

Dans votre éditeur passez en mode code avec l’icône </> et collez le code ci-dessous et adaptez le selon votre convenance:

<style type="text/css">
 .discount-table {
 max-width: 500px;
 font-family: tahoma;
 text-align: left !important;
 font-style:arial;
 font-size:13px;
 margin-bottom:15px;
 }
 .discount-table p {
 margin:0;
 }
 .discount-table th {
 background: #666;
 color:#fff;
 }
 .discount-table th, .discount-table td {
 padding:8px 10px;
 }
@media only screen and (min-width: 800px) {
 .discount-table td {
 min-width:180px;
 }
}
</style>
<table class="discount-table" width="100%">
<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="#e5e5e5">
 <td><p>5 achats</p></td>
 <td><p>25% de remise</p></td>
 <td><p>CODE25</p></td>
</tr>
</tbody>
</table>

Il ne vous reste plus qu’à mettre d’autres tableaux de ce type sur vos autres produits.

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 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 4 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 😉

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 Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a 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

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations