Comment ajouter une réduction en pourcentage sur son prix ? Tuto Shopify

Bonjour toi ! Aujourd’hui on se retrouve pour un petit tuto Shopify. On va voir ensemble comment ajouter une réduction en pourcentage sur son prix.

Moi c’est Thomas, je suis développeur spécialisé sur Shopify.

J’ai également une chaîne YouTube qui se nomme Thomas Giraud : https://www.youtube.com/channel/UCowYH4dUJz32W8n_YZxEB7w

Alors évidemment, on ne va pas le faire sur le thème FullStacK. Le but est que tu puisses l’intégrer sur n’importe laquelle des tes boutiques.

Création de la page réduction produit Shopify

Dans un premier temps on va se créer un produit sur Convertify.

Pour cela on repart d’un thème début complétement vierge. On va créer une section ”produit vedette” et mettre un produit à l’intérieur.

On va mettre en avant la réduction que tu vas appliquer sur ton produit grâce à ce système de pourcentage.

Identifications et modifications des fichiers Shopify

Il va falloir identifier maintenant l’endroit où on veut afficher notre modification. Après on parlera du calcul que l’on va faire.

Pour cela, on va inspecter et prendre notre console.

La première étape est de retrouver l’endroit ‘taxe incluse”.

Une fois trouvée, on va retenir le nom de l’ensemble du fichier correspondant : ”featured product” et aller rechercher sa section de codes pour continuer.

Si tu as vu l’article sur : comment modifier le prix de son produit, personnaliser son prix, tu as vu que le prix se trouve généralement dans un snippet.

Maintenant dedans, tu peux supprimer la partie ”Taxes inclued”, et rechercher à l’intérieur de ce fichier ”featured product price”, qui va nous emmener au snipet qui contient le prix.

À présent que l’on est dans cette partie, on va travailler directement dans ce snippet.

On va avoir besoin des éléments prix pour calculer la réduction. Tu peux aussi supprimer la partie badge soldes.

Codage de la réduction en pourcentage du prix de la page produit Shopify

Sur une nouvelle ligne en dehors tu peux mettre :

<p> Économisez { { variant.compare_at_price | minus: variant.price | times: 100 | divised_by: variant.compare_at_price } } % dès maintenant </p>  

Pour les autres pages Shopify

Au final, il y a juste 2 fichiers différents entre la section produit sur la page d’accueil et toutes les pages produits qui seront générées à chaque fois par le ”product template”. Donc on a exactement le même résultat, mais si on allait sur une autre page avec un prix différent, on aurait un pourcentage de réduction qui serait du coup différent.

Tutoriel vidéo Shopify !

Voici la vidéo que j’ai réalisé à ce sujet ! Si tu as besoin d’aide, je suis là !

C’est tout pour cette fois, merci beaucoup à toi !

À bientôt ! Thomas.

Leave a Reply