Nous allons voir dans ce tutoriel comment ajouter des logos de paiement sur une fiche produit dans shopify afin de rassurer vos clients sur les moyens de paiements avant qu’ils procèdent à un achat.
Rajouter ce type d’image va rassurer le client et lui permettre d’être en confiance.
Ajout de l’image de paiement
Voyons ensemble comment mettre en place ce badge.
Téléchargez une des images ci-dessous ou celle de votre choix sur votre bureau.
Ci-dessous quelques images que vous pouvez utiliser:
Rendez vous dans votre administration et cliquez sur « Paramètres » puis sur « Fichiers ».
Cliquez sur « Importer un fichier » et allez chercher votre image.
Vous souhaitez plus de choix d’images ? Installez l’application Speed ecom App et rendez-vous dans l’onglet Ressources !
Version Thèmes Récents – (OS 2.0 – après 2022)
Rendez vous dans la personnalisation de votre thème et mettez vous sur un produit
Dans la colonne de gauche vous verrez différents blocs ! il suffit de trouver le formulaire utilisé.
Une fois le bloc trouvé cliquez sur « Créer un bloc » et choisissez image ou code HTML
Si vous avez un bloc image il vous suffit de le sélectionner et de le placer sous le bloc formulaire sinon… Sélectionnez le block code HTML et suivez les étapes suivantes
Bloc HML
Repérez le champ URL de votre image et copiez l’intégralité du code et stockez le dans un fichier txt ou autre.
Ensuite copiez/collez ce code juste en dessous.
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 »
Copiez ce code dans la zone textuelle du bloc HTML et cliquez en haut à droite sur enregistrer.
Vous avez un vieux thème ? suivez les étapes suivantes…
Version Thèmes Vintages (OS 1.0 – avant 2022)
Repérez le champ URL de votre image et copiez l’intégralité du code et stockez le dans un fichier txt ou autre.
Ensuite copiez/collez ce code juste en dessous.
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 »
Rendez vous dans votre administration et cliquez sur « Boutique en ligne » puis cliquez sur le bouton « Action » puis « Modifier le code ».
Trouvez le dossier Sections et cliquez dessus pour dévoiler les fichiers.
Trouvez le fichier product-template.liquid ou main-product.liquid et cliquez dessus.
Trouvez la zone {{ product.description }}.
Une fois la zone repérée copiez/collez votre « code 2 » juste avant.
Cliquez sur le bouton « Enregistrer » en haut à droite pour valider vos modifications.
Libre à vous de trouver votre propre badge de confiance mais assurez-vous que l’image soit libre de droits afin d’éviter tout problème ! Sinon créez-la sous photoshop, photopea, illustrator ou canva
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 !
Hugo
10 Août 2017Ça me fait gagner un temps de dingue par rapport à avant ou je mettais les photos une par une.
Merci !!!
dgeo22
13 Août 2017Tant mieux c’est le but 😉
Gautier Freund
29 Nov 2018Bonjour 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
Dgeo Dev
7 Déc 2018Bonsoir, 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
jmb
13 Août 2017merci pour ces petites modifs qui changent la vie
jmb
13 Août 2017merci pour ces modifs qui changent la vie
dgeo22
13 Août 2017Merci JMB 🙂
Ben
24 Août 2017Merci l’ami t’es un bon !
Hedy
24 Août 2017Bonjour
J’ai mis le code dans tous les sens et ça n’a pas fonctionné
Cordialement.
Hedy
25 Août 2017Merci , après une soirée d’essais j’ai trouvé la solution
Encore Merci
Chris
19 Oct 2017Merci beaucoup pour l’astuce !
Julien Menut
29 Nov 2017Merci 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 !
dgeo22
30 Nov 2017Salut 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
Bruno
12 Déc 2017Merci 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 ?
Bruno
12 Déc 2017J’ai finalement trouvé, mais existe t il un moyen pour centrer l’image ?
dgeo22
12 Déc 2017Pose la question ici ca sera plus pratique 😉 https://www.facebook.com/groups/speedflytheme/?fref=nf
dgeo22
14 Déc 2017dans la balise image![]()
style=’margin:0 auto;’
coffin
31 Jan 2018bonjour !
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
dgeo22
1 Fév 2018Salut, entoure ton image d’un div style=(double accolade)text-align:center;(double accolade)
Hugo
9 Mai 2020Si ç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.
Dgeo Dev
11 Mai 2020Hello et merci pour le tips 😉
camille martin
26 Jan 2019up
dgeo22
12 Déc 2017Salut, demande moi sur mon facebook car si tu as speedfly pas besoin d’intervenir dans les fichiers 😉
Aurélien
2 Jan 2018Merci 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.
dgeo22
2 Jan 2018Salut, il suffit de trouver la portion de code {{ product.description }} et de le mettre après 😉
Mat
12 Fév 2018Merci pour ce tuto ! Gros gain de temps et un bel effet dans mon onglet paiement 😉
Bilal
1 Mar 2018Salut,
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
dgeo22
2 Mar 2018Salut, je ne connais pas spécialement ce thème mais parfois c’est écrit {{ description }} dans le product
sarkis
9 Mar 2018Bonsoir 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.
Dgeo GD
16 Mar 2018Bonjour,
Merci pour le com
Oui c’est le bon emplacement
Votre thème doit avoir plusieurs endroits de descriptions
Quel est son nom?
Gabriel
30 Mar 2018Tip TOP !!!
Merci
Alex
18 Avr 2018Salut, je viens de faire exactement ce qui est décrit mais rien n’apparait…mon theme s’appelle « Minimal ».
Une idée ? merci 🙂
Yemalin DAH-BOLINON
6 Mai 2018bonsoir. 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é.
rosafleur1
1 Juin 2018Bonjour , 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
Dgeo Dev
2 Juin 2018Salut, tu as du coller le code à un mauvais endroit éviter de mettre cela à l’intérieur de balise {{ }} mais bien en dehors
Francine HO A TCHUNG
2 Juin 2018Bonjour 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.
Dgeo Dev
2 Juin 2018Hello, tu es arrivé en pleine maintenance 🙂 tu peux désormais suivre le tutoriel comme d’habitude 😉
Francine HO A TCHUNG
2 Juin 2018C’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.
Valou
3 Déc 2018Bonjour, 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
Dgeo Dev
7 Déc 2018Bonsoir, 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 😉
Gil
25 Fév 2019Hello Dgeo,
Merci pour les tutos !! t’es au top !!
Bass
11 Juin 2019Bonjour 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 ?
Dgeo Dev
12 Juin 2019Hello, 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).
Lucien prenel
23 Juin 2019Bonjour, 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
Sam
3 Nov 2019Bonsoir, 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.
Dgeo Dev
5 Nov 2019Hello, é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.
Ade
10 Mar 2020Bonjour, merci pour ces explications, pour moi le logo est vraiment grand, comment faire pour modifier la taille ? Merci
Dgeo Dev
13 Mar 2020Hello, il suffit de modifier l’image avec photopea (gratuit) ou photoshop et l’insérer de nouveau
Yves
4 Avr 2020Bonjour 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 .
Dgeo Dev
4 Avr 2020Hello, 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.
Yves
6 Avr 2020Merci beaucoup !!
fabrice
21 Avr 2020Bonjour,
Est- ce que ça marche avec le thème début? Je n’ai pas eu de résultat.
Cordialement
Dgeo Dev
21 Avr 2020Hello, oui la preuve ici 😉 https://dgeodev.myshopify.com/
KOUABA
24 Août 2020Bonjour,
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?
Dgeo Dev
26 Août 2020Bonjour, surement parce que vous êtes en période d’essai ou que l’image n’est pas accessible.
fabrice
22 Avr 2020Merci beaucoup.
Bon business
Danny
28 Avr 2020Bonjour, 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
Dgeo Dev
29 Avr 2020Hello, étrange me MP au besoin pour voir ensemble 😉
kimo
10 Mai 2020bonjour j ai essayé plusieurs fois pour mettre en place l image mais ca marche pas
j ai mis un texte et toujours rien
Dgeo Dev
11 Mai 2020Hello, 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à.
Enzo
19 Mai 2020Hello, 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 !
Nathan
27 Mai 2020Bonjour, 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.
Dgeo Dev
27 Mai 2020Hello, il faut aller dans sections – featured-product.liquid
Joachim
22 Août 2020Bonjour. 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.
Dgeo Dev
26 Août 2020Bonjour, hélas Turbo fait partie rares des thèmes codés bizarrement et la plupart de mes tutos ne fonctionne pas dessus 🙁 navré
Romain
8 Oct 2020Bonjour 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
Dgeo Dev
8 Oct 2020Hello, à 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
Umiglia
12 Oct 2020Bonjour,
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.
Alexis
17 Nov 2020Hello 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 ?
Dgeo Dev
19 Nov 2020Hello, il faut déplacer le code plus bas 🙂
Heizy
18 Nov 2020Bonjour, 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
Dgeo Dev
19 Nov 2020Bonjour et merci pour le com 🙂 il faut mettre le code html dans sections – cart-template.liquid
Heizy
20 Nov 2020Merci 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 🙂
Dgeo Dev
20 Nov 2020Il faut dans ce cas tatonner et mettre des toto1, toto2 un peu partout afin de trouver l’emplacement voulu 🙂
Kiv
5 Déc 2020Salut, 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?
Dgeo Dev
5 Déc 2020Hello, le mieux et de trouver la taille de la zone en pixel et de faire l’image en conséquence 🙂
Am-Ecom
18 Déc 2020Bonjour 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 🙂
Dgeo Dev
18 Déc 2020Hello, le thème ne doit pas respecter les bonnes pratiques de Shopify 🙁 va falloir changer de thème 😀
Jean
23 Fév 2021Bonjour Dgeo, merci pour tes tutos géniaux.
Lorsque l’on met une image en dessous du bouton ajouter au panier (ce que j’ai fait). On peut observer un espace de 2cm entre l’image et le bouton ajouter au panier. Il y aurait-il un code à mettre pour supprimer cette espace et que l’image soit quasiment coller au bouton ajouter au panier ?
Dgeo Dev
23 Fév 2021Hello, c’est au niveau du thème 🙂 idéalement il faudrait demander à leur support on m’envoyer le lien de la page en question en MP
Raphaël
13 Avr 2021Merci pour encore pour cette astuce simple et efficace !
Benjamin
26 Avr 2021Bonjour, super pour les infos ! Ce pendant je ne trouve pas ou coder pour mettre les titres de produits en H2 par exemple. Une aide ? Merci d’avance
Corinne
1 Mai 2021Bonjour,
Je souhaiterais intégrer ça sur mon produit en page d’accueil et non sur ma page produit!
Oui dois je me rendre?
Merci
Dgeo Dev
2 Mai 2021Bonsoir, il faut mettre le code dans le featured-product.liquid au lieu du product-template.liquid
Philippine
27 Juil 2021Bonjour,
Je souhaiterai diminuer la taille de l’icône, est ce possible ?
merci bcp
Dgeo Dev
27 Juil 2021Hello, il faut dans ce cas dans la balise image rajouter un style= »max-width=100px; » du style img src= »…. » style= »max-width=100px; » … adapter la taille en pixel selon le besoin
Elkami
20 Mar 2022Bonjour, j’arrive pas à intégrer la taille de l’image à votre code pour l’intégrer dans le thème dawn, c’est possible d’écrire le code complet comprenant le code de base de votre tuto + le code « style= »max-width=100px; » ensemble svp ? Merci
Yann
9 Fév 2022Bonjour,
Sauf erreur de ma part dans le thème 2.0 le fichier Product-template n’existe plus. Dans quel fichier je dois mettre le code du coup pour implémenter les icones de paiement dans mes fiches articles. Merci d’avance de votre aide.
Dgeo Dev
9 Fév 2022Bonsoir, tout dépend du thème. Si c’est dawn il faut regarder il me semble dans main-product.liquid ou main-quelquechose pour les pages de contenus (page, produit, collection, article, etc…)
Jérémy
13 Fév 2023Bonjour,
D’abord un grand merci pour ce tuto !
Je l’ai essayé sur un premier site et cela a marché avec succès. J’ai donc réessayé de le faire sur un autre de mes sites mais ça ne fonctionne pas, pourtant il s’agit du même thème (Sense). Sous « ajout au panier » il y a bien quelque chose qui s’affiche mais l’image n’apparait pas. J’ai vérifier le code et l’URL à plusieurs reprises, j’ai tenté de déplacer le code mais rien a faire.
Si vous avez une réponse à ce problème ça serait super.
Merci d’avance pour votre aide !