Comment Mettre des Icônes pour Rassurer le Client sur une Fiche Produit Shopify

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/0613/6335/5827/files/icon-delivery95x95-v2.png?v=1646139526" 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/0613/6335/5827/files/icon-client-v2.png?v=1646139755" 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/0613/6335/5827/files/icon-sav95x95-v2.png?v=1646139755" 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/0613/6335/5827/files/icon-secure-v2.png?v=1646139755" 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: 4.8 sur 18 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 29 commentaires

  1. Fred

    18 Mai 2021 Répondre

    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. Dgeo Dev

      19 Mai 2021 Répondre

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

  2. André Ribeiro

    29 Mai 2021 Répondre

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

    1. Dgeo Dev

      1 Juin 2021 Répondre

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

  3. Patrick

    27 Juin 2021 Répondre

    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. Dgeo Dev

      28 Juin 2021 Répondre

      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. Max

    16 Sep 2021 Répondre

    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. Dgeo Dev

      17 Sep 2021 Répondre

      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. Be Positive Fitness

    23 Sep 2021 Répondre

    Excellent tuto, rapide et efficace. Merci

    1. Dgeo Dev

      26 Sep 2021 Répondre

      Hello et merci pour le com 😉

  6. François

    4 Oct 2021 Répondre

    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. Dgeo Dev

      4 Oct 2021 Répondre

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

  7. guessoum

    9 Oct 2021 Répondre

    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. Coraline webert

    30 Nov 2021 Répondre

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

    1. Dgeo Dev

      1 Déc 2021 Répondre

      Hello, merci pour le message c’est sympa 😉

  9. kenza

    10 Déc 2021 Répondre

    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. Dgeo Dev

      14 Déc 2021 Répondre

      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. Salut

    15 Jan 2022 Répondre

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

    1. Dgeo Dev

      15 Jan 2022 Répondre

      Hello, yes merci je corrige !

  11. laurent

    29 Août 2022 Répondre

    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. laurent

    29 Août 2022 Répondre

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

    1. Dgeo Dev

      30 Août 2022 Répondre

      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 😉

  13. Poupiou

    5 Oct 2022 Répondre

    Bonjour Dgeo
    Félicitations pour tes tutos ils sont d’une clarté et d’une simplicité d’utilisation pas croyable (je suis un bon exemple de débutant total pour te le dire).
    Petit soucis avec celui-ci, au niveau de l’affichage des icones tout va bien sur PC par contre quand c’est sur mobile l’icone doit « manger » (je connais pas le terme technique) la première ligne de chaque description d’article. Comment pourrais-je remédier à ça ?

  14. Thomas

    14 Déc 2022 Répondre

    Salut !
    Super pour tes tutos, c’est vraiment appréciable !!!
    J’ai cependant un petit soucis sur ta page actuelle ou je ne peux pas copier coller le code ..
    Il y a des trucs de ce style sur plusieurs dizaines de lignes à la place de ton code :/
    manual= »%3Cdiv%20class%3D%22xtraInfos%22%3E%2

    1. Dgeo Dev

      14 Déc 2022 Répondre

      Hello, effectivement un bug temporaire c’est corrigé ! les codes s’afficheront désormais correctement

  15. Thomas

    14 Déc 2022 Répondre

    Ah ben ça s’est enlevé après avoir écrit x) Aucun soucis du coup thanks 🙂

    1. Dgeo Dev

      14 Déc 2022 Répondre

      ok super 🙂

  16. Guillaume

    22 Déc 2022 Répondre

    Salut Dgeo !
    J’ai utiliser le code car je viens de la formation speedfly, sauf que lorsque je veux changer la taille des icones, rien ne se passe. J’ai pourtant tout essayé..
    Merci !

Laisser un commentaire

Fermer le menu
×
×

Panier