Tuto Ajouter un badge de confiance sur une fiche produit dans shopify

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

37 commentaires sur “Tuto Ajouter un badge de confiance sur une fiche produit dans shopify

      1. Gautier Freund

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

          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

  1. Julien Menut

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

      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

  2. Bruno

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

          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

  3. Bilal

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

        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.

  4. Yemalin DAH-BOLINON

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

  5. rosafleur1

    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

  6. Francine HO A TCHUNG

    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.

  7. Valou

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

      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 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*