Comment créer un Guide des Tailles sur Shopify

Nous allons voir dans ce tutoriel comment ajouter un Guide des tailles sur Shopify au niveau de la fiche produit. En effet le fait de proposer un Guide de tailles permet au client de savoir en un clic la bonne taille à choisir. Par ailleurs cela va grandement diminuer votre SAV car vos clients feront moins d’erreurs 😉

Le fonctionnement du système

Un lien sera présent au dessus des variantes avec une petite règle de mesure et un texte « Guide des tailles ». Au clic sur celui ci une pop-up va s’ouvrir et proposer un tableau de tailles pouvant être modifiable selon vos besoins.

Vous pouvez voir le résultat ici: Voir la démo

Comment installer ce système ?

Partie HTML – Placement  du lien

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouvez le dossier Sections et essayez de trouver le fichier product-template.liquid – faites un crtl + F ou cmd + F afin de rechercher l’occurrence suivante {% form  ….

Si vous ne trouvez pas le formulaire essayez de trouver un code commençant par : {% include 'product-form … Il faudra donc trouver ce fichier dans le dossier Snippets…

A ce stade il ne vous reste plus qu’à copier/coller le code ci-dessous:

<div class="dg-sc-btn">
 <span id="scBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-inject-url="https://cdn.kiwisizing.com/icons/ruler4.min.svg?v=5-inject2" class="kiwi-svg kiwi-injectable" crossorigin="Anonymous"><path d="M0 136v240h512V136H0zm472 200H40V176h38v48h40v-48h40v88h40v-88h38v48h40v-48h38v88h40v-88h40v48h40v-48h38v160z"></path></svg>
Guide des tailles
</span>
</div>

Partie HTML – Placement de la Pop-up

1ère possibilité – Bloc du thème

Restez sur le même bloc liquid personnalisé et copiez le code juste en dessous du premier

2ème possibilité – dans les fichiers

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouvez le dossier Mise en page (Layout) et ouvrez le fichier theme.liquid – rendez-vous tout en bas et copiez/collez le code ci-dessous juste avant la balise : </body>

<div class="dg-size-chart">
  <div id="scModal" class="sc-modal">    
    <div class="modal-content">
      <div class="modal-header">
        <span class="sc-close">×</span>
        <span>Guide des tailles</span>
      </div>
      <div class="modal-body">
        <div style="width:100%; margin:15px 5px !important;">
          <table class="size-chart-table" width="100%" style="margin-top:0 !important;margin-bottom:10px !important;">
            <tbody>
              <tr>
                <th><p><strong>Taille</strong></p></th>
                <th><p><strong>Tour de poitrine</strong></p></th>
                <th><p><strong>Tour de taille</strong></p></th>
              </tr>
              <tr>
                <td><p>1m60</p></td>
                <td><p>85</p></td>
                <td><p>60</p></td>
              </tr>
              <tr bgcolor="#f5f5f5">
                <td><p>1m70</p></td>
                <td><p>95</p></td>
                <td><p>70</p></td>
              </tr>
              <tr>
                <td><p>1m80</p></td>
                <td><p>105</p></td>
                <td><p>80</p></td>
              </tr>
              <tr bgcolor="#f5f5f5">
                <td><p>1m90</p></td>
                <td><p>115</p></td>
                <td><p>90</p></td>
              </tr>
            </tbody>
          </table> 
        </div>
      </div>
    </div>
  </div>
</div>

N’oubliez pas d’adapter le tableau et les textes selon vos propres besoins !

Partie JS – Fonctionnement

Ensuite allez  dans le dossier Ressources (Assets) et  trouvez le fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise –Mettez vous tout en bas du fichier et copiez/collez le code suivant:

function dgSizeChart() {
    const scModal = document.getElementById("scModal");     
    const scBtn = document.getElementById("scBtn");     
    const scBtnClose = document.getElementsByClassName("sc-close")[0]; 

    if(document.getElementById("scBtn")) {   

      scBtn.onclick = function() {
        scModal.style.display = "block";
      }    
      scBtnClose.onclick = function() {
        scModal.style.display = "none";
      }     
      window.onclick = function(event) {
        if (event.target == scModal) {
          scModal.style.display = "none";
        }
      }
    }
  }
  
  dgSizeChart();

Partie CSS – Mise en forme

Maintenant vous allez  ouvrir le dossier Ressources (Assets) et  trouver le fichier theme.css.liquid ou style.scss.liquid ou timber.scss.liquid Bref un fichier xxx.scss.liquid –Mettez vous tout en bas du fichier et copiez/collez le code suivant:

// dg - guide des tailles
.dg-size-chart .sc-modal {
  display: none; 
  position: fixed; 
  z-index: 99999; 
  padding-top: 5%;   
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  opacity:1;
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
.dg-size-chart .modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #333;
  max-width: 700px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: dgscanimatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: dgscanimatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes dgscanimatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes dgscanimatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

.dg-sc-btn { clear:both;display:flex;width:100%;overflow:hidden;margin:10px 0; color:#222; align-items:center; }
.dg-sc-btn svg { width: 23px; height:23px;  float: left; margin-right: 7px; }
#scBtn, #scBtn:hover, #scBtn:focus { cursor: pointer; background:none; box-shadow:none; border:none; padding:0; margin:0; line-height:21px; outline-style: none; text-decoration:underline;} 

/* The Close Button */
.dg-size-chart .sc-close, .dg-size-chart .sc-close:hover {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.dg-size-chart .modal-header {
  padding: 2px 16px;
  line-height:45px;
  text-align:center;
  font-size:21px;
  text-transform:uppercase;
  background-color: #333;
  color: white;
}

.dg-size-chart .modal-body {padding: 2px 16px;}
.dg-size-chart .modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

Si vous souhaitez plus de détails je vous invite à visionner la version vidéo.

Ce tutoriel existe aussi en vidéo

Bon tuto à tous !

 

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 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 46 commentaires

  1. Max Harder'Z

    13 Juin 2020 Répondre

    Voilà fait et installé 😀 Je me doutais qu’il aurait été disponible avant lundi ^^ Merci encore pour tout le taf que tu fais 🙂

    1. Dgeo Dev

      15 Juin 2020 Répondre

      Hello, cool 😉

  2. AN

    13 Juil 2020 Répondre

    Le javascript ne fonctionne pas pour moi malheureusement, rien ne se passe quand je clique sur le text. Lorsque je modifie moi-même le display j’ai bien le guide des tailles qui s’affiche donc je vois que le js comme problème… comme s’il n’était pas pris en compte ou chargé

    1. AN

      13 Juil 2020 Répondre

      EDIT: j’ai réussi en faisant comme dans la video, mettre entre les balises et dans le theme.liquid au lieu de mettre dans un .js.liquid qui visiblement ne lançait pas le script 🙂

      Un grand merci pour tout ton travail

      1. Dgeo Dev

        13 Juil 2020 Répondre

        Hello, ok super bravo ! 🙂

      2. Thieuma

        2 Sep 2021 Répondre

        Plus de précisons ? Tu me sauverais la vie aha

  3. Venom

    26 Juil 2020 Répondre

    Super tuto shopify en français, merci.

    La pop-up n’apparait pas au clic sur le lien sur mon thème Venture, tu peux m’aider ?

  4. Venom

    26 Juil 2020 Répondre

    Il y a 4 étape dans l’article mais seulement 3 dans la vidéo, la partie JS- Fonctionnement a sauté. C’est volontaire ou il faut bien placer le code dans xxx.js.liquid ? Si oui, je n’ai pas de xxx.js.liquid, où alors coller ce morceau de code ?

    Merci.

    1. Dgeo Dev

      29 Juil 2020 Répondre

      Oui suite à certaines incompatibilités l’article a été mis à jour mais pas la vidéo 🙂 il faut donc suivre l’article 😉

    2. Baptiste

      11 Août 2020 Répondre

      Bonjour Venom, Dgeo Dev,

      En effet j’ai exactement le même problème que toi, je n’ai pas de xxx.js.liquid dans mes Assets.
      Est ce que tu as trouvé une solution qui t’allais ? Je cherche tjr.

      Merci,

      1. Dgeo Dev

        11 Août 2020 Répondre

        Hello, un simple xxx.js alors pas besoin du liquid parfois 🙂

  5. Charlotte

    18 Août 2020 Répondre

    Bonjour,
    Super Tuto ! Merci
    Est ce qu’il possible de faire pareil mais au lieu que ça soit une pop up qui s’ouvre avec le guide des tailles, c’est un lien qui redirige vers la page guide des tailles ?
    Merci

  6. Le Marginal Magnifique

    21 Août 2020 Répondre

    Bonjour. Est-ce que c’est possible de choisir les articles de la boutique où mettre le guide des tailles et le personnaliser pour chacun de ces articles ? Merci.

    1. Dgeo Dev

      21 Août 2020 Répondre

      Hello, c’est à ma connaissance uniquement possible sur Speedfly grâce sa personnalisation avancée 😉

  7. Mathieu

    24 Août 2020 Répondre

    Bonjour,
    Super Tuto !

    La pop-up ne s’ouvre pas sur mon thème (Empire)…
    Une idée de où peut venir le problème ?

    Merci ! 🙂

    1. Dgeo Dev

      26 Août 2020 Répondre

      Hello, non peut être que le script jquery est manquant.

  8. Paul

    5 Sep 2020 Répondre

    Bonjour,
    Super tuto, merci beaucoup.
    Comment m’y prendre pour centrer le texte dans le tableau ?
    Merci d’avance.

    1. Dgeo Dev

      6 Sep 2020 Répondre

      Hello et merci pour le com 🙂 il suffit d’englober le tout d’une balise <center>contenu...</center>

  9. Jérémy Garciane

    14 Sep 2020 Répondre

    Hello Dgeo,

    Merci beaucoup pour cette vidéo qui m’a permis de mettre le guide des tailles!

    Néanmoins à la place de mettre un tableau j’aurai aimé mettre une image car je vend des tableaux et l’objectif serai de voir quelle taille correspondrai à mes clients..

    Merci de ta réponde!

    1. Dgeo Dev

      15 Sep 2020 Répondre

      Hello 🙂 il suffit de supprimer le table et de mettre une balise image à la place 😉 rechercher sur mon site: badge de confiance pour voir comment mettre une image. bonne soirée.

  10. LeFlo

    18 Sep 2020 Répondre

    Salut Mister
    OMG c’est exactement le tuto qu’il me fallait !!
    J’ai déjà ma page Guide des Tailles, don « juste » besoin d’un « Guide des tailles » à côté des tailles proposées comme tu le fais, qui mènerait vers ma page… comment faire ?

    1. Dgeo Dev

      20 Sep 2020 Répondre

      Hello et merci pour le com 🙂 il suffit dans ce cas de mettre un lien à la place du bouton mais c’est assez complexe, au besoin tu peux t’en sortir en suivant cette vidéo: https://youtu.be/teOWaeg_hPE bon courage 🙂

  11. Stephane Potey

    19 Sep 2020 Répondre

    Hello Dgeo, est-il possible de faire un guide de taille différent pour chacune de ses collections ? Par pour chemise, chaussures. Si oui comment ? Merci.

    1. Dgeo Dev

      20 Sep 2020 Répondre

      Hello, oui c’est possible mais très compliqué à faire. il faut avoir des connaissances en codage 🙂 sinon bientôt disponible sur le thème Speedfly pour Novembre 😉

  12. Kim

    9 Nov 2020 Répondre

    Bonjour,
    Super tuto comme d’habitude 🙂
    J’ai un petit soucis, le tableau guide des tailles ne s’affiche pas en pop-up mais en bas de page après le hearder. Sauriez-vous d’où le soucis peut venir ?

    Merci beaucoup

    1. Dgeo Dev

      9 Nov 2020 Répondre

      Hello, un problème javascript 🙂 il doit manquer la partie js

  13. LAURENT

    17 Nov 2020 Répondre

    Bonjour Dgeo, merci pour ce super tuto ! ca marche a merveille mise part un énorme espace blanc entre l’icône de la règle et la mention ‘guides tailles’ j’aimerais que ca apparaisse collé comme sur ton site, mais comment faire ? Merci 😀

    1. LAURENT

      17 Nov 2020 Répondre

      autant pour moi, je viens de trouver la solution en rajoutant une ligne de code align left en HTML, le tout était centré comme la page produit ^^ merci 🙂

    2. Dgeo Dev

      19 Nov 2020 Répondre

      Hello, tu peux reprendre la page CSS qui est logiquement corrigé

  14. seb

    21 Nov 2020 Répondre

    Bonjour,

    Egalement pour moi, cela s’affiche tout en bas de page. J’ai réessayer plusieurs fois, même sur un thème début vierge alors que j’avais déjà installe ce même code il y a quelques semaines sur une autre boutique et tout fonctionnais très bien. Une mise à jour du thème début qui fait buger le code ?
    Merci pour votre retour.

    1. Dgeo Dev

      23 Nov 2020 Répondre

      Hello, hum je ne saurais le dire sans en savoir plus 🙁 au besoin demandez au support Shopify car ils proposent 60mn d’intervention gratuite sur leurs thèmes 😉

  15. Elie

    27 Nov 2020 Répondre

    Bonjour
    Je tenais a vous remercier pour tout vos tutos ! Concernant celui ci , le guide apparait directement ouvert ( avant d’avoir cliquer sur guide des tailles ) une petite manip pour arranger ça ? je n’y connais vraiment pas grand chose. Sinon tout fonctionne très bien !
    Encore Merci

    1. Dgeo Dev

      28 Nov 2020 Répondre

      Hello, c’est assez étrange… me MP le lien de la page au besoin et je regarderai

  16. Julien

    4 Jan 2021 Répondre

    Super tuto encore et toujours ! Merci 🙂

    J’ai un problème avec le guide des tailles, il est bien placé, à la bonne dimension, mais le pop up ne s’affiche pas.
    la fenêtre pop up ne fonctionne pas.

    Comment je peux faire pour corriger cela ? Que le pop up s’affiche correctement ?

    Merci Beaucoup pour votre aide 🙂

    1. Dgeo Dev

      5 Jan 2021 Répondre

      Hello, il doit y avoir un conflit avec votre thème ou une app. Faudrait demander au support du thème 🙂

  17. Vincent Autier

    1 Fév 2021 Répondre

    Bonjour Dgeo Dev pour ma part tout s’affiche bien sauf que le pop up apparaît par le bas et donc on ne le voit pas. Sais tu pourquoi ? Merci d’avance

    1. Dgeo Dev

      2 Fév 2021 Répondre

      Hello, un problème ou conflit javascript avec le thème. Essaie de voir avec leur support 🙂

  18. Bouchez

    15 Mar 2021 Répondre

    Bonjour, j’utilise le thème billionaire thème, et j’ai une question. Est-il possible de cacher le guide pour certains article. Si oui (meme avec du codage), pouvons nous nous contacter quelque part ? 🙂

  19. mimilem

    5 Août 2021 Répondre

    Bonjour,
    Merci beaucoup pour ce tuto. il fonctionne à merveille. Par contre pourriez vous m’indiquer comment mettre le guide que sur les produits d’une collection définie svp? En effet il apparait sur tous les produits et c’est gênant car certains produits n’ont pas besoin de guide.

    1. Dgeo Dev

      5 Août 2021 Répondre

      Merci pour le message 🙂 c’est un peu compliqué à expliquer le mieux serait de faire un mini dev sur mesure 🙂

  20. Louis

    23 Mai 2023 Répondre

    Super tuto très utile. Il fonctionne bien pour moi, seulement la popup est déjà ouverte quand on arrive sur la fiche produit. Comment faire pour que la popup soit fermée et s’ouvre seulement au clic ? https://loovoos.fr/products/jere

    1. Dgeo Dev

      6 Juin 2023 Répondre

      Hello et merci, étrange surement que le thème n’est pas compatible 🙁

  21. abd

    1 Oct 2023 Répondre

    Salut j’ai beau suivre le tuto mais je ne trouves pas la section {% form ou {% include comment je peux faire stp ?

    1. Dgeo Dev

      13 Oct 2023 Répondre

      Bonjour, avez-vous solutionné votre problème ? sinon vous pouvez me contacter ici pour qu’on puisse voir ce qu’on peut faire 😉 https://speed-ecom.eu/support

Laisser un commentaire

Fermer le menu
×
×

Panier