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)

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

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.

« Comment créer un bandeau clignotant informatif pour la livraison gratuite sur shopify ?

Comment mettre une vidéo sur sa fiche produit hébergée sur shopify ? »

Cet article a 129 commentaires

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 🙂
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 🙂
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 😉
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
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? 🙂
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
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
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
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 🙂
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;’
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
Marion
19 Fév 2018 Répondre

Super tuto marche nickel pour le thème « Debut » de shopify ! Super!Merci
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 :'(
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 😉
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
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
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; »
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
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 🙂
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
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
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 🙂
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?
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
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.
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
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.
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
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 😉
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 ! 😉
1. Dgeo Dev
  25 Mai 2019 Répondre
  
  Hello, merci pour le message 😉
  La c’est plus délicat car ca demande des connaissances techniques. Si tu as le courage il faut essayer d’afficher cette zone seulement sur certains produit en suivant plus ou moins ce tuto: https://dgeodev.com/comment-personnaliser-fiche-produit-shopify/
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
nico
3 Juil 2019 Répondre

les retours à la ligne se font sur format téléphone pas sur un pc
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.
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 😉
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.
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
Andriano
2 Oct 2019 Répondre

J’ai réussi à le rendre non générique merci à toi.
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 🙂
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 🙁
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 🙂
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 😉
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 🙂
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 🙂
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…
    1. Dgeo Dev
      30 Avr 2020 Répondre
      
      Hello, c’est un peu complexe à faire au niveau des locales. Au besoin nous pouvons faire ce type de prestation. Prendre contacte ici: https://speedecom.freshdesk.com/
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.
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 😉
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 😉
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
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 😉
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
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
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 🙂
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 😀
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%; »
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.
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
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
Michael
14 Août 2024 Répondre

Bonjour et merci pour tout ce travail qui fonctionne à merveille. J’ai juste une question, j’ai rajouté un 4eme onglet pour l’ensemble de mes produits et cela fonctionne titre et contenu. Si sur certains de ces produits, je ne veux mettre que 2 ou 3 onglets au lieu des 4 initiaux, la procédure fonctionne et sur la page et ne reste visible que les onglets choisis et leur titre. Par contre sur les onglets visibles il n’y a que le contenu du 1er qui est accessible, on n’a plus accès à son contenu des autres, pour avoir à nouveau accès je dois absolument donner un titre à tous les onglets même si son contenu est vide. Auriez- vous une solution ?
1. Dgeo Dev
  20 Août 2024 Répondre
  
  Bonjour et merci pour le commentaire ! en effet le même nombre d’éléments doit être présent pour que le tout fonctionne. L’idéal serait de mettre des conditions d’affichage mais dans ce cas il ne faudra plus passer par l’écriture des onglets dans les fichiers mais rendre cela administrable dans le thème. Si besoin je peux développer cette fonctionnalité sur votre thème ou alors vous pouvez prendre speedfly qui possède cela nativement 😉 https://speed-ecom.eu/theme-speedfly/ ou me contact ici https://speed-ecom.eu/contact Passez une bonne journée

Explication du système d’onglets

Comment installer le code

Vous souhaitez des onglets différents par produit ?

Codes des champ méta de la vidéo

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

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

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment faire un Carrousel d’Extra infos sur Shopify

Comment Créer un Effet de Survol d’un Menu sur Shopify

Comment Faire Défiler des Chiffres au Scroll sur Shopify

Cet article a 129 commentaires

galerien

dgeo22

dgeo22

Maximilien

dgeo22

Matthieu

Dgeo Dev

Maël

Rémi

dgeo22

Rémi

dgeo22

Rémi

Rémi

dgeo22

Erwan

Sysy

yves

dgeo22

Vince

dgeo22

Max

dgeo22

Arthur

dgeo22

Mariam

dgeo22

Mat

dgeo22

Marion

Ruben Pareja

Dgeo GD

Ruben Pareja

Bruno

Dgeo GD

agostino

Dgeo GD

Sandra

Dgeo GD

Sandra

Dgeo GD

EviiiL

Dgeo GD

daphnée vallet

Dgeo Dev

Blerdon Débieux

Anthony Maisonhaute

Dgeo Dev

theo carlotti

Dgeo Dev

Jean

Dgeo Dev

Perruchot Florian

Perruchot Florian

Dgeo Dev

Fanny

Dgeo Dev

Fanny

Dgeo Dev

William Orna

Dgeo Dev

ANAIS ALAPHILIPPE

Dgeo Dev

Matthieu

Dgeo Dev