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

Nous allons apprendre à créer un système d’onglets sur shopify afin de mieux organiser votre contenu. Ce système va vous permettre de renseigner une bonne fois pour toutes les informations redondantes dans des onglets distincts comme par exemple un onglet « livraison et retours » ou « questions »… Par ailleurs vous êtes libre de renommer ces intitulés, titres et textes pour que cela corresponde à vos besoins. Et pour finir je vous apprendrais à contextualiser des informations pour chaque produit. Allez c’est parti !

Explication du système d’onglets

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

Comment installer le code

Il suffit de suivre ces étapes:

1. Se rendre sur l’admin et cliquer sur « Boutique en ligne »

2. Cliquer sur Actions -> Modifier code

3. Trouvez le dossier « Extraits (Snippets) » et cliquez dessus cela va dérouler les fichiers qui le compose

4. Cliquez sur « Créer un nouveau extrait (ressource) » et nommez le fichier comme ceci : « dg-product-tabs »

5. Copiez collez à l’intérieur le code ci-dessous

<div class="tabs">

  <ul class="tabs__menu" role="tablist">
    <li class="is-active" data-target="tab-1" role="tab"><button>Description</button></li>
    <li data-target="tab-2" role="tab"><button>Informations</button></li>
    <li data-target="tab-3" role="tab"><button>Autre</button></li>
  </ul>

  <div class="tab__content" aria-labelledby="tab-1" role="tabpanel" id="tab-1">
    {{ product.description }}
  </div>
  <div class="tab__content" aria-labelledby="tab-2" role="tabpanel" id="tab-2">
    <h2>Informations</h2>
    <p><strong>CONTENU 2</strong> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="tab__content" aria-labelledby="tab-3" role="tabpanel" id="tab-3">
    <h2>Autre</h2>
    <p><strong>CONTENU 3</strong> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  
</div>

<style>

.tabs {
  --dg-tabs-titles-color: #333333;
  --dg-tabs-titles-background-color: #F0F0F0;
  --dg-tabs-title-active-background-color: #FFFFFF;
  --dg-tabs-border-color: #DDDDDD;
  --dg-tabs-content-background-color: #FFFFFF;
  --dg-tabs-border-radius: 4px;

  max-width:800px;
}

.tabs .tabs__menu {
  list-style:none;
  padding:0;
  margin:0;
}

.tabs__menu > li {
  background:var(--dg-tabs-titles-background-color);
  border-top:1px solid var(--dg-tabs-border-color); 
  border-left:1px solid var(--dg-tabs-border-color);  
  list-style:none;  
  border-radius:var(--dg-tabs-border-radius) var(--dg-tabs-border-radius) 0 0;
}
  
.tabs__menu > li:last-child {
  border-right:1px solid var(--dg-tabs-border-color); 
}

.tabs__menu > .is-active, .tabs__menu > .is-active:last-child {
  background:var(--dg-tabs-title-active-background-color);
  margin-bottom: -1px;
}    

.tabs__menu button {
  font-size:1.6rem;
  line-height:1;
  display:inline-flex;
  padding:1.2rem 1.6rem;
  color:var(--dg-tabs-titles-color);
  text-decoration:none;
  text-align:left;
  width:100%;
  height: 100%;
  border: none;
  background: none;
  cursor:pointer;
}

.tab__content {  
  padding:0 1.6rem;  
  border:1px solid var(--dg-tabs-border-color); 
  background:var(--dg-tabs-content-background-color);
}

@media screen and (max-width:749px) {
  .tabs__menu, .tabs__menu button {
   display:block; 
  }
  .tabs__menu > li, .tabs__menu > li.is-active {
    border-right:1px solid var(--dg-tabs-border-color);
    margin-bottom:0;
    border-radius:0;
  }
}
@media screen and (min-width:750px) {
  .tabs .tabs__menu {
    display:flex;     
  }
}
</style>

<script defer>

if ((typeof window.DG) == 'undefined') { window.DG = {} }

(DG.productTabs = () => {
  
  const tab = document.querySelector('.tabs');  
  if(!tab) return;

  const links = document.querySelectorAll('.tabs__menu li');
  const contents = document.querySelectorAll('.tab__content');  
 
  toggle = (targetId) => {       
    contents.forEach(elem=>{
      elem.style.display = elem.id === targetId ? 'block' : 'none';    
      document.querySelector(`[data-target="${elem.id}"]`).classList[elem.id === targetId ? 'add' : 'remove']('is-active');
    })
  }  
  
  links.forEach((link) => {   
    link.addEventListener('click', () => {
      toggle(link.dataset.target);
    });    
    if(link.className.includes('is-active')){
      toggle(link.dataset.target);
    }
  });
})();

</script>

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

7. Trouvez maintenant le fichier contenant la description du produit généralement le fichier product-template.liquid ! sur Dawn c’est main-product.liquid

8. Trouvez la ligne de code {{ product.description }} et remplacez cette ligne par le code suivant suivant:

{% render 'dg-product-tabs' product: product %}

9. Vous pouvez désormais modifier à votre convenance les titres et contenus des onglets

10. Cliquez sur le bouton « Enregistrer » ou faite ctrl + s

voir la version vidéo sur youtube

Vous souhaitez des onglets différents par produit ?

Dans ce cas je vous invite à regarder la version vidéo ci-dessus 😉

Codes des champ méta de la vidéo

{{ product.metafields.custom.tab_title_1 }}
{{ product.metafields.custom.tab_title_2 }}

{{ product.metafields.custom.tab_content_1 }}
{{ product.metafields.custom.tab_content_2 }}

Code avec des champs méta personnalisés (zones contextuelles)

{% if product.metafields.custom.tab_title_1 == blank and product.metafields.custom.tab_title_2 == blank %}
{{ product.description }}
{% else %}
<div class="tabs">

  <ul class="tabs__menu" role="tablist">
    <li class="is-active" data-target="tab-1" role="tab"><button>Description</button></li>
    {% if product.metafields.custom.tab_title_1 != blank %}
    <li data-target="tab-2" role="tab"><button>{{ product.metafields.custom.tab_title_1 }}</button></li>
    {% endif %}
    {% if product.metafields.custom.tab_title_2 != blank %}
    <li data-target="tab-3" role="tab"><button>{{ product.metafields.custom.tab_title_2 }}</button></li>
    {% endif %}
  </ul>
  
  <div class="tab__content" aria-labelledby="tab-1" role="tabpanel" id="tab-1">
    {{ product.description }}
  </div>
  <div class="tab__content" aria-labelledby="tab-2" role="tabpanel" id="tab-2">
    <h2>{{ product.metafields.custom.tab_title_1 }}</h2>
    {{ product.metafields.custom.tab_content_1 }}    
  </div>
  <div class="tab__content" aria-labelledby="tab-3" role="tabpanel" id="tab-3">
    <h2>{{ product.metafields.custom.tab_title_2 }}</h2>
    {{ product.metafields.custom.tab_content_2 }}
  </div>
  
</div>
{% endif %}
<style>

.tabs {
  --dg-tabs-titles-color: #333333;
  --dg-tabs-titles-background-color: #F0F0F0;
  --dg-tabs-title-active-background-color: #FFFFFF;
  --dg-tabs-border-color: #DDDDDD;
  --dg-tabs-content-background-color: #FFFFFF;
  --dg-tabs-border-radius: 4px;

  max-width:800px;
}

.tabs .tabs__menu {
  list-style:none;
  padding:0;
  margin:0;
}

.tabs__menu > li {
  background:var(--dg-tabs-titles-background-color);
  border-top:1px solid var(--dg-tabs-border-color); 
  border-left:1px solid var(--dg-tabs-border-color);  
  list-style:none;  
  border-radius:var(--dg-tabs-border-radius) var(--dg-tabs-border-radius) 0 0;
}
  
.tabs__menu > li:last-child {
  border-right:1px solid var(--dg-tabs-border-color); 
}

.tabs__menu > .is-active, .tabs__menu > .is-active:last-child {
  background:var(--dg-tabs-title-active-background-color);
  margin-bottom: -1px;
}    

.tabs__menu button {
  font-size:1.6rem;
  line-height:1;
  display:inline-flex;
  padding:1.2rem 1.6rem;
  color:var(--dg-tabs-titles-color);
  text-decoration:none;
  text-align:left;
  width:100%;
  height: 100%;
  border: none;
  background: none;
  cursor:pointer;
}

.tab__content {  
  padding:0 1.6rem;  
  border:1px solid var(--dg-tabs-border-color); 
  background:var(--dg-tabs-content-background-color);
}

@media screen and (max-width:749px) {
  .tabs__menu, .tabs__menu button {
   display:block; 
  }
  .tabs__menu > li, .tabs__menu > li.is-active {
    border-right:1px solid var(--dg-tabs-border-color);
    margin-bottom:0;
    border-radius:0;
  }
}
@media screen and (min-width:750px) {
  .tabs .tabs__menu {
    display:flex;     
  }
}
</style>

<script defer>

if ((typeof window.DG) == 'undefined') { window.DG = {} }

(DG.productTabs = () => {
  
  const tab = document.querySelector('.tabs');  
  if(!tab) return;

  const links = document.querySelectorAll('.tabs__menu li');
  const contents = document.querySelectorAll('.tab__content');  
 
  toggle = (targetId) => {       
    contents.forEach(elem=>{
      elem.style.display = elem.id === targetId ? 'block' : 'none';    
      document.querySelector(`[data-target="${elem.id}"]`).classList[elem.id === targetId ? 'add' : 'remove']('is-active');
    })
  }  
  
  links.forEach((link) => {   
    link.addEventListener('click', () => {
      toggle(link.dataset.target);
    });    
    if(link.className.includes('is-active')){
      toggle(link.dataset.target);
    }
  });
})();

</script>

Ancien code pour les vieux thèmes (obsolète)

<style>#my-tab h2 { margin-top:0; } #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>

Vous voila avec un joli système d’onglet sans avoir eu besoin d’installer une application !

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

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

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 127 commentaires

  1. galerien

    15 Nov 2017 Répondre

    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

      16 Nov 2017 Répondre

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

        16 Nov 2017 Répondre

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

      1 Déc 2017 Répondre

      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

        5 Déc 2017 Répondre

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

        23 Mai 2023 Répondre

        Merci pour ton astuce. J’ai essayé comme tu dis d’intégrer le code directement dans chaque fiches produits, et cela marche très bien ! En revanche au niveau du SEO est ce que c’est bien ou pas ?

        1. Dgeo Dev

          1 Juin 2023 Répondre

          Super et bravo, pour le seo c’est moyen si les contenu reste tjs le même 🙂

  2. Maël

    19 Nov 2017 Répondre

    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

    22 Nov 2017 Répondre

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

      22 Nov 2017 Répondre

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

        22 Nov 2017 Répondre

        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

          22 Nov 2017 Répondre

          Oui la hauteur minimale

          1. Rémi

            22 Nov 2017

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

          2. Rémi

            22 Nov 2017

            Comme tu as mis sur ton exemple en gros

          3. dgeo22

            22 Nov 2017

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

    1 Déc 2017 Répondre

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

    12 Déc 2017 Répondre

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

  6. yves

    13 Déc 2017 Répondre

    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

      17 Déc 2017 Répondre

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

    10 Jan 2018 Répondre

    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

      14 Jan 2018 Répondre

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

    21 Jan 2018 Répondre

    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

      25 Jan 2018 Répondre

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

    24 Jan 2018 Répondre

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

      25 Jan 2018 Répondre

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

    31 Jan 2018 Répondre

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

      1 Fév 2018 Répondre

      Salut, dans les

      style=’padding:15px 25px !important;’

  11. Mat

    1 Fév 2018 Répondre

    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

      8 Fév 2018 Répondre

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

    19 Fév 2018 Répondre

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

  13. Ruben Pareja

    17 Mar 2018 Répondre

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

      17 Mar 2018 Répondre

      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. Ruben Pareja

        18 Mar 2018 Répondre

        Ah mince :'(

  14. Bruno

    31 Mar 2018 Répondre

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

      31 Mar 2018 Répondre

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

  15. agostino

    6 Avr 2018 Répondre

    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

      6 Avr 2018 Répondre

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

    17 Avr 2018 Répondre

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

      18 Avr 2018 Répondre

      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

        19 Avr 2018 Répondre

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

          21 Avr 2018 Répondre

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

    19 Avr 2018 Répondre

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

      21 Avr 2018 Répondre

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

  18. daphnée vallet

    30 Mai 2018 Répondre

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

      31 Mai 2018 Répondre

      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. Blerdon Débieux

    3 Juin 2018 Répondre

    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. Anthony Maisonhaute

    16 Sep 2018 Répondre

    Bonjour,

    Comment insérer des images dans les ongles svp ?

    Merci de votre aide et @bientôt

    1. Dgeo Dev

      18 Sep 2018 Répondre

      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. theo carlotti

    11 Oct 2018 Répondre

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

      18 Oct 2018 Répondre

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

    17 Oct 2018 Répondre

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

      18 Oct 2018 Répondre

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

  23. Perruchot Florian

    29 Nov 2018 Répondre

    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. Perruchot Florian

    4 Déc 2018 Répondre

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

      7 Déc 2018 Répondre

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

    22 Déc 2018 Répondre

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

      31 Déc 2018 Répondre

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

        30 Jan 2019 Répondre

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

        1. Dgeo Dev

          31 Jan 2019 Répondre

          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. William Orna

    22 Déc 2018 Répondre

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

      31 Déc 2018 Répondre

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

  27. ANAIS ALAPHILIPPE

    9 Fév 2019 Répondre

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

      20 Fév 2019 Répondre

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

  28. Matthieu

    26 Fév 2019 Répondre

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

      6 Mar 2019 Répondre

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

  29. Brunob

    20 Avr 2019 Répondre

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

    1. Dgeo Dev

      22 Avr 2019 Répondre

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

  30. lobato

    24 Mai 2019 Répondre

    Bonjour, merci pour ces tutos 🙂
    Je voudrais ajouter en plus un onglet  » guide des tailles » pour les collections textile de ma boutique , comment faire pour que cette onglet n’apparais pas sur les autres collections ? merci beaucoup ! 😉

  31. nico

    3 Juil 2019 Répondre

    salut dgeo , peux tu m’éxpliquer comment agrandir la largueur, ma description n’est pas du tout homogène dans le sous ou j’ai des retours à la ligne sans le vouloir

    1. Dgeo Dev

      5 Juil 2019 Répondre

      Hello, je ne peux pas trop savoir sans voir de visu le soucis 🙂 au besoin MP

  32. nico

    3 Juil 2019 Répondre

    les retours à la ligne se font sur format téléphone pas sur un pc

  33. Jérémy

    15 Juil 2019 Répondre

    Bonjour, c’est très bien mais sur mobile j’ai la partie « description » qui déborde sur le côté droit et donc masque une partie du texte. Aurais-tu un moyen de remédier à cela ? Est ce qu’il y a un moyen de modifier la largeur uniquement sur mobile ? Merci d’avance !

    1. Dgeo Dev

      20 Juil 2019 Répondre

      Hello, logiquement le thème doit gérer cela si il est bien fait 🙂 au besoin MP le lien du site pour un hack perso.

  34. Mohamed Boussetta

    21 Juil 2019 Répondre

    Bonjour, trés bonne explication Merci beaucoup.
    Seulement aprés l’avoir colle j’ai deux description de produit malgré que j’ai supprimé la description, et si possible je voudrais savoir comment mêttre la barre de choix à côté des images

    1. Dgeo Dev

      22 Juil 2019 Répondre

      Hello, hum y a forcément un doublon quelque part. Fait un ctrl + F pour rechercher description et supprime le doublon. Ps: fait une sauvegarde avant 😉

  35. Ju

    31 Juil 2019 Répondre

    Salut Dgeo,

    Comment centrer la totalité du système d’onglet sur la page produit? Moi sur le thème supply il est à droite et j’aimerai le mettre au centre de la page.
    Merci d’avance pour ta réponse,
    Santé.

    1. Dgeo Dev

      4 Août 2019 Répondre

      Hello 🙂 Centrer la zone ou les textes ?

      1. Ju

        5 Août 2019 Répondre

        Salut Dgeo,

        Centrer la zone.

        Merci pour ta réponse.
        Santé.

        1. Dgeo Dev

          7 Août 2019 Répondre

          Bonjour, il faut englober le tout d’une balise

          1. Ju

            9 Août 2019

            J’ai déjà essayé ça ne fonctionne pas, j’utilise le thème supply et je ne sais pas si c’est possible sans grosse modification dans le code car à gauche de la page on a les photos de l’article et à droite tout les boutons « quantité, panier ect… » et la description, donc deux colonnes une gauche et une droite.

            Tant pis, ça restera comme ça.
            Encore merci pour ta réponse et bonne continuation.

  36. Nono

    30 Sep 2019 Répondre

    Bonjour dans un des onglet peut on insérer les avis client ??

    1. Dgeo Dev

      2 Oct 2019 Répondre

      Bonjour, oui c’est possible c’est d’ailleurs inclu dans speedfly

  37. Andriano

    2 Oct 2019 Répondre

    J’ai réussi à le rendre non générique merci à toi.

  38. Lesgos

    12 Nov 2019 Répondre

    Bonjour, j’ai mis le code en suivant les étapes, ca s’affiche bien mais j’aimerai juste avoir la partie description et pas l’onglet faq ni livraison, j’ai essayer de supprimer le tab 2 et 3 mais ça dérègle tout, vous avez une solution? Ou pouvez-vous m’envoyez le code avec juste l’onglet description? Merci

    1. Dgeo Dev

      12 Nov 2019 Répondre

      Hello, si vous supprimez les onglets et n’en gardez qu’un, aucun intérêt de faire ce tuto en fait 🙂 autant garder que le modèle standard.

      1. Lesgos

        12 Nov 2019 Répondre

        Non en fait je voudrais juste l’onglet description car cela rend beaucoup mieux que la description standard sur la droite, c’est possible de l’avoir un en seul onglet? Merci 🙂

        1. Dgeo Dev

          12 Nov 2019 Répondre

          Ok je vois, il faut donc supprimer les 2 dernières balises li et les 2 dernières div tab-2 et 3 🙂

  39. Jérémy

    17 Mar 2020 Répondre

    Bonjour, sur fashionopolism cela a pour effet d’empêcher l’affichage des images du produit sur mobile uniquement. Pouvez vous m’aider ?

    1. Dgeo Dev

      19 Mar 2020 Répondre

      Bonjour, je ne connais pas ce thème navré, il est peut être non compatible avec ce type de code 🙁

  40. Aurore

    24 Mar 2020 Répondre

    Bonjour Dgeo Dev,

    Merci beaucoup pour ce super tuto !
    Chez moi ça a très bien fonctionné pendant 1 mois, jusqu’à hier, lorsque j’ai voulu modifier du contenu.
    Depuis mes onglets ne fonctionnent plus.
    J’ai pu revenir à une version antérieur avant modif en pensant que j’avais endommagé les codes, mais mon problème persiste et je m’arrache les cheveux …
    Aurais-tu une idée pour mon problème?

    En te remerciant,

    1. Dgeo Dev

      25 Mar 2020 Répondre

      Hello, surement une balise défectueuse dans le contenu. Il faudrait me linker le lien pour voir ça 🙂

  41. Florent

    27 Mar 2020 Répondre

    Salut Mister et merci pour tout ce que tu apportes !
    Est il possible de mettre une couleur à l »intérieur de ces cadres créés ?

    1. Dgeo Dev

      27 Mar 2020 Répondre

      Hello 🙂 alors c’est un peu compliqué à expliquer me MP sinon 😉

  42. Aurore

    29 Mar 2020 Répondre

    Merci pour ta réponse Dgeo Dev.

    Mon problème venait d’un hyperlien, dans mon descriptif produit, qui renvoyait à ma page de tableau de tailles.
    Cet hyperlien marchait parfaitement, mais bloquait le système d’onglets … ( mystère ).
    En le supprimant tout refonctionne, mais cela complique l’accès à l’information rapide pour mes clients.
    Car que j’ai plusieurs tableaux des tailles en fonction de mes produits, donc je ne peux pas mettre tous mes tableaux en onglets.
    L’idéal dans mon cas serait de pouvoir créer un code intelligent qui appelle un tableau des tailles en onglet en fonction d’un élément dans le nom de mon produit. Mais je n’en suis pas capable. 🙂

    1. Dgeo Dev

      29 Mar 2020 Répondre

      Hello, étrange y a pourtant pas de raison technique de conflits sur ces éléments… Ton idée est une bonne approche de développeur mais effectivement cela demande un dev spécifique 🙂

  43. Guillaume

    4 Avr 2020 Répondre

    Bonjour, je n’arrive pas avec le billionaire thème

    1. Dgeo Dev

      4 Avr 2020 Répondre

      Hello, désolé je ne connais pas ce thème, il me sera donc difficile de vous aider 🙂

  44. Jérémy

    29 Avr 2020 Répondre

    Bonjour, j’ai traduit ma boutique en plusieurs langues et les app de traductions ne détectent pas le tableau. Apparemment parce qu’il ne s’agit que d’un bout de code unique. Est-il possible d’insérer du code afin que cela s’affiche en fonction de la langue ? Même s’il faut que je réécrive moi même pour toutes les langues. Ou alors est-il possible d’insérer du code dans les fichiers « locales » ? Merci beaucoup !

    1. Dgeo Dev

      29 Avr 2020 Répondre

      Bonjour, effectivement ce n’est pas prévu pour faire du multi langues. La solution des fichiers dans Locales reste vraiment la meilleure solution en effet ! bravo 🙂

      1. Jérémy

        29 Avr 2020 Répondre

        Merci de votre réponse ! Ce n’est vraiment pas possible même en mettant une condition dans le code ? Pour les fichiers locales, j’ai essayé mais je n’ai pas réussi… Avez vous des conseils ? En ajoutant juste les textes et traductions du tableau dans ces fichiers (en respectant la mise en forme) cela ne fonctionne pas…

  45. Yassine

    29 Avr 2020 Répondre

    Bonjour Dgeo, merci pour le tuto très intéressant 😉 Cependant j’ai le thème Loft sur mon site e commerce et ca ne fonctionne pas. Pouvez vous m’éclairer svp ? merci

    1. Dgeo Dev

      29 Avr 2020 Répondre

      Bonjour, navré je ne connais pas du tout ce thème mais je suppose que la structure doit rester la même. Il faut juste trouver le bon endroit pour l’affichage.

  46. Abel

    12 Mai 2020 Répondre

    Salut ! J’utilise le thème Brooklyn … En suivant ta méthodologie, j’ai bien mon système d’onglets qui s’affiche MAIS cela s’affiche uniquement sur partie droite de l’écran … ça ne s’étend pas sur tout l’écran (de gauche à droite) … ce qui pose problème 🙂

    Pourrais-tu m’indiquer la marche à suivre s’il te plaît pour y remédier ?

    Merci encore et bonne journée à toi !

    1. Dgeo Dev

      13 Mai 2020 Répondre

      Hello, il faut essayer de mettre le code plus bas afin de sortir de la colonne 😉

  47. JOJO

    27 Mai 2020 Répondre

    Bonjour, j’ai un petit soucis. J’aimerais que ma fiche description et utilisation se mettent uniquement sur certains produits et non tous.

    Cordialement

    1. Dgeo Dev

      27 Mai 2020 Répondre

      Hello, désolé c’est impossible sauf sur Speedfly 😉

  48. laeti

    23 Juil 2020 Répondre

    Hello et merci de vos articles, c’est très bien expliqué pour moi qui ne connait rien a tout ca 🙂 J’ai donc réussi à intégrer mes onglets mais à l’intérieur de l’un d’entre eux je souhaiterais intégrer une image, pourriez vous m’aider? Merci beaucoup

    1. Dgeo Dev

      23 Juil 2020 Répondre

      Hello et merci pour le commentaire 🙂 il suffit de mettre une image sur shopify et de l’appeler en code : vous pouvez suivre ce tuto qui explique comment intégrer une image sur shopify

  49. jennifer

    20 Nov 2020 Répondre

    Bonjour, merci pour tous vos tutos! Ma question se porte plus sur le seo… pour les 2 onglets modifiables (qui contiennent chacun les mêmes textes) cela aura un impacte négatif sur mon seo, puisqu’ils apparaitront sur toutes les fiches produits ? merci

    1. Dgeo Dev

      20 Nov 2020 Répondre

      Hello, tant que le contenu n’est pas trop long donc moins de 30% de la page ca n’a pas trop d’incidence. Au dela il vaut mieux éviter même si le duplicate interne est moins grave que l’externe 🙂 le mieux serait de mettre des informations différentes sur chaque fiche produit mais la seul Speedfly peut le faire ou alors une application 😉

  50. Iyakan

    27 Nov 2020 Répondre

    Bonjour, merci pour tes tutos !
    je souhaite retirer la partie  »Questions » dans les onglets mais quand je retire ça me décale tou.
    Comment faire ?

    1. Dgeo Dev

      27 Nov 2020 Répondre

      Il faut retirer la balise li mais aussi la div correspondante

  51. olivier

    27 Mar 2021 Répondre

    Bonjour,

    Mes fiches produits incluent des bullets points et en integrant votre code, ce points ne se retrouvent pas sur mon site web
    Pourriezw-vous m’indiquer quel partie du code dois-je changer?

    Merci
    Olivier

  52. Olivier

    28 Mar 2021 Répondre

    Bonjour,
    Dans ma description, j’ai des bullet points qui n’apparaissent plus une fois le code intégré.
    Pourriez-vous m’aider?
    Merci

    1. Dgeo Dev

      28 Mar 2021 Répondre

      Hello, lien du site en mp svp 🙂

  53. Antoniazzi

    3 Avr 2021 Répondre

    Salut beaucoup pour t’es tuto il sont super , tu pourrais me dire pourquoi je trouve rien dans product-template-liquid ?
    J’ai changé de thème , je suis passée sur un thème payant mais je n’arrive plus car il y a rien dans product-template-liquid .
    Pourtant il y a 2 semaine j’avais très bien réusis avec mon thème gratuit .

    Si tu peux me répondre pour me conseille d’allez voir sur un autre liquid ou une autre forme de F.A.Q sur une page de produits ,je dit pas non ahaha .

    Merci pour t’es services !

    1. Dgeo Dev

      3 Avr 2021 Répondre

      Hello, cela dépend des thèmes… Certaines dispatchent les composants dans le dossier Snippets. Il faut donc regarder sur il n’y à pas dans ce dossier un fichier avec le nom description dedans ou product-content etc… Bref au fouiller et mettre des totos un peu partout dans chaque fichier pour se repérer 😀

  54. Marjorie

    16 Sep 2021 Répondre

    Bonjour,

    Merci pour ce tuto, les onglets sont très jolis et rendent bien sur le site;
    Par contre, j’ai un petit soucis, lorsque je veux mettre une image dans l’onglet 1 elle se lit dans l’onglet 2 (c’est a dire que l’image est trop grande pour l’onglet donc elle depasse) mais je ne peux pas la réduire, est ce qu’il y aurait un code pour on va dire « completement fermer l’onglet 1 » ?

    merci d’avance !!

    1. Dgeo Dev

      17 Sep 2021 Répondre

      Hello, j’ai du mal à tout comprendre mais il faut essayer que l’image s’adapte au son conteneur donc mettre sur la balise img un style= »max-width:100%; »

  55. Y

    19 Nov 2021 Répondre

    Bonjour, merci pour vos tutos.
    Savez comment placer une partie de la description à droite du produit et l’autre en bas du produit svp?

    1. Dgeo Dev

      20 Nov 2021 Répondre

      Bonjour, étant donné que shopify ne propose qu’un editeur de texte pour ses fiches produits on ne peut pas sauf sur un thème comme speedflly ou je propose un système allternatif.

  56. Magali

    1 Mar 2023 Répondre

    Bonsoir Dgeo dev, merci beaucoup pour ce tuto. Surtout pour la 2ème partie concernant les descriptions personnalisées pour chaque produit. Cependant, malgré mes nombreuses tentatives, j’ai toujours le même problème : mes textes pour les 2 autres onglets ne fonctionnent pas.
    J’ai beau refaire le tuto dans son ensemble, rien n’y fait ! je n’arrive pas à insérer le texte que je souhaite ?
    Saurais-tu ce que peut clocher ? je travaille à partir du thème DAWN. Merci pour ton aide

    1. Magali

      1 Mar 2023 Répondre

      au final, j’ai un onglet sur 2 qui fonctionnent

  57. Stéphanie

    12 Avr 2023 Répondre

    Salut salut! J’ai suivi toute la procédure à la lettre pour les onglets personnalisés. Les onglets ne s’affichent pas sur ma fiche produit. Est-ce que ça peut être mon thème qui ne le prend pas? J’ai Debut.
    Sinon, je peux t’envoyer mon code pour révision?

    1. Dgeo Dev

      16 Avr 2023 Répondre

      Hello, c’est étrange en effet ? quel thème ? sinon on peut s’en occuper au besoin me contacter ici : speed-ecom.eu/support

Laisser un commentaire

Fermer le menu
×
×

Panier