Nous allons voir dans ce tutoriel comment ajouter une zone sous le formulaire d’achat d’une fiche produit sur Shopify. Cet encart est idéal pour l’effet de rassurance avec des icônes  et textes adaptées comme par exemple le service client, la garantie, les paiements sécurisés…

Comment placer cet encart d’infos complémentaires ?

1ère possibilité : Bloc d’applications

Rendez-vous dans la personnalisation du thème – se rendre sur un produit – Ajouter un bloc de type HTML ou Liquid personnalisé

2ème possibilité : Dans les fichiers

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouver le dossier Sections et trouvez le fichier product-template.liquid !

Vous n’avez pas de product-template dans le dossier section ? dans ce cas rendez-vous dans Modèles (Templates) – product.liquid

Vous allez essayer de rechercher en cliquant sur la touche « ctrl + F » de votre clavier l’occurence suivante : « {% endform ou </form » ! Une fois cette portion de code trouvée copiez/collez le code suivant juste en dessous de cette ligne !

Je n’ai pas de « {% endform ou </form » … Dans ce cas rendez-vous dans le dossier Extraits (Snippets) et essayez de trouver un fichier nommait généralement product-form.liquid… Sur Speedfly c’est product-form-1.liquid.

<div class="xtraInfos"> 
  <div class="xtraInfos__item">
    <img class="xtraInfos__img" src="https://cdn.shopify.com/s/files/1/0532/9974/0849/files/icon-delivery95x95.png?v=1611189038" width="36">
    <div class="xtraInfos__title">Livraison Gratuite</div>
  </div>
  <div class="xtraInfos__item">
   <img class="xtraInfos__img" src="https://cdn.shopify.com/s/files/1/0532/9974/0849/files/icon-client.png?v=1611189038" width="36">
    <div class="xtraInfos__title">Satisfaction Garantie</div>
  </div>
  
  <div class="xtraInfos__item">
    <img class="xtraInfos__img" src="https://cdn.shopify.com/s/files/1/0532/9974/0849/files/icon-sav95x95.png?v=1611189038" width="36">
    <div class="xtraInfos__title">Service Client</div>
  </div>
  
  <div class="xtraInfos__item">
   <img class="xtraInfos__img" src="https://cdn.shopify.com/s/files/1/0532/9974/0849/files/icon-secure.png?v=1611189038" width="36">
    <div class="xtraInfos__title">Paiements Sécurisés</div>
  </div>
</div>

Mise en forme

Ouvrez maintenant le dossier Ressources (Assets) et trouvez votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise. Mettez-vous tout en bas et copiez/collez le code ci-dessous:

.xtraInfos * {
  box-sizing: border-box;
}
.xtraInfos {  
  display:flex;  
  justify-content:space-between;
  flex-wrap:wrap;
  width: 100%;
  margin: 1rem auto;
  background: #f1f1f1; 
  box-shadow: 0px 2px 4px 0px #dddddd;
  font-size:14px;
  font-family:arial;
  color:#555;
} 
.xtraInfos__item {
  flex:1 0 25%;
  text-align:center;
  padding:1rem;
  border-right:1px solid #e6e6e6;  
} 
.xtraInfos__item:last-child {
  border-right:0; 
}
.xtraInfos__img {
  margin-bottom:7px;
}
@media screen and (max-width:600px) {
  .xtraInfos__item {    
    flex:1 0 50%;
    border:0.5px solid #e6e6e6;        
  }
}

Comment personnaliser les icônes, les textes et le design ?

Cette partie étant assez compliquée à expliquer par écrits, je vous invite à visionner la vidéo 😉

 

Bon tuto à toutes & tous !

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

  1. Bonjour Dgeo ! Merci encore pour ce magnifique tutos !
    C’est top.

    Cependant j’ai un soucis avec les tutos, ils se mettent sur la page produit, et non sur la page d’accueil avec le produit en vedette (la livraison, le bouton acheté maintenant, les secu de paiements, le GIF d’offre et celui la aussi).

    Comment je pourrais faire?

    Merci

    1. Hello, il faut changer et ne pas aller dans product-template.liquid mais featured-product.lliquid

  2. hello c’est possible de change la couleur des icones aussi? merci

    1. Hello, non navré mais il suffit de les modifier sur photoshop et de remplacer par les urls d’images 🙂

  3. Bonjour. Super tuto comme d’habitude. Merci infiniment. Juste une question : est-il possible de changer la couleur des 4 icones svp et si oui comment ? Merci beaucoup par avance.

    1. Hello et merci pour le com 🙂 il suffit de télécharger les images et les traiter sous photoshop. Ensuite les uploader sur votre shopify et changer les urls des images

  4. Salut Dgeo merci pour ce tutoriel ! Est-il possible de mettre ces trust badges dans le footer entre la section produits recommandés et newsletter et UNIQUEMENT sur la page produit ? Merci.

    1. Hello, oui c’est possible mais il faudrait demander au support du thème que tu utilises pour savoir ou le placer précisément 🙂

  5. Excellent tuto, rapide et efficace. Merci

    1. Hello et merci pour le com 😉

  6. Bonjour, Merci bcp pour le tuto.
    Pouvez-vous préciser où inclure le code pour que les picto s’affichent en dessous du slideshow des images produits ? (partie gauche pour votre page produit).

    Merci

    1. Bonjour, cela dépend des thèmes généralement c’est dans sections product-template ou main-product .liquid

  7. Bonjour et merci pour ce tuto, dis moi il y a un espace entre les deux dernières icône et la description en dessous, comment empêcher cette espace merci

  8. Hello, je viens de te découvrir et étant débutante dans tout ça, tes vidéos m’aident vraiment beaucoup :
    Merci 🙂

    1. Hello, merci pour le message c’est sympa 😉

  9. Hello merci pour cette video. Les badges sont bien sur ma page produit mais quand je souhaite mettre en ligne un nouveau produit, sur sa page produit, les badges se retrouvent tout en haut de la page, le bouton acheter maintenant est complètement décalé plus rien tout est décalé. Comment faire pour que les badges soient fixes quelque soit le nombre de produits ?

    1. Hello, il faut essayer de trouver un emplacement un peu plus bas. Ce type de problème intervient lorsque qu’un élément est trop proche d’un autre élément. Essayez de mettre des toto1, toto2, toto3 un peu partout dans le fichier afin de voir l’emplacement idéal 😉 n’oubliez pas de les supprimer après 🙂

  10. Bonjour,
    C’est pas plutôt {% endform que {% enform ?
    Merci

    1. Hello, yes merci je corrige !

  11. Bonjour,
    Le deuxième code que je dois mettre dans them.css.liquid ça fonctionne.
    Par contre, sur product-template.liquid je ne trouve ni le {% endform ou </form et pareil, je ne trouve pas product-form.liquid… Sur Speedfly c’est product-form-1.liquid.

    ps: Je suis sur le thème speedfly.

  12. J’ai trouver c’est dans product-form-primary.liquid

    1. Hello 🙂 Yes bravo, sinon utiliser un bloc html directement dans la fiche produit c’est plus propre et évite de perdre le code à chaque mise à jour 😉

Laisser un commentaire

Fermer le menu