Tuto Comment créer un système d’onglets sur shopify : description, livraison & retour, questions

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

53 commentaires sur “Tuto Comment créer un système d’onglets sur shopify : description, livraison & retour, questions

  1. galerien

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

        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 😉

    1. Maximilien

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

        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. Maël

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

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

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

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

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

      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

  5. Vince

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

      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

  6. Max

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

      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

  7. Arthur

    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

  8. Mariam

    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

  9. Mat

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

      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

  10. Ruben Pareja

    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 ?

  11. Bruno

    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 ?

  12. agostino

    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. Dgeo GD

      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

    1. Dgeo GD

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

        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

  13. EviiiL

    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 🙂

  14. Blerdon Débieux

    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 🙂

    1. Dgeo Dev

      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

  15. Jean

    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 ?

    ++

  16. Perruchot Florian

    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?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*