Comment insérer un guide de taille gratuitement sur Shopify ?

Salut ! Je suis Thomas Giraud. Je suis expert en développement web et Shopify. Aujourd’hui dans cet article nous allons voir comment insérer un guide de taille gratuitement sur Shopify.

N’hésites pas à aller voir mon article sur les astuces pour avoir de superbes fiches produits, cela vous aidera.

Intégration de Bootstrap

Commençons dès à présent en ajoutant un bouton qui va ouvrir une modale (un pop up), et dedans on va pouvoir mettre ce que l’on veut. Les étapes les plus dures pour faire ça, évidemment tu n’auras pas à le re créer toi même mais c’est bien de passer par ce process pour comprendre ce que l’on fait, comment on le fait, et pour que tu puisses l’utiliser de la meilleure des façons.

Pour le créer, on va avoir besoin d’une librairie. On va aller sur ” bootstrap modal ” et on va l’intégrer.

Il faut aller sur la page de code Convertify, dans ”theme.liquid” et chercher ”CSS”. Juste en dessous on va intégrer code (clique sur le lien et intègre le code).

Ensuite, on va prendre le code ”live demo” qui provient du site de bootstrap et on va le mettre dans le fichier ”featured product” et si tu veux le faire sur ta page produit il faut tu ailles sur le fichier ”product template”. Là on va le faire sur ”featured product” mais après on pourra le dupliquer sur ”product template” c’est exactement pareil.

Donc on va aller dans la section ”featured product” et taper ”policies”. On va retirer la partie ”taxes inclued” du code, et mettre celle de ”live demo” copier auparavant.

Résolution des problèmes

Donc là le thème est un petit peu changé et est moins bien. On va maintenant couper les 3 lignes de codes :

{{ ' //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' | stylsheet_tag }}
{{ ' //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js' |script_tag }}
{{ ' //netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js | script_tag }}

Puis, on va les coller juste au dessus de la balise <script>.

Normalement il y aura aussi un petit bug, sur 2 soulignements. Pour régler ce problème : va sur ton site et :

  • Clique droit
  • Inspecteur
  • Sélectionne ce qui correspond aux 2 soulignements
  • Clique sur ”: hov ” un peu plus bas sur la page
  • Coche la case ” hover ”
  • En dessous dans ” element.style ”, tape ” text-decoration:> none ”

Retourne sur la page de code. Va dans la partie ” Assets ”, dans ” theme.css ” et descend tout en bas pour écrire :

.site-nav_link {
text-decoration : none ;

Maintenant, dans ”featured product” on va couper la modal :

<! - - Modal - ->
<div class = '' modal fade '' id = exampleModal '' tabindex = '' - 1 '' role = '' dialog '' aria-labelledby = '' exampleModalLabel '' aria-hidden = '' true ''>
<div class = '' modal-dialog '' role = '' document ''>
<div class = '' modal-content ''>
<div class = '' modal.header ''>
<h5 class = '' modal-title '' id = '' exampleModalLabel ''> Titre modal </h5>
<button type = '' button '' class = '' close '' data-licenciement = '' modal '' aria-label = '' Close ''>
<span aria-hidden = '' true ''> 6 fois; </span>
</button>
</div>
<div class = '' modal-body ''>
...
</div>
<div class = '' modal-footer ''>
<button type = '' button '' class = '' btn btn-secondary '' data-licenciement = '' modal ''> Fermer </button>
<button type = '' button '' class = '' btn btn-primary ''> Enregistrer les modifications </button>
</div>
</div>
</div>
</div>

Et on va la coller dans la section ”theme.liquid”, et en dessous de la balise body.

Personnalisation

Sur le site :

  • Clique sur ” launch demo modal ”
  • Clique droit
  • ” inspecter ”
  • Sélectionne ce qui correspond à la fenêtre qui s’est ouverte
  • Va dans ”modal”
  • ” background color ”, et gère la transparence.

Va encore une fois dans la section ”Assets” ,”theme.css”et tout en bas il faut saisir :

.modal {
background-color : transparent ;

Dans ”featured product”, recherchez ”modal”. A la place de :

 < ! - - Button trigger modal - - >
<p class=''btn btn-primary'' data-toggle=''modal'' data-target=''#exampleModal''>
Launch demo modal
</p>

Ecris :

<p style=''cursor : pointer'' data-toggle=''modal'' data-target=''#exampleModal''>
Guide des tailles
</p>

Dans le fichier ”theme.liquid”, efface dans la partie modal, ceci :

<h5 class=''modal-title'' id=''exampleModalLabel''>Modal title</h5>

Dans la partie modal body, met à la place des ”…” :

<img src= '' '' />

Met le guide des tailles que tu veux à la suite.

Enfin, efface maintenant dans la partie modal footer :

<button type=''button'' class=''btn btn-primary''>Save changes</button>

Voilà on a créé un guide des tailles !

Si tu as des questions n’hésites pas, je suis là !

A bientôt !

Leave a Reply