Vous avez toujours voulu savoir comment personnaliser votre fiche produit sur shopify en la contextualisant ? Alors ce tutoriel va vous expliquer comment ajouter du contenu différent selon votre produit !
Grâce à une condition vous aller pouvoir afficher du texte, une image, une vidéo et même créer des zones de type colonnes.
Vous le savez la contextualisation sur un thème n’est pas possible sur shopify. Le seul moyen de le faire et d’utiliser une application de personnalisation de page comme Gempage ou autre applications bien trop gourmande. Mais rassurez-vous je vais montrer comment faire cela avec quelques lignes de codes et ainsi vous éviter d’installer une application.
Il faudra faire attention à ce que vous faites car vous serez amené à faire des manipulations dans les fichiers du thème.
Attention à ne pas trop surcharger vos fichiers car vous risquez rapidement de vous perdre dans toutes les sections de codes que vous allez ajouter. A utiliser avec modération !
Vous pouvez voir le résultat sur le site de démo: https://dgeodev.myshopify.com/products/produit-1
Nous allons dans un premier temps voir comment identifier l’identifiant de son produit afin d’afficher des éléments uniquement pour lui.
Rendez vous dans la fiche produit que vous souhaitez personnaliser et repérez l’identifiant encadré en rouge dans la capture d’écran ci-dessous:
Ensuite nous allons nous rendre dans les fichiers de votre thème. Rendez vous dans online store – Actions – Edit code, trouvez le dossier Sections et le fichier product-template.liquid.
Une fois le fichier ouvert vous allez devoir repérer la zone ou vous souhaitez faire apparaître votre contenu spécifique. Pour se faire mettez un petit toto1, toto2 etc un peu partout pour voir ou ils s’affichent. Une fois la zone repérée supprimez les totos 😀 et commencez à mettre les bouts de codes dont on va parler maintenant.
Nous allons maintenant voir comment afficher tel ou tel élément afin de personnaliser votre fiche produit shopify
Vous aurez dans le code ci-dessous des exemples commentés avec les bonnes balises à utiliser.
Petite astuce: les <br /> permettent de passer à la ligne et de créer un espace entre 2 éléments.
Vous allez voir sur la première ligne la condition avec l’identifiant que nous avons repéré tout à l’heure, vous mettrez le votre et vous fermerez la condition avec la dernière ligne !
Attention à toujours fermer une condition sinon c’est la catastrophe assurée !
Code d’exemple de base à copier/coller dans votre fichier à l’endroit souhaité.
N’oubliez pas de faire une sauvegarde de votre thème avant toute modification afin de vous assurer un retour en arrière en cas de problème 😉
Bon tuto à vous !
Zavier
15 Nov 2018Bonsoir, puis je avoir un exemple avant et après ? cordialement.
f4b1
25 Mar 2019Super merci, je cherchais un moyen de différencier selon le contenu des produits sur Shopify
Cristol
3 Juil 2019Merci pour cet article, j’aimerais savoir ce qu’il faudra rajouter pour le rendre responsive ?
Dgeo Dev
5 Juil 2019Hello, c’est le thème qui doit le prévoir en principe 🙂
Florestan
13 Juil 2019Bonjour,
Merci pour votre tuto, peut ton appliquer ce code a une page collection ?
Dgeo Dev
14 Juil 2019Bonjour, si ces pages ont un form avec un ajouter au panier oui c’est théoriquement possible.
Raibi
10 Sep 2019Bonjour. Question bête peut être. Mais pour sauvegarder avant de manipuler, il suffit de copier tout le code dans un éditeur de text et le mettre dans un endroit sur. Si ça foire on le recopie dans le édit code ?
Dgeo Dev
11 Sep 2019Bonjour, oui et idéalement en cliquant avant sur en haut à droite de l’éditeur de shopify afin de prendre les balises pour ne pas perdre le formatage 😉
Raibi
13 Sep 2019Je n’ai pas compris, en haut a droite ??
Dgeo Dev
14 Sep 2019J’ai rien dis, je me suis trompé :p ne pas tenir compte de la suite de ma réponse 🙂
Gilles
22 Sep 2019Bonjour, merci pour votre code qui fonctionne à merveille. Par contre pour le Responsive Design, je voudrais que la colonne de droite passe en dessous de la colonne de fauche en mode mobile, comment fait on cela svp ? Merci
Dgeo Dev
23 Sep 2019Hello, merci pour le message 🙂
Hum cela me semble délicat car le dom (les éléments) sont identiques sur Desktop et Mobile, le navigateur lit de haut en bas et de gauche à droite donc la colonne de gauche avant celle de droite. Il est possible de le faire en javascript mais cela demande une intervention technique.
Coste
22 Oct 2019Bonjour et merci pour tous ces tutoriels fort enrichissants.
Pourrait tu m’expliquer stp pourquoi sur ma fiche produit ça reste seulement en bloc sur la partie droite et ne s’affiche pas en pleine page, j’utilise le thème venture?
Dgeo Dev
22 Oct 2019Hello, merci pour le message 😉
C’est un soucis d’emplacement. Essaie de mettre le code plus bas dans le fichier pour repérer l’emplacement idéal en effectuant une sauvegarde du thème avant pour éviter les soucis 🙂
123
27 Nov 2019Bonjour,
j’ai ajouté une image dans le code de ma page produit 1, mais l’image s’affiche automatiquement dans ma page produit 2 également, or je ne la veux que pour le premier produit. Comment faire pour qu’elle n’apparaisse pas sur le 2ème produit ? ou comment faire pour en mettre une différente sur chaque page produit??
Dgeo Dev
30 Nov 2019Bonjour, il suffit de faire une condition avec un nouvel identifiant afin d’afficher autre chose pour telle ou telle fiche produit 🙂 la vidéo arrive bientôt 😉
Rafael Silva
28 Nov 2019Bonjour, j’ai suivi ton tuto par rapport a ajouter donc des champs dans nos produit mais la ça m’affiche les mêmes champs dans tout les produits et ce tuto ne m’as aide en rien merci.
Dgeo Dev
30 Nov 2019Bonjour, la vidéo plus complète arrive bientôt 😉 mais il suffit de faire une autre condition selon l’identifiant de tel ou tel produit.