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

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouvez le dossier 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 Assets et  trouvez le fichier theme.js.liquid ou style.js.liquid ou timber.js.liquid Bref un fichier xxx.js.liquid –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 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:block;width:100%;overflow:hidden;margin:10px 0; color:#222; }
.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 1 votes]

Cet article a 33 commentaires

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

    1. Hello, cool 😉

  2. 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. 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. Hello, ok super bravo ! 🙂

  3. 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. 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. Oui suite à certaines incompatibilités l’article a été mis à jour mais pas la vidéo 🙂 il faut donc suivre l’article 😉

    2. 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. Hello, un simple xxx.js alors pas besoin du liquid parfois 🙂

  5. 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. 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. Hello, c’est à ma connaissance uniquement possible sur Speedfly grâce sa personnalisation avancée 😉

  7. 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. Hello, non peut être que le script jquery est manquant.

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

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

  9. 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. 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. 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. 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. 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. 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. 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. Hello, un problème javascript 🙂 il doit manquer la partie js

  13. 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. 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. Hello, tu peux reprendre la page CSS qui est logiquement corrigé

  14. 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. 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. 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. Hello, c’est assez étrange… me MP le lien de la page au besoin et je regarderai

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine