Comment personnaliser votre fiche produit sur shopify

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é.

{% if product.id == 913225908266 %}

<h3>Titre h3 (à voir selon les besoins h2 h3, h4)</h3>
<p>Paragraphe de texte</p>
<br />
<img src="url-de-l-image" alt="" />
<img src="https://via.placeholder.com/650x200" alt="" />

<video controls="controls" width="100%" height="100%" src="url-de-la-video"></video>
<br />

<p>Pour savoir comment mettre une image rendez-vous sur ce tuto: <a href="http://bit.ly/2JOFdvJ" target="_blank">Mettre une image sur une fiche produit shopify</a></p>
<p>Pour savoir comment mettre une vidéo rendez-vous sur ce tuto: <a href="http://bit.ly/2PMaJQI" target="_blank">Mettre une vidéo interne sur une fiche produit shopify</a></p>

<h3>Créer une mise en page sur 2 colonnes avec bordures</h3>
<table style="width:100%" class="gd-grid-2">
<tr>
<td>
<p>Mettre le contenu de la colonne de gauche ici</p>
</td>
<td>
<p>Mettre le contenu de la colonne de droite ici</p>
</td>
</tr>
</table>
<br />
<h3>Créer une mise en page sur 2 colonnes sans bordures</h3>
<table style="width:100%;border:none;" class="gd-grid-2">
<tr style="border:none;">
<td style="border:none;">
<p>Mettre le contenu de la colonne de gauche ici</p>
</td>
<td style="border:none;">
<p>Mettre le contenu de la colonne de droite ici</p>
</td>
</tr>
</table>

{% endif %}

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 !