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 ?

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 Templates – product.liquid

Vous allez essayer de rechercher en cliquant sur la touche « ctrl + F » de votre clavier l’occurence suivante : « {% enform 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 « {% enform ou </form » … Dans ce cas rendez-vous dans le dossier 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>

Ouvrez maintenant le dossier Assets et trouvez votre fichier .css.liquid ou .scss.liquid ou .css, .scss, généralement appelé theme ou style. 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 #f0cad2;
  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 5 votes]

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 13 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

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