Saut à toi et bienvenue sur le blog Full Stack Entrepreneur.

Tout d'abord laisse moi me présenter, je m'appelle Thomas et je suis développeur spécialisé sur Shopify.

Tu m'as peut être déjà croisé sur YouTube mais si ce n'est pas le cas, ma mission est de te permettre de retourner littéralement Shopify.

Laisse moi m'expliquer, tu as déjà du te rendre compte si tu as une boutique sur Shopify que les thèmes sont très restreints.

C'est à dire que tu ne pourras jamais personnaliser à 100% ton site Shopify au delà de ce que peut te permettre ton thème.

ET BOOM, c'est ici que j'interviens. Ayant fait l'école 42, et étant passionné de code depuis la plus tendre enfance, je vais te permettre de venir personnaliser à l'infini ta boutique Shopify en passant par le code accessible directement sur ton Back-Office.

Pas de panique, je viens VULGARISER au maximum la chose afin que tout le monde (sans exception) puisse être capable de code sur leurs boutiques.

Découvrir nos produits et services d'optimisation de boutiques Shopify

Sinon si tu es juste là pour pouvoir personnaliser le prix sur ta boutique Shopify, alors lis bien attentivement l'article qui va suivre.

Qu-est ce que je peux modifier sur le prix de mon produit sur Shopify ?

A l'issu de cet article tu seras en mesure de personnaliser à 100% le prix de ton produit sur ta boutique Shopify :

• Changer la couleur
• Changer la taille
• Appliquer des animations
• Ect, ect ...

Quels sont les 3 types de prix que je peux modifier sur Shopify ?

À noter avant de commencer ce tutoriel qu'il n'y a pas un seul prix sur Shopify mais bien trois prix différents :

• Standard
• En solde
• Barré

Fait donc bien attention à sélectionner les trois prix, ou bien à faire le choix de l'élément prix que tu veux modifier parmi les trois éléments.

Je précise comme d'habitude que cet article fonctionnera pour tous les thèmes de Shopify.

Si tu veux tu peux également lire ces deux articles qui pourront t'aider à bien comprendre comment modifier ton code sur Shopify :

• Comment modifier le code sur Shopify ?
• A quoi sert le .liquid sur Shopify ?

Comment retrouver la classe du prix sur ton site Shopify ?

La première des choses à faire pour modifier le code sur Shopify est de trouver la classe de la <div> que tu veux modifier.

Si tu connais vraiment rien de rien à l'HTML tu peux continuer de lire cet article et suivre 'bêtement le tutoriel', mais je te recommande de faire ma mini formation totalement gratuite qui va vraiment te permettre de gagner énormément de temps pour tes prochaines modifications de code.

Découvrir nos produits et services d'optimisation de boutiques Shopify

Première que tu dois comprendre est que le prix est un Snipet, ce qui signifie que tu modifieras le code de ton Snippet à un seul endroit et le prix sera modifié sur toutes les pages de ton site Shopify (peu importe ton thème).

Pour trouver le Snippet d'un élément tu dois utiliser Google Chrome.

Ce moteur de recherche te permettra d'inspecter l'élément de n'importe quelle page en faisant un clique droit.

Donc tu te rends sur le prix que tu souhaites modifier (prix standard, prix en solde, ou prix barré), et tu fais un clique droit dessus. Puis tu clique sur 'inspecter élément'.

Une fois cela fait tu vas te retrouver sur une page qui affiche le code de ta boutique.

Tu vas maintenant mettre ta souris à nouveau sur le prix que tu voudras sélectionner.

Dans 90% des cas, le nom de ta classe s'appellera :

featured-product_price

Si ce n'est pas le cas je te recommande de regarder cette vidéo à partir de 3 min, et de bien suivre ma méthode pour trouver le nom du snippet de ton prix.

https://www.youtube.com/watch?v=4QmaWHrEFfg&t=143s

Comment retrouver le Snippet de ton prix sur ta boutique Shopify ?

Une fois que tu as trouvé le nom du Snippet qui contient le prix de ta boutique Shopify tu dois te rendre sur le code en back office :

• Rend toi sur le back office
• Clique sur boutique en ligne
• Clique sur thèmes

Tu auras ici accès à tous tes fichiers.

Dans 90% des cas, le nom de ton fichier contenant le prix s'appellera :

Une fois que tu es sur le ficher featured-product, fais un CTRL F pour retrouver ta classe :

featured-product_price

A ce moment, tu vas te retrouver sur un :

include "product-price"

Ca veut dire que la classe appelle un Snippet.

Quand tu appuies sur la flèche le fichier du Snippet Prix va directement s'ouvrir.

Comment modifier le code de ton prix sur ta boutique Shopify ?

Maintenant que tu es sur le Snippet product-price (si tu n'as pas réussi regarde la vidéo), tu vas pouvoir trouver les class de tes 3 différents prix :

• Standard
• En solde
• Barré

Maintenant que tu as pu trouver les classes de tes différents prix, tu vas pouvoir appliquer du CSS.

Pour rappel le CSS te permet de modifier le style d'un élément (en l'occurence le prix dans cet article).

Si tu as envie d'en savoir plus tu peux toujours rejoindre ma mini formation gratuite qui te permettra de modifier ta boutique Shopify de A à Z :

Découvrir nos produits et services d'optimisation de boutiques Shopify

Donc une fois que tu as copier la .class du prix que tu souhaites personnaliser, tu vas pouvoir modifier son style en passant par le CSS.

Pour cela toujours sur le même fichier product-price.liquid tu vas copier coller cette ligne de code :

{%style%}
              .price-item--regular{
              Et ici tu mets le code CSS de ton choix
              }
              .price-item--sale{
              Et ici tu mets le code CSS de ton choix
              }
              {%endstyle%}
              

Dans ce cas, tu vas pouvoir modifier directement ton CSS grâce à la balise {%style%}

Ensuite tu vas choisir sur quel élément tu veux modifier ton CSS avec le .class

Dans notre cas nous avons l'élément :

• .price-item--regular qui concerne le prix barré
• .price-item--sale qui concerne le prix affiché

Et enfin tu vas applique ton code CSS pour modifier le style de tes éléments :

• Taille
• Couleur
• Ect, ect

Si tu veux animer le prix tu peux lire mon article : Comment animer le bouton ajout panier sur ton site Shopify ?

En résumé :

Pour résumé tu vas devoir :

• Trouver la classe ton ton prix
• Trouver le fichier de ton prix
• Copier la classe de ton prix
• CTRL F la classe de ton prix dans le fichier appartenant sur le Back Office
• Te rendre sur le Snippet de ton prix
• Copier les classe de tes prix à modifier
• Intégrer ton CSS sur la classe désirée dans le fichier de ton prix

Si tu veux aller plus loin, pour créer des boutiques qui sont uniques et totalement personnalisables rejoint ma formation Gratuite :

Découvrir nos produits et services d'optimisation de boutiques Shopify

C'était Thomas,

A très bientôt