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; 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 2 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 😉

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & 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