Tuto comment faire un footer avec badges de confiance sur shopify

Nous allons voir dans ce tutoriel comment ajouter un pied de page comportant les informations et badges de confiance

Il est important pour rassurer vos clients d’avoir un pré footer avec de belles icônes et des éléments permettant de les rassurer.

Ce tuto va vous créer 4 colonnes avec les éléments suivants:

  • Livraison en Europe
  • Satisfait ou remboursé
  • Service après vente
  • Paiement sécurisé

Installation du script

Rendez-vous dans les fichiers de votre thème – Boutique en ligneActions Edit code et ouvrez le dossier Layout.

Vous devez maintenant trouver le fichier theme.liquid.

Une fois le fichier ouvert rendez vous tout en bas et repérez la balise suivante: <footer… ou un code du type: {% section ‘footer’ %}

Vous allez copier/coller le code ci-dessous juste avant cette zone comme ici entre </main> et {% section ‘footer’ %} :

Code à insérer:

<!-- Début du code - Pre footer badges de confiance -->
<style>
  #gd-pre-footer .col-item { padding:15px 25px; text-align:center; list-style:none; }
  @media screen and (min-width: 768px) {
    #gd-pre-footer .col-item {
      width:25%;
      text-align:center;
      float:left;
      padding:5px 15px;
    }
  }
</style>

<div id="gd-pre-footer" class="pre_footer index-section home-section">
  <div class="wrapper">
    <div class="grid">
      <ul class="footer-badges-list">
        <li class="col-item">
          <div class="text-center">
            <img src="https://cdn.shopify.com/s/files/1/0039/4343/2304/t/2/assets/2_2.png?7856995661301180735" style="height: 95px;">
            <h3 class="h4">Livraison en Europe</h3>
          </div>
          <p></p><center>Vous n'habitez pas en France ? Pas de problème, nous livrons partout en Europe ! </center><p></p>
        </li>
        <li class="col-item">
          <div class="text-center">
            <img class="" src="https://cdn.shopify.com/s/files/1/0025/6920/7875/t/5/assets/satis.png?5570687033136492203" style="height: 95px;">
            <h3 class="h4">Satisfait ou Remboursé</h3>
          </div>
          <p></p><center>Quelque chose ne va pas ? Ça tombe bien vous avez <strong>14 jours pour changer d'avis</strong></center><p></p>
        </li>
        <li class="col-item">
          <div class="text-center">
            <img class="img90" src="https://cdn.shopify.com/s/files/1/0025/6920/7875/t/5/assets/av.png?12888273611470196742" style="height: 95px;">
            <h3 class="h4">Service Après Vente</h3>
          </div>
          <p></p><center><strong>Besoin d'aide ?</strong> Nous sommes à votre service<strong> du lundi au vendredi</strong></center><p></p>
        </li> 
        <li class="col-item">
          <div class="text-center">
            <img class="img90" src="https://cdn.shopify.com/s/files/1/0025/6920/7875/t/5/assets/secure.png?13809351928717204232" style="height: 95px;">
            <h3 class="h4">Paiement sécurisé</h3>
          </div>
          <p></p><center>Nous utilisons le cryptage SSL pour des <strong>paiements en toute sécurité</strong></center><p></p>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- Fin du code - Pre footer badges de confiance -->

Si vous souhaitez ce footer seulement sur la page d’accueil il vous suffit de mettre le code dans la condition d’affichage suivante:

{% if template.name == "index" %} 
le code ci-dessus
{% endif %}

Le code est bien entendu RWD c’est à dire qu’il s’adaptera aux différents supports comme les tablettes et mobiles 😉

N’oubliez pas de faire une sauvegarde avant toute modification !

Bonne installation !

Cet article a 33 commentaires

  1. Merci pour tes tutos!

  2. je veux le logo en anglais non en francais

    1. Hello, faudra donc en trouver et remplacer les src (lien) vers l’image dans le code 😉

  3. Salut, y’a t’il moyen d’enlever les point entre chaque badge ?

    1. Hello, les points ? euh y a pas de points 🙂 surement une interprétation de ton thème.

      1. hello, pareil moi j’ai les point

      2. Si y’a des points à cause de la balise liste du htlm , il faut tout simplement rajouter une ligne en plus dans le css : #gd-pre-footer .col-item { padding:15px 25px; text-align:center; }
        @media screen and (min-width: 768px) {
        #gd-pre-footer .col-item {
        width:25%;
        text-align:center;
        float:left;
        padding:5px 15px;
        list-style : none;
        }

        Mais apres tu auras toujours les points de liste en version portable

      3. Tu vas sur themecssliquid et tu rajoutes :

        .col-item {
        list-style: none;
        }

        ( désolé de tout ces commentaires )

  4. Hello,

    Merci pour ton tuto!
    Par contre moi cela ne fonctionne pas quand je place le code pour qu’il soit dans l’accueil uniquement

    C’est normal ?

    Merci !

  5. .col-item c’est le point qui s’affiche avant .col-item qui s’affiche sur le mien. Par contre quand je le supprime les logos deviennent verticale.

  6. Petite question, j’ai réussi à enlever les puces des pictogrammes.. mais en version téléphone, les puces reviennent, c’est dans quel fiche que je devrai faire list none ?

  7. Bonjour !
    Comment rajouter la fiche produit (en plus de la page d’accueil) dans le morceau de code :
    « {% if template.name != « index » %}  »

    « {% if template.name != « index && product.page » %}  » ?
    Merci !

  8. Merci pour les tutos!

  9. Salut à toi ! Je suis beaucoup tes conseils pour apprendre le code via Shopify et son .liquid. Je te remercie d’avance pour tes tutos très utiles.

    Cependant, après avoir mit mes propres badges de confiance dans mon footer, toute mes pages se sont complètement décalés. Je ne comprend pas où et comment cela a pu se produire, si tu as une réponse, ça serait parfait.

    Merci !

    PS : J’utilise le thème Début pour m’entrainer.

    1. Hello, merci pour le message 🙂
      Surement un soucis de fermeture de div. essayer de mettre à la fin du code donné un

      
      		                    
  10. {% if template.name != « index » %}
    le code ci-dessus
    {% endif %}

    Je n’ai pas compris ou faut il le placer?

    1. Ce code n’est pas indispensable, c’est seulement si le code doit être que sur l’accueil et donc mettre le code du dessous à la place de « le code c-dessus »

  11. Bonjour,
    Comment peut on réduire la taille des badges ? Ils semblent énormes sur smartphone.

    1. Hello, il faudra utiliser un logiciel de retouche d’image comme photopea pour réduire leur taille

  12. Bonsoir,

    Jai pas trouver le bon endroit pour l’installer et il s’est tout au début , j’ai enlevé les lignes de code mais elles sont restées en dessus du slide les bagdes de confiances .
    Comment faire pour effacer les traces ?
    Merci

    1. Il reste surement une trace des codes quelques part, le mieux et de bien regarder par rapport aux codes d’origines. Sinon reprendre une sauvegarde du thème précédente

  13. alors pour moi sur supply en faisant ça :

    Si vous souhaitez ce footer seulement sur la page d’accueil il vous suffit de mettre le code dans la condition d’affichage suivante:

    {% if template.name != « index » %}
    le code ci-dessus
    {% endif %}

    Je les ai partout SAUF sur la page d’accueil ???

    1. Hello, il faut mettre == au lieu de !=

  14. Pour moi, ce n’est pas centré, tout est décalé sur la gauche, j’ai tout essayé

    1. C’est que le thème n’est pas compatible, lien du site au besoin en MP page Facebook.

  15. Hello ! On le place où le bout de code pour que ça n’apparaisse que sur la home ? Thanks !!

    1. Hello, il faut adapter le tuto et mettre le code dans layout – theme.liquid

  16. bonjour comment réduire la taille des images svp, merci

    1. Hello, avez un logiciel de retouche image comme photoshop ou photopea en ligne 🙂

  17. Salut il y’a une petite erreur d’orthographe dans le badge de paiement sécurisé à « nous utilisont » c’est « nous utilisons » peut tu modifier ? ou bien nous proposer d’autres footers de badges de confiance?
    En tout cas merci pour ton excellent travail, je viens de me lancer et tu m’as été d’une grande aide. Le lien vers mon site si ça t’intéresse de voir : https://raimanta.com/

    1. Merci pour le message, Ok je vais modifier cela merci bcp 🙂

  18. Salut , toujours et encore merci pour les tutos incroyables que tu nous fais partager . Avant de modifier mon pied de page je voulais savoir si on peux choisir que certains badges genres payement sécurisé et livraison en Europe et si éventuellement tu aurais un logo livraison gratuite ? je demande beaucoup désolé ! mais vraiment MERCI mille fois !!!

    1. Hello, merci pour le message 🙂
      Pour avoir pas mal de ressources images de ce genre tu peux même si tu n’as pas le thème speedfly ou funnel installer cette app gratuite ou tu trouvera les images 🙂
      https://speed-ecom.eu/produit/speedecom-app

Laisser un commentaire

Fermer le menu
×
×

Panier