Nous allons Ajouter un badge de confiance sur une fiche produit dans shopify afin de rassurer vos clients sur les moyens de paiements avant achat

Rajouter ce type d’image va rassurer le client et lui permettre d’être en confiance avant son achat.

Passons directement à la partie technique

1 Téléchargez une des images ci-dessous ou celle de votre choix sur votre bureau.

Ci-dessous 3 images que vous pouvez utiliser: (libre à vous d’en trouver d’autres…).

secure2

secure

2 Rendez vous dans votre administration et cliquez sur « settings » puis sur « files ».

3 Cliquez sur « upload file » et allez chercher votre image.

4 Repérez le champ URL de votre image et copiez l’intégralité du code et stockez le dans un fichier txt ou autre.

5 ensuite copiez/collez ce code juste en dessous.

<img src="le-lien-de-votre-image.extention-jpg-ou-png" alt="" />

6 Maintenant remplacez l’intérieur des  »  » par le code de l’url précédemment copié donc le code 1.

Ca devrait donner quelque chose comme ceci: code 2

<img src="https://cdn.shopify.com/s/files/1/2031/3857/files/secure.jpg?3561dqzdz802568405813737" alt="" />

7 Rendez vous dans votre administration et cliquez sur « Online thème » puis cliquez sur le bouton « Action » puis « Edit HTML / CSS ».

8 Trouvez le dossier Sections et cliquez dessus pour dévoiler les fichiers.

9 Trouvez le fichier product-template.liquid et cliquez dessus.

10 Trouvez la zone {{ product.description }}.

11 Une fois la zone repérée copiez/collez votre code 2 juste avant.

12 Cliquez sur le bouton « Save » en haut à droite pour valider vos modifications.

Ce tutoriel est aussi disponible en version vidéo

Voila vous avez une jolie image de sous votre formulaire de commande de votre fiche produit.

Bon tuto à tous !

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 22 votes]

Cet article a 78 commentaires

  1. Ça me fait gagner un temps de dingue par rapport à avant ou je mettais les photos une par une.

    Merci !!!

    1. Tant mieux c’est le but 😉

      1. Bonjour j’aurais plusieurs question déjà esque cela fonctionne sur le theme Brooklyn ? voici mon l’url de mon image : https://cdn.shopify.com/s/files/1/0047/0240/4708/files/images.png?12343574111596716431

        -Comment? ou peut t-on fusionné le panier la page de saisi des coordonnée client et bancaire pour avoir une étape en moins ?

        -Peut t-on ajoutée des produits sur la home page et les reliée directement a la page de paiement sens passé par le panier ? si oui comment svp je cherche mais je ne trouve pas de solution sur le theme Brooklyn.

        Un très très grand Merci

        1. Bonsoir, J’ai bcp de retard alors je réponds brièvement 🙂
          – Oui compatible tout thème
          – ON ne peut pas sur shopify
          – Si le theme possede une section produit mis en avant avec une option passer directement au checkout. à ma connaissance seul speedfly le fait 😉
          Bonne soirée

  2. merci pour ces petites modifs qui changent la vie

  3. merci pour ces modifs qui changent la vie

    1. Merci JMB 🙂

  4. Merci l’ami t’es un bon !

  5. Bonjour
    J’ai mis le code dans tous les sens et ça n’a pas fonctionné
    Cordialement.

  6. Merci , après une soirée d’essais j’ai trouvé la solution
    Encore Merci

  7. Merci beaucoup pour l’astuce !

  8. Merci beaucoup pour tes tutos et de les mettre gracieusement à disposition !
    Petite question concernant celui-ci, comment puis-je faire si je souhaite mettre cette image à côté du bouton « ajouter au panier » et non en dessous ?
    Merci par avance !

    1. Salut Julien et merci pour le commentaire, pas simple à expliquer mais vous devez appliquer une flotaison… mettre une div qui va conteneir l’image div style=…float:right ou left

  9. Merci pour les astuces! J’ai le thème speedfly et je n’arrive à rajouter la ligne de code parce que contrairement à mon ancien thème, la deuxième ligne n’est pas vierge et lorsque je rajouter une ligne en dessous de  »  » pour mettre le code, ça ne fonctionne pas, un conseil ?

    1. J’ai finalement trouvé, mais existe t il un moyen pour centrer l’image ?

      1. dans la balise image style=’margin:0 auto;’

        1. bonjour !
          J’ai essayé de centrer l’image avec style=’margin:0 auto;’ mais ça n’a pas fonctionné.
          J’ai rajouté des style=’text-align:center; ou block mais rien n’y fait..et franchement vu mon niveau inexistant cela aurait été une énorme surprise.
          Serais tu en mesure de mettre la ligne de code parfaite pour aligner l’image paiement sous le bouton call to action ? Merci d’avance

          1. Salut, entoure ton image d’un div style=(double accolade)text-align:center;(double accolade)

          2. Si ça peut encore servir à quelqu’un (sait-on jamais?), sur le thème début voilà ce que j’ai mis pour centrer l’image : style= »display: block; margin-left: auto; margin-right: auto; » (entre le alt » » et le /> . J’avais également ajouté ça width= »50% » height= »50% » entre img et src poru que l’image soit réduite.

          3. Hello et merci pour le tips 😉

    2. Salut, demande moi sur mon facebook car si tu as speedfly pas besoin d’intervenir dans les fichiers 😉

  10. Merci pour ces tips !

    J’aimerais le mettre en fin de fiche produit plutôt qu’en début, comment puis-je faire ?
    Merci d’avance.

    1. Salut, il suffit de trouver la portion de code {{ product.description }} et de le mettre après 😉

  11. Merci pour ce tuto ! Gros gain de temps et un bel effet dans mon onglet paiement 😉

  12. Salut,
    quand j’ai cherché {{ product.description }} je n’ai rien trouvé puis, j’ai cherché product.description et j’en ai trouvé plusieurs. J’utilise le thème Parallax, tu sais s’il y a une autre solution ?

    Merci en tout cas

    1. Salut, je ne connais pas spécialement ce thème mais parfois c’est écrit {{ description }} dans le product

      1. Bonsoir les amis,

        j’ai suivi le protocole à la lettre et hélas, mes démarches n’aboutissent pas.
        Je colle mon code avant ou après {{ product.description }}, dans product-template.liquid ligne 405 mais aucun changement.

        Le tuto plus haut parle de « online thème » et « edit HTML/CCS.

        Rassurez-moi, on parle bien de « online store », « action » puis « edit code », n’est ce pas ?

        Un grand merci pour votre aide.

        1. Bonjour,
          Merci pour le com
          Oui c’est le bon emplacement
          Votre thème doit avoir plusieurs endroits de descriptions
          Quel est son nom?

  13. Tip TOP !!!
    Merci

  14. Salut, je viens de faire exactement ce qui est décrit mais rien n’apparait…mon theme s’appelle « Minimal ».
    Une idée ? merci 🙂

  15. bonsoir. merci à vous pour ce travail remarquable… moi j’utilise le thème Brooklyn et j’ai suivi à la lettre la démarche, mais je n’ai pas eu le résultat escompté.

  16. Bonjour , merci pour cette astuse, mais malheureusement ça marche pas aussi pour moi , ça me done ce message:

    Ce fichier contient les erreurs suivantes :
    Line 172 — Liquid syntax error: [:comparison, « <"] is not a valid expression in "{{ }} »

    j’ai le thème Supply

    est ce que vous pouvez m’aider svp?
    merci d’avance

    1. Salut, tu as du coller le code à un mauvais endroit éviter de mettre cela à l’intérieur de balise {{ }} mais bien en dehors

  17. Bonjour GD,

    Pourquoi je ne vois plus les textes des codes dans les cases noires du tuto , avant j’avais bien installer ton image sur mon site, mais là je voulais rajouter une image pour Amazon Pay et je ne retrouve pas la ligne de code sur mon Shopify ou quelqu’un peut-il me redonner le début du code à insérer, merci d’avance.

    1. Hello, tu es arrivé en pleine maintenance 🙂 tu peux désormais suivre le tutoriel comme d’habitude 😉

    2. C’est bon j’ai retrouvé la ligne de code dans le html sauf que j’aimerai que mes deux images soient côte à côte alors que là elles sont l’une en dessous de l’autre.

  18. Bonjour, je voudrai vous demandez est-il possible d’avoir la bande en dessous de tout et nom au dessus de ma description, car ma description ce retrouve tout en dessous
    Merci par avance et bravo pour tout c’est au top

    1. Bonsoir, oui il suffit de tester divers emplacements. le mieux est de placer dans le code des toto1 toto2 toto3 à différents endroits et de voir celui qui vous intéresse le plus. une fois la zone détectée mettre les badges 😉

  19. Hello Dgeo,
    Merci pour les tutos !! t’es au top !!

  20. Bonjour Dgeo : Merci beaucoup pou ce Tuto.

    Petite question suppression : Comment réduire l’espace entre le bouton de paiement et le trust badge ajouté sur la fiche produit ?

    1. Hello, il faut mettre dans le code avant le code de ce tuto un ou des bouts de codes suivants:
      (ou 2 ou 3 selon le dégré d’espacement voulu).

  21. Bonjour, j’utilise le thème Début, je voudrais savoir comment adapter la taille de l’icône de paiement sur ordi car l’icône apparaît plus petite que sur mobile et est donc mal adapté sur ordi. Merci par avance

  22. Bonsoir, tout d’abord merci pour la vidéo. J’ai suivi à la lettre toutes les instructions et pourtant rien ne se passe. Rien n’apparait sous le panier. J’utilise le thème début. Merci d’avance pour vos lumières.

    1. Hello, étrange, vérifier que le placement n’est pas dans une condition particulière. tester de mettre des toto et tata un peu partout dans le fichier pour voir si ça apparait… Sinon m’envoyer le lien du site en MP pour que je regarde.

  23. Bonjour, merci pour ces explications, pour moi le logo est vraiment grand, comment faire pour modifier la taille ? Merci

    1. Hello, il suffit de modifier l’image avec photopea (gratuit) ou photoshop et l’insérer de nouveau

  24. Bonjour est-il possible de mettre les badge de confiance sur ma fiche produit qui est situer en page d’accueil principal de mon site ? car les badge marche quand je clique sur mon produit mais ne s’affiche pas sur ma page d’accueil .

    1. Hello, oui c’est possible mais dans ce cas il faudra trouver le bon fichier. Généralement c’est le featured-product.liquid présent dans le fichier Sections.

      1. Merci beaucoup !!

  25. Bonjour,
    Est- ce que ça marche avec le thème début? Je n’ai pas eu de résultat.
    Cordialement

      1. Bonjour,
        J’au aussi ce soucis, je suis en periode d’essaie sur shopify, jai juste un petit carré qui s’affice en dessous de ajouter au panier.
        J’ai déja essayé plusieurs fois en changeant de format de fichier sans succes.

        Pouvez vous m’aider svp?

        1. Bonjour, surement parce que vous êtes en période d’essai ou que l’image n’est pas accessible.

  26. Merci beaucoup.
    Bon business

  27. Bonjour, je vous remercie pour vos tuto j ai réussi à faire beaucoup. j ai un problème avec ce code je l’ai dejà mis dans plusieurs boutique sa fonctionne et la j’essaye de le mettre dans le thème Début sa ne fonctionne pas, je le colle en dessous de endform et sa ne va pas, mon lien d’image fonctionne vu que sur le même compte sur un autre thème sa fonctionne. je peut même écrire du texte comme TOTO1 sa ne se marque pas sur ma boutique en dessous du bouton panier.
    merci d’avance, Cordialement

    1. Hello, étrange me MP au besoin pour voir ensemble 😉

  28. bonjour j ai essayé plusieurs fois pour mettre en place l image mais ca marche pas
    j ai mis un texte et toujours rien

    1. Hello, l’emplacement doit pas être le bon, essayer de placer du texte un peu partout jusqu’à ce qu’il s’affiche et mettre le code là.

  29. Hello, tu saurais comment faire pour le turbo theme v4 ? S’il te plaît j’ai vraiment besoin de ton aide !

    Merci pour tes tutos !

  30. Bonjour, sauriez vous comment mettre ces trusts badges sur un produit en vedette sur la page d’accueil? J’ai essayé de modifier le code dans theme.liquid mais rien n’y fait.

    1. Hello, il faut aller dans sections – featured-product.liquid

  31. Bonjour. Merci pour les tutos mais j’y arrive pas avec mon thème turbo portland. Il n’y a pas de « endform » dans mon code, il n’y a que des « endif » et « endfor » et il y en a plusieurs. J’ai essayé étapes par étapes de changer cela à chaque niveau mais ça ne donne toujours rien. J’ai recherché dans le code « form » , pas retrouvé. J’ai essayé de chercher « addtochart », « payment_button »…. et plein d’autres choses en fonction d’autres tutos mais toujours rien. A croire que tout cela n’existe dans mon product template liquid.

    1. Bonjour, hélas Turbo fait partie rares des thèmes codés bizarrement et la plupart de mes tutos ne fonctionne pas dessus 🙁 navré

  32. Bonjour DGEO, merci pour ta précieuse aide, mais hélas aucun logo, aucune image et aucun texte n’apparaît… Impossible de trouver la faille pour ma part. J’ai aussi suivi ton tuto avec la zone de texte « économie en % » mais rien n’y fait ☹️ (je suis sur le thème début)

    As-tu une solution ?

    Merci d’avance

    1. Hello, à mon avis le code a été collé au mauvais endroit. Il ne peut y avoir de conflits étant donné que c’est uniquement de l’affichage sans scripts. Etrange. Au besoin contact notre support pour une éventuelle intervention ici: speedecom.freshdesk.com avec en intitulé: demande d’intervention sur un tuto Dgeo Dev 🙂 et on verra ce qu’on peut faire

  33. Bonjour,

    Merci énormément pour vos tutos, ils sont super.

    J’ai juste un petit problème avec ce tuto, tout apparaît bien sur mon ordinateur mais quand je mets en mode mobile rien n’apparaît juste un carré blanc sur mon thème Brooklyn. Qu’est ce que j’ai fait de faux ? Avez vous la solution ?

    Merci d’avance.

    Continuez comme ça.

    Meilleures salutations.

  34. Hello GEO,
    Pour ma part ça s’affiche bien sous le bouton ajouter au panier mais avec le bouton acheter maintenant il y a un espace qui rend assez moche entre le bouton et les badges. Comment faire pour vraiment le mettre juste en dessous du bouton acheter maintenant ?

    1. Hello, il faut déplacer le code plus bas 🙂

  35. Bonjour, Bonsoir tout d’abord un grand merci pour ce partage gratuit de vos connaissances !
    Pour ma petite question, j’aimerais savoir où implanter ce code dans la partie « votre panier » votre astuce me serait d’une grande aide. je vous remercie d’avance et toutes mes félicitations.
    *PS : j’utilise le thème Début

    1. Bonjour et merci pour le com 🙂 il faut mettre le code html dans sections – cart-template.liquid

  36. Merci beaucoup pour votre réactivité, cependant je n’ai pas trouver le « endform », que dois-je rechercher afin d’implanter ma ligne de code au bon endroit ?
    je vous remercie d’avance et encore bravo pour tout votre investissement 🙂

    1. Il faut dans ce cas tatonner et mettre des toto1, toto2 un peu partout afin de trouver l’emplacement voulu 🙂

  37. Salut, merci pour le partage de ses connaissances. J’aimerais savoir comment ajuster le badge de confiance, la partir ajouter au panier et acheter maintenant pour avoir la même longueur?

    1. Hello, le mieux et de trouver la taille de la zone en pixel et de faire l’image en conséquence 🙂

  38. Bonjour Dgeo, merci pour tes tuto géniaux.
    J’aurais cependant une question concernant celui-là qui est d’ailleurs l’un des seuls qui ne fonctionne pas …
    Je suis sur le Thème Motion et après tous les tuto parcouru aucuns ne fonctionne. Le soucis proviens du fait que je ne trouve jamais les même lignes que toi dans product-template.liquid. Et même après avoir inspecté l’élément de mon « Addtocart » je ne parviens jamais à trouver et quand je colle le liens image cela créer des erreurs sur mon site et j’annule alors la main d’oeuvre. Merci de m’aider 🙂

    1. Hello, le thème ne doit pas respecter les bonnes pratiques de Shopify 🙁 va falloir changer de thème 😀

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