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

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

Ci-dessous 2 images que vous pouvez utiliser

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

Merci de me contacter pour toute question ou demande particulière

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

Cet article a 41 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. 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).

Laisser un commentaire

Fermer le menu
×
×

Panier