Nous allons apprendre à créer un système d’onglets qui va vous permettre de renseigner une bonne fois pour toute les informations redondantes dans des onglets distincts « livraison et retours » et « questions »… libre à vous de renommer ces intitulés et de faire correspondre les zones de textes associées au titre

L’idée est donc d’écrire dans les fichiers les textes pour éviter de devoir les taper sans arrêts dans votre éditeur !

Un gain de temps vous ne trouvez pas ? 😉

La zone description sera la zone de votre éditeur d’une fiche produit

les 2 autres sont libres et donc à vous d’écrire ce que bon vous semble en respectant certains standard du web

Un texte doit être entouré de balises html donc d’un <p>Votre texte</p> c’est un paragraphe qui commence par <p> et qui se fini par </p>

Il faut impérativement respecter cette syntaxe !!!

Bref voici le résultat que vous obtiendrez (pas forcément les mêmes couleurs suivant votre thème)

exemple-tabs

Rappel:

La ligne de code qui correspond au texte que vous renseignez dans l’éditeur donc la zone de contenu de votre fiche produit est celui ci:

{{ product.description }}

Mémorisez le bien car il va falloir le trouver et le remplacer par le code que vous trouverez plus bas

Il se peut que votre thème contient 2 fois cette ligne de code, il faudra donc faire 2 fois la manipulation

1. Se rendre sur l’admin et cliquer sur « Online store »

2. Cliquer sur Action -> Edit HTML et CSS

3. Trouvez le dossier « Sections» et cliquez dessus cela va dérouler les fichiers qui le compose

4. Cliquer sur le fichier product-template.liquid

5. Trouvez la ligne de code {{ product.description }}  et remplacez la par le code ci-dessous 

6. Vous pouvez désormais modifier à votre convenance le contenu livraison & retours et questions

<style>#my-tab ul.tabs li a.active,#my-tab ul.tabs li:last-child a{border-top-right-radius:2px}#my-tab,#my-tab ul.tabs:after{clear:both}#my-tab{margin-top:15px;overflow:hidden;display:block}#my-tab ul.tabs{border-bottom:1px solid #DDD;display:block;margin:0;padding:0}#my-tab ul.tabs li{display:block;float:left;height:45px;margin-bottom:0;padding:0;width:auto}#my-tab ul.tabs li a{-moz-border-bottom-colors:none;-moz-border-image:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:#F5F5F5;border-color:#DDD!important;border-style:solid;border-width:1px 1px 0 0;display:block;font-size:15px;height:45px;line-height:30px;margin:0;padding:7px 12px;text-decoration:none;width:auto;font-weight:700;color:#303030;border-bottom:none!important}#my-tab ul.tabs li a.active{background:#fff;border-left-width:0;border-top-left-radius:2px;color:#111;height:46px}#my-tab ul.tabs li:first-child a.active{margin-left:0}#my-tab ul.tabs li:first-child a{border-top-left-radius:2px;border-width:1px 1px 0}#my-tab ul.tabs:before,ul.tabs:after{content:" ";display:block;height:0;overflow:hidden;visibility:hidden;width:0}#tab-1,#tab-2,#tab-3,#tab-4{border:1px solid #e7e7e7;border-top:0;padding:25px 35px 35px;min-height:215px}@media(max-width:600px){#my-tab ul.tabs li{width:100%;float:none;display:block}#my-tab ul.tabs,#my-tab ul.tabs li{height:auto}}</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
<div id="my-tab" class="my-tab">
 <ul class="tabs">
 <li><a href="#tab-1">Description</a></li>
 <li><a href="#tab-2">Livraison & retours</a> </li>
 <li><a href="#tab-3">Questions</a></li> </ul>
 <div id="tab-1">
 {{ product.description }}
 </div>
 <div id="tab-2">
 <h2>Livraison et retours</h2>
 <p>Texte livraion et retours</p>
 </div>
 <div id="tab-3">
 <h2>Des questions ?</h2>
 <p>Texte questions</p>
 </div> 
</div>


7. Cliquez sur le bouton « save » ou faite ctrl + s

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

Cet article a 65 commentaires

  1. Bonjour et merci pour votre tuto !

    Cependant, lorsque que j’indique une information dans le deuxième onglet (qui est pour moi « utilisation »), cela affecte toutes mes autres pages produits …

    1. Oui bien sur c’est fait en ce sens 😉 pour mettre les textes redondants et générique sur les fiches produits. bonne soirée

      1. Donc dans votre cas ce n’est pas possible étant donné que le fichier est générique, et que vous n’avez q’un seul editeur de texte sur chaque fiche produit qui sera forcément dans l’onglet description 😉

    2. Bonsoir,

      Afin d’agir sur un seul produit et non l’ensemble de vos produits, vous pouvez copier ce code directement dans la description HTML du produit.

      – Aller dans votre onglet « products » depuis votre gestionnaire administrateur
      – Cliquer sur le produit désiré
      – Dans la partie description, cliquer sur le bouton «  » qui vous fera accéder au code HTML de votre produit, tout supprimer (en prenant soin de copier/coller la description du produit auparavant) et copier/coller le code ci-dessus. Coller la description du produit à la place de {{ product.description }}.

      Vous pouvez ensuite de nouveau cliquer sur le bouton «  » pour procéder à la mise en page de vos différentes parties.

      En espérant que cela fonctionne pour vous 🙂

      1. Bonsoir, oui merci 😉 c’est une possibilité ! cela dit c’est une technique pas très propre au niveau des bonnes pratiques mais si ca fait le job parfois on s’en fout 😀

  2. Merci pour ce tuto Geoffrey.
    J’ai le thème RETINA sur shopify, développé par « out of the sandbox ». Et ça ne marche pas lorsque je mets ton code dans « product-description-bottom-template.liquid » (c’est ici que j’ai mon {{product.description}} ). Aurais-tu une idée sur problème ?

    Merci d’avance 🙂

  3. Hello,

    Merci pour ce partage très bien expliqué j’ai réussi même si je suis une bille en code ^^

    Juste comment je peux agrandir la taille de mes onglets (pas le titre mais la description par exemple) car moi mes phrases sont compactées au bout de 4 mots, ca fait pas propre et je trouve pas.

    Merci à toi 🙂

    1. Salut et merci pour le com, trouve min-height:215px et mets 450 ou plus selon la langueur de ton texte
      Bonne journée

      1. Hello,

        merci pour ta réponse c’était surtout en termes de largueur de mon onglet pour éviter que j’ai un retour à la ligne au bout de 5 mots.

        Car la min-height c’est pour la longueur c’est ça ?

        1. Oui la hauteur minimale

          1. ok moi j’essaie d’agrandir la largueur du cadre 🙁 Je continue à chercher merci

          2. Comme tu as mis sur ton exemple en gros

          3. Ton thème visiblement entre en conflit avec mon code et c’est pour ca que tu n’as pas le meme resutalt
            Contact moi en mp sur facebook pour voir le en action 😉

  4. Salut Geoffrey, comment fais t-on pour mettre en page ? Parce que quand je mets mon texte dans l’emplacement dédié, tout est collé sans mise en forme. Merci

  5. Bonjour merci pour tes tutos, sais-tu comment on peut mettre notre page description en-dessous des images et recentrer les images? 🙂

  6. Super Tutos, c’ est ce que je cherchais pour amélioré ma page de vente Venture , tres basique

    Par contre faut il remplacer {{ product.description }} ou coller le code juste en dessous
    effectivement, je me retrouve avec une double fiche produit, et ne trouve pas de solution ( plus je remplace {{ product.description }} plus j’ ai des doublons

    Merci pour ton tutos, ton aide et surtout ta compassion !

    1. Merci, il faut remplacer le code existant 😉 et éviter que le code soit udans une boucle de codage pour éviter le clonage… l’idéal est de le mettre tout en bas dans un 1er temps pour tester le système et d’ensuite le déplacer petit à petit au bon endroit. Bonne soirée

  7. Hey! très bon tuto, je trouve ça très intéressant et mélioratif pour la page produit. Bon j’ai pas de chance chez moi malheureusement ça déplace et casse des « fonctions » de la page produit (couleur, quantité, collection, footer). Merci quand même

    1. Salut et merci pour le commentaire
      Supprime la portion de code qui commence par… et reteste ca peu marcher selon le thème
      script src=https://code.jquery.com/jquery-1.12.4.min.js …..script

      Bonne soirée

  8. Un graaaand merci pour ce bout de code qui change la vie de la page produit!!! 🙂
    Une question subsiste, je souhaiterai que ces onglets apparaissent sous les images produit à gauche de la page (donc plus dans la description produit) . avez vous une idée d’où coller le code du coup?

    Merci encore!

    1. Merci pour le commentaire ! Oui sous le carrousel d’image ou bien après la colonne de droite… dur à expliquer car chaque thème a sa propre architecture sémantique. le mieux et de tester à plusieurs endroits

  9. Bonjour Geoffrey, super tuto encore une fois !
    J’ai une petite question. J’utilise l’app Product Review et j’ai donc créé un onglet avec les avis.

    J’ai aussi la note et le nombre d’avis qui s’affichent en haut de page en dessous du nom du produit (avec )

    Comment faire pour que lorsque le client clique sur « ***** 45 avis » cela l’emmène directement à l’onglet. Pour l’instant avec une balise en gros j’arrive à emmener aux onglet mais ça n’ouvre pas « AVIS » (le 3ème pour moi).

    Merci d’avance pour ta réponse,
    Arthur

    1. Salut, oui je vois ce que tu veux dire par contre c’est un développement plus complexe que je ne pourrai expliquer par écrit 🙂

  10. Coucou Geoffrey,

    Tuto super intéressant, seulement je n’arrive pas à régler la mise en page, mon texte est complètement collé!
    Je ne sais pas mettre de caractère en gras ou revenir à la ligne, créer un espace

    Tu sais comment faire?

    Merci

    1. Salut, dans les

      style=’padding:15px 25px !important;’
  11. Salut Geoffrey,
    Merci de partager ces tutos !

    A ce sujet, j ‘ai copier le code directement dans la description HTML du produit, pour un premier essai, ça fonctionne en changeant le padding; Je voudrais rentrer le code en double pour mon thème, directement dans l’éditeur pour bien faire.
    Est ce que je risque pas d’effacer toutes les descriptions de produits déjà faites ?

    Merci à toi 🙂

    1. Non ca ne risque rien étant donné que le {{ product.description }} ne fait qu’afficher le contenu de ton éditeur des fiches, tes descriptifs sont sauvegardés sur shopify

  12. Super tuto marche nickel pour le thème « Debut » de shopify ! Super!Merci

  13. Hello Dgeo,

    Super tips, je l’ai testé sur début c’est top.

    Je suis sur le thème turbo et le fait de mettre le code ne change rien, rien n’apparaît sur ma boutique :/

    A tu une solution ?

    1. Hello super 😉

      Non le thème turbo n’aime pas trop mes tutos en général c’est même le moins compatible

      1. Ah mince :'(

  14. Bonjour et merci !

    Très bonne présentation sur le desktop, en revanche sur le mobile c’est représenté avec plusieurs lignes horizontales avec un onglet par ligne (au lieu de plusieurs onglet sur une seule ligne).

    Question : peut-on remédier à ça ?

    1. Bonjour, oui c’est normal car sur mobile on a pas la place de les mettre 😉

  15. Salut Geoffrey ! Merci encore pour ce super tuto !
    J’ai juste un soucis de mise en page, Je dispose de 3 onglets et le 3e se place en dessous des 2 autres, de plus le début de chaque phrase commence au bord de l’onglet.

    Je suis sur le thème brooklyn :). Si tu as une solution se serai vraiment cool!

    1. Salut, si le 3ème ne passe pas si qu’il n’a pas assez de place, idéalement réduire la taille des titres pour que ca passe
      Pour les marges, surement que brooklyn reprend la main dessus… trouve (ctrl + f la zone : padding:7px 12px et met padding:7px 12px !important à la place pour tester

  16. Bonsoir ,et mercipour ces tuto ,
    mais moi j’arrive pas à mettre de texte dans l’onglet 2 et 3 seul la description .Comment faire , merci

    1. Bonjour et merci pour le message
      Les onglets 2 et 3 sont libres c’est à dire que tu dois mettre tes textes directement dans le fichier et seront communs à toutes les pages produit du site 🙂

      1. Bonjour et merci pour votre réponse ,
        Excusez-moi je suis encore novice,quel fichier car je royais que c’est ma page Livraison &Retour et Questions/Réponses qui va apparaître dans l’onglet, ou il faut le mettre directement dans le code le texte?
        Merci et bonne jornée

        1. Oui seul le champ description est administrable (éditeur fiche produit) les 2 autres sont génériques donc il faut écrire vos textes dans le code

  17. Bonjour,

    Est-ce possible de centrer ces lignes ?

    Ma description produit se trouve en dessous de l’image produit et du add to cart, cependant quand j’insère les lignes de code, j’ai bien mes 3 catégories qui s’affichent mais en partant de la gauche.

    Possible de centrer cela ? J’ai fais plusieur test sur tes lignes en modifiant ‘left’ par ‘center’ mais cela ne fonctionne pas ^^

    Si tu as un instant …

    Merci d’avance 🙂

    1. Salut, mettre dans les textes des style= »align:center !important; »

  18. bonjour
    merci pour tout ces tuto juste géniaux !!!
    je voudrais déplacer ce bloc en dessous des photos produits mais je ne sais pas comment le faire… peut tu m’aider stp

    1. Hello, merci pour le com, ca dépend du thème, il faut essayer de le placer plus bas et y aller à taton pour trouver le bon emplacement

  19. Bonjour,

    Comment réduire la taille des titres dans les onglets ? Pas les titres des onglets mais des titres présents dans les onglets !

    Merci bien 🙂

  20. Bonjour,

    Comment insérer des images dans les ongles svp ?

    Merci de votre aide et @bientôt

    1. Bonjour, en regardant le tuto sur comment mettre un badge de sécurité sur shopify ou vous trouverez la manière de procéder pour insérer une image dans ces zones

  21. hello, merci pour tout ces tuto genial !!!
    J’utilise le theme fastlane d’ulrich vallée mais je ne trouve pas le product-template.liquid..
    Peux tu m’éclairer ?
    merci bcp pour ton aide
    A bientot
    theo

    1. Hello, il étrangement mes codes ont du mal sur Fastlane et je ne sais pas trop pourquoi sachant qu’ils sont le + génériques possible. il faudra surement voir du côté du support de Fastlane pour le coup 🙂 bonne soirée

  22. Bonjour,

    Merci pour ton tuto qui m’a permis d’améliorer l’ergonomie de mon site.

    J’aimerai dans l’onglet 1 faire un lien qui permet d’afficher l’onglet 2 ou 3…

    Comment procéder ?

    Avec les ancres et les ID je n’y arrive pas. Il faut passer par le JS ?

    ++

    1. Hello, merci pour le message, oui il faut passer par le JS et ce n’est pas spécialement simple 🙂

  23. Bonjours j’aimerais que dans un de mes onglets se trouve un tableau avec le guide des mes tailles pour mes différentes produits. Comment puis je faire cela?

  24. Bonjour j aimerais que dans mon second se trouve un tableau. Celui-ci correspondrait au taille de vêtement de mes produits, cela est il possible?

    1. Oui c’est possible 🙂 regardez dans mes tutos il y a un code pour mettre un tableau de code promo, il suffit de l’adapter à votre cas de figure

  25. Salut! J’aimerai mettre ceci sur ma page d’acceuil pour un site monoproduit mais quand j’ajoute le code dans featured products, il n’y a rien dans les onglets alors aue je met tout dedans… Il y a til un autre code pour ce cas de figure ?
    Merci bien 🙂

    1. Hello, étrange, le texte est peut être en blanc et balnc sur blanc = sensation d’invisibilité 🙂 sinon faudrait voir le site pour voir de visu

      1. merci beaucoup mais j’utilise le theme turbo, cela vient peut etre de la ?

        1. Oula oui surement, Turbo est assez galère niveau code, il accepte en général mal mes tutos qui sont pourtant le + générique possible.

  26. Bonjour, est-il possible de changer la couleur des bordures ? au lieu que ce soit en orange, par exemple le mettre en rouge ?
    Merci en tout cas!

    1. Hello, dans ce cas il faut changer le code couleur des: border:1px solid #e7e7e7 et mettre border:1px solid #ff0000

  27. Bonjour,
    Déjà merci pour ce tuto très utile !

    J’ai plusieurs collections sur mon site. Si j’applique le code dans {{ product.description }}, les changements s’appliquent sur TOUTES mes fiches produits et TOUTES mes colletions. Or, il faudrait que les intitulés et les contenus de mes onglets soient différents selon chaque Collection….
    Y a-t-il quelque chose à faire pour cela ?

    Merci par avance,

    1. Hello, non navré 1 seul fichier pour tous les produits ce n’est donc pas contextuel. seule une app aurait ce pouvoir.

  28. Bonjour, lorsque je vais dans le dossier Sections, je n’ai rien dedans contrairement aux autres. Dois je donc créer une section et coller le code donné ?

    1. Hello, sur certains thèmes c’est plutôt dans templates – product.liquid

  29. Bonjour !
    Tu pourrais nous expliquer comment créer un système d’accordéon plutôt ? Merci !

    1. Hello, regarde dans la liste des tutos c’est déjà fait dans comment faire un FAQ 😉

Laisser un commentaire

Fermer le menu
×
×

Panier