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:

Comment personnaliser fiche produit shopify

 

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 😉

Ce tutoriel existe aussi en vidéo

Bon tuto à vous !

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 4.9 sur 22 votes]

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 55 commentaires

  1. Zavier

    15 Nov 2018 Répondre

    Bonsoir, puis je avoir un exemple avant et après ? cordialement.

  2. f4b1

    25 Mar 2019 Répondre

    Super merci, je cherchais un moyen de différencier selon le contenu des produits sur Shopify

  3. Cristol

    3 Juil 2019 Répondre

    Merci pour cet article, j’aimerais savoir ce qu’il faudra rajouter pour le rendre responsive ?

    1. Dgeo Dev

      5 Juil 2019 Répondre

      Hello, c’est le thème qui doit le prévoir en principe 🙂

  4. Florestan

    13 Juil 2019 Répondre

    Bonjour,

    Merci pour votre tuto, peut ton appliquer ce code a une page collection ?

    1. Dgeo Dev

      14 Juil 2019 Répondre

      Bonjour, si ces pages ont un form avec un ajouter au panier oui c’est théoriquement possible.

  5. Raibi

    10 Sep 2019 Répondre

    Bonjour. 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 ?

    1. Dgeo Dev

      11 Sep 2019 Répondre

      Bonjour, 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 😉

  6. Raibi

    13 Sep 2019 Répondre

    Je n’ai pas compris, en haut a droite ??

    1. Dgeo Dev

      14 Sep 2019 Répondre

      J’ai rien dis, je me suis trompé :p ne pas tenir compte de la suite de ma réponse 🙂

  7. Gilles

    22 Sep 2019 Répondre

    Bonjour, 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

    1. Dgeo Dev

      23 Sep 2019 Répondre

      Hello, 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.

  8. Coste

    22 Oct 2019 Répondre

    Bonjour 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?

    1. Dgeo Dev

      22 Oct 2019 Répondre

      Hello, 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 🙂

  9. 123

    27 Nov 2019 Répondre

    Bonjour,

    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??

    1. Dgeo Dev

      30 Nov 2019 Répondre

      Bonjour, 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 😉

  10. Rafael Silva

    28 Nov 2019 Répondre

    Bonjour, 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.

    1. Dgeo Dev

      30 Nov 2019 Répondre

      Bonjour, 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.

  11. charlotte

    12 Jan 2020 Répondre

    Bonjour,
    Merci beaucoup pour vos tuto !
    J’ai suivi celui pour ajouter des champs personnalisés au moment d’ajouter au panier un produit.
    Je voudrais n’afficher les champs personnalisés que pour certaines collections.

    J’ai essayé plusieurs choses mais ça ne fonctionne pas … {% if product.collection == faire-parts %} {% if product.collections == faire-parts %}

    Pourriez-vous m’éclairer s’il vous plaît ?

    1. Dgeo Dev

      14 Jan 2020 Répondre

      Bonjour, c’est plutôt un truc du genre qu’il faut faire: {% if collection.handle == ‘faire-parts’ %}

  12. Claire

    27 Jan 2020 Répondre

    Bonjour, est-il possible de supprimer le sélecteur de quantité sur certaines fiches produits svp? (idéalement sur une collection entière) Merci beaucoup!!

    1. Dgeo Dev

      28 Jan 2020 Répondre

      Bonsoir, oui c’est possible mais c’est assez spécifique… je ne peux malheureusement pas donner un code générique. Bonne soirée

  13. marie

    7 Fév 2020 Répondre

    Bonjour,
    Comment faire pour une sélection de produits? A appliquer sur une dizaine d’articles.
    Je ne veux pas les balises sur toutes les pages.
    Merci! 🙂
    Marie

  14. Victor

    4 Mar 2020 Répondre

    Bonjour ! Grâce à vos tutos, je m’essaye à la personnalisation du code de shopify et je dois avouer que c’est plutôt pas mal du tout ! Merci beaucoup pour çela !

    J’aimerais avoir le sélecteur de quantité à coté des sélecteurs couleurs & tailles ou encore a coté de l’ATC. L’important est qu’il n’y ai pas de passage à la ligne. Ça ne doit pas être sorcier, mais je bloque. J’ai essayé de créer des colonnes ect… mais je n’y arrive pas, comment faire ? Je suis sur le thème Début.
    Merci
    Victor

    1. Dgeo Dev

      10 Mar 2020 Répondre

      Hello, alors ca dépend des thèmes. le mieux serait de me linker le lien du site en MP pour regarder 😉

  15. Nicolas

    2 Sep 2020 Répondre

    Bonjour,
    Merci pour votre tuto mais comment pour que le texte soit sous l’image mais pas sur la droite ?
    Faut t’il faire une modification au niveau du code ?
    Cordialement

    1. Dgeo Dev

      5 Sep 2020 Répondre

      Hello, rajouter une ou plusieurs balises <br /> après la balise image 🙂 bonne journée

  16. Mélodie

    25 Sep 2020 Répondre

    Bonjour Dgeo,
    Tout d’abord, merci beaucoup pour vos vidéos, elles m’aident énormément dans la création de ma boutique.
    J’aimerai personnaliser toutes mes pages produits avec des textes, images, et tableaux.
    Savez-vous s’il est possible d’avoir une feuille uniquement dédiée aux personnalisations ?
    Je souhaiterai regrouper mes personnalisations sur une même feuille pour garder la feuille product-template.liquid clean.
    Cordialement

  17. Sophie

    18 Oct 2020 Répondre

    Bonjour
    Super tuto, tres utile tout fonctionne a merveille, mais j’ai une petite question.

    Le code dans product-template.liquid est tres long, car beaucoup d’articles a personnaliser, comment mettre à la ligne ???
    Merci a vous

  18. Sophie

    8 Nov 2020 Répondre

    merci beaucoup
    je viens d’acquérir speedfly, super thème, je voulais savoir si la personnalisation de la fiche produit est incluse ou il faut que je fasse la manipulation

    Merci a vous

    1. Dgeo Dev

      9 Nov 2020 Répondre

      Hello, pas besoin de ce tuto si vous avez speedfly car c’est inclus et en mieux 😉 au besoin nous contacter sur le support ici: speedecom.freshdesk.com

  19. carpentier

    8 Nov 2020 Répondre

    bonjour, je souhaiterai juste ajouter une personnalisation « nom + prénom » comme sur ton exemple de guitare juste à côté de ton ajout panier merci

  20. Samolo

    30 Nov 2020 Répondre

    Bonjour,

    J’ai mon produit au niveau de la page d’accueil de mon site. Si je modifie la section product-template.liquid, je ne retrouve pas ma modification. Savez vous si le fait que le produit soit en page d’accueil, nécessite une modification au niveau d’un autre fichier?

    Merci d’avance.

    1. Dgeo Dev

      1 Déc 2020 Répondre

      Bonjour, il faut dans ce cas trouver le bon fichier généralement dans sections – featured-product.liquid et adapter le tuto

  21. Maria

    22 Déc 2020 Répondre

    Bonjour,

    J’ai aimé votre vidéo, toutefois, j’ai voulu mettre en application votre procédure mais je ne trouve pas la description du produit. est ce normale? voici ce que j’ai sur ma page:

    {% if section.settings.product_description_position == ‘right’ %}
    {%- assign position = ‘right’ -%}
    {% include ‘product-description’ %}
    {% endif %}

    {% if section.settings.social_sharing_products %}
    {% include ‘social-sharing’, share_title: product.title, share_permalink: product.url, share_image: product %}
    {% endif %}

    {% if section.settings.product_description_position == ‘below’ %}
    {%- assign position = ‘below’ -%}
    {% include ‘product-description’ %}
    {% endif %}

    {% unless product == empty %}

    {{ product | json }}

    {% endunless %}

    1. Dgeo Dev

      23 Déc 2020 Répondre

      Bonjour, il faut trouver le product-description.liquid dans le dossier snippets 😉

  22. Jules

    30 Déc 2020 Répondre

    Bonjour,
    Je ne comprends pas, J’ai refait 3 fois le tuto et cela ne marche pas. La nouvelle description s’affiche en dessous de l’ancienne. Que faire ? Pourtant j’ai le thème début.
    Cordialement
    PS : Merci pour les tutos

    1. Dgeo Dev

      30 Déc 2020 Répondre

      Bonjour, il faut supprimer le doublon {{ product.description }} natif du thème

  23. Magali

    15 Mar 2021 Répondre

    Bonjour,
    Je n’ai pas trouvé de tuto correspondant, celui-ci s’en approche le plus !
    Comment faire pour agrandir la largeur des pages des mentions légales ? Mon texte est centré au milieu, je souhaiterais qu’il soit de la même largeur que mon en-tête.
    Merci d’avance de votre retour.

    1. Dgeo Dev

      15 Mar 2021 Répondre

      Hello, c’est dépendant du thème. Il faut faire péter la grille de mise en forme. Le mieux est de demander au support du thème car ca touche à la structure générique du thème et c’est dangereux 🙂

  24. sylvain

    8 Mai 2021 Répondre

    bonjour
    dans mon thème, cocafe, je ne trouve pas product.description dans la section product-template.liquid
    du coup je ne sais pas comment faire des tests en suivant le tuto.
    une idée ?

    merci

  25. sylvain

    8 Mai 2021 Répondre

    ah et je n’ai pas non plus de snippet : product.description

    1. sylvain

      8 Mai 2021 Répondre

      j’ai trouvé!

      1. Dgeo Dev

        9 Mai 2021 Répondre

        Hello, ok super ! bravo 🙂

  26. fanny Mourand

    29 Juin 2021 Répondre

    Bonjour

    Merci pour ce tuto, il m’éclaire un peu sur ce que je souhaite faire, mais je veux être sûre que ce soit bien possible avant,

    Je souhaite simplement mettre toutes ma description produits sur deux colonnes au lieu d’une seule (mes clients sont à 95% sur ordinateur et le thème speedfly est top mais plutôt pour téléphone..)

    Donc pour simplement mettre en deux colonnes mais pour l’ensemble des produits de mon site, c’est bien la même procédure ?

    Cordialement

    1. Dgeo Dev

      29 Juin 2021 Répondre

      Bonsoir, c’est un peu délicat mais si vous êtes sur speedfly je peux vous donner un hack et une explication pour y arriver. Il suffit de le demander au support ici 🙂 speedecom.freshdesk.com . Bonne soirée

  27. Nagib

    11 Août 2021 Répondre

    Hello, super tutoriel ça m’aide vraiment ! J’ai juste une petite question, est-il possible de « cibler » les produits via le type ou la balise attribué via shopify ? Merci beaucoup

    1. Nagib

      18 Août 2021 Répondre

      Au final j’ai trouvé une solution j’ai simplement fait {% if product.tags contains ‘balise’ %} pour directement viser la balise assignée via shopify !

      1. Dgeo Dev

        19 Août 2021 Répondre

        Cool bravo !!! 🙂

  28. Barbara

    5 Oct 2021 Répondre

    Bonjour,
    Merci pour le tuto! On me l’a conseillé, or il je n’arrive pas à le faire fonctionner sur mon thème… j’utilise le thème Impulse avait vous en des retours ?
    Même quand j’utilise votre texte directement dans mes descriptions de collection cela ne fonctionne pas donc il ne s’agit pas d’une erreur que je fais en l’appliquant à mon texte… j’ai portant bien collé les codes dans le thème dans les fichiers thème.css.liquide et thème.js
    Sur le téléphone j’ai bien le texte qui se met en caché avec le bouton mais quand je clique cela actualise la page et n’ouvre pas le texte caché. Sur l’ordinateur le texte caché reste visible avec le bouton en savoir plus en bas qui est cliquable mais qui m’actualise également la page…
    J’ai recommencé tout plusieurs fois je ne comprends pas…
    Merci pour votre aide !

    1. Dgeo Dev

      5 Oct 2021 Répondre

      Bonjour et merci pour le com 🙂 la condition se fait sur des fiches produits, du coup pour les collections il faut remplacer product.id par collection.id 🙂

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine