Nous allons voir dans ce tutoriel comment ajouter un pied de page comportant les informations et badges de confiance. En effet 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.
Qu’allons nous réaliser ?
Ce tuto va vous créer 4 colonnes avec les éléments suivants:
Rendez-vous dans les fichiers de votre thème – Boutique en ligne – Actions – Modifier le code et ouvrez le dossier Sections. Cliquez sur Créer une nouvelle section et copié/collé le code ci-dessous ! Pour la suite merci de visionner la version vidéo en cliquant sur le Bouton « Voir la Vidéo ».
Rendez-vous dans les fichiers de votre thème – Boutique en ligne – Actions – 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 { overflow:hidden; clear:both; margin-top:35px; margin-bottom:10px; padding-bottom:0; } #gd-pre-footer .col-item { padding:15px 25px; text-align:center; list-style:none; } #gd-pre-footer center { background:#FFFFFF; } @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> <div class="footer-badges-list"> <div class="col-item"> <div class="text-center"> <img src="https://cdn.shopify.com/s/files/1/2653/6644/files/badge-confiance-shopify-1.png?v=1600760267" style="height: 95px;" alt="" /> <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> </div> <div class="col-item"> <div class="text-center"> <img class="" src="https://cdn.shopify.com/s/files/1/2653/6644/files/badge-confiance-shopify-2.png?v=1600760275" style="height: 95px;" alt="" /> <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> </div> <div class="col-item"> <div class="text-center"> <img class="img90" src="https://cdn.shopify.com/s/files/1/2653/6644/files/badge-confiance-shopify-3.png?v=1600760283" style="height: 95px;" alt="" /> <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> </div> <div class="col-item"> <div class="text-center"> <img class="img90" src="https://cdn.shopify.com/s/files/1/2653/6644/files/badge-confiance-shopify-4.png?v=1600760290" style="height: 95px;" alt="" /> <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> </div> </div> </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 %}
Vous avez un fond foncé ?
Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Dossier Assets – base.css, theme.css, style.css ou autre fichier .css que votre thème utilise- Ouvrez le et tout en bas du fichier collez le code suivant qui vous mettre un fond blanc arrondi sympa sur les images 😉
Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.
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
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 ?
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.
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 »
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
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
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.
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 !!!
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
Bonjour,
super tes tutos et très instructifs !!
Par contre je rencontre un petit problème avec le thème Cascade. Les badges de confiance ne sont pas centrés horizontalement. La marge à gauche est 3 fois plus importante que la marge à droite.
Aurais-tu une solution !?
Bonjour, j’ai fait la manipulation sa mache très bien merci , par contre sa s’affiche sur toutes mes pages et je veux qu’il ne soit que sur l’accueil . j’ai chercher le code {% if template.name == « index » %}
dans le layout mais je ne l’ai pas trouvez ? comment faire svp ? C’est le theme debut.
Hello, si le code n’y est pas il faut le créer et donc l’ajouter 🙂 Y a un tuto la dessus » comment personnaliser sa fiche produit » ou quelque chose comme cela 🙂
Bonjour, j’ai bien mis le code mais le texte qui se trouve en dessous des logos est sur fond noir alors que ma page d’accueille à un fond blanc. comment dois-je mis prendre?
Salut, ça marche pour moi mais j’ai un petit problème : j’utilise product reviews et depuis que je l’ai mis, les avis de product reviews ne s’affiche plus, une idée ? Merci d’avance et parfait ce petit auto
Hello, ca ressemble typiquement à un copier/coller au mauvais endroit. Essayez de supprimer ce que vous avez fait et remettez le à un autre endroit. Bonne chance.
Salut Dgeo, excellent travail !
Ca marche pour moi également, j’ai le thème TUrbo.
Par contre version portable il y a un décalage sur la droite de l »ensemble un peu gênant; à quoi c’est du à ton avis ?
Comment corriger ça ?
Merci d’avance pour ta réponse.
Nicolas
Hello Geoffrey, comment pourrais-je stp réduire la largeur. j’aimerais que les boutons ne soient pas full sur l’ecran mais adaptés à la taille de mon footer qui laisse une marge gauche et à droite. merci par avance
Bonjour, tout marche parfaitement, merci d’ailleurs, seulement je n’arrive pas réduire la marge qu’il y a entre les badges et le pied de page . C’est dommage car cela fait un espace blanc pour rien !
Hello Dgeo,
Très beau travail, ces trust badge apportent une valeur significative à ma boutique,
Cepandant j’ai un petit soucis: Avec le thème simple, j’ai placé le code dans la page de mon « cart » pour avoir les trust badge sur la page panier. Le code s’affiche mais est légèrement décalé sur la droite. Comment puis-je le centre correctement?
Salut Djeo Dev,
Merci pour ton astuce qui m’a servis plus d’une fois.
Mon problème est que j’ai des encadrés blanc sous les badges et je n’en veux pas.
Je veux que les citations soit directement sur le fond de page.
Je précise que c’est la première fois que cela m’arrive peut être a cause de la mise a jour du thème.
Si tu pouvais m’aider je t’en serai vraiment reconnaissant.
Bonne continuation à toi.
Je te remercie.
J’ai bien réussi à l’installer mais je rencontre toujours un problème sur lequel j’aurai besoin d’aide.
Une fois le bout de code inséré, il est bien apparut, mais il apparaissait en dessous de la newsletter ce qui ne faisait pas un bon rendu.
J’ai donc repositionné le bout de code ci dessous en dessous du code que vous nous avez partagé:
{% unless template contains ‘index’ or settings.secondary_newsletter_banner == false %}
{% section ‘newsletter’ %}
{% endunless %}
Résultat: La newsletter est venu se repositionner en dessous des Badges, SAUF pour la page d’accueil ce qui ne donne pas un bon rendu visuel.
J’ai cherché, éssayé différentes choses mais rien à faire …. Avez vous une solution pour positionner ce bout de code juste au dessus de la newsletter et non en dessous pour la page d’accueil ?
Super, un grand merci ça fait vraiment plus pro. J’ai enlevé le service après vente que je ne propose pas sur ce site.
J’adore bidouiller dans le code (bin oui ! à 66 ans on ne peut pas dire que je sois née avec …mais comme j’aime pas tricoter…)
C’est ma première boutique.
Bonjour j’ai un soucis le badge s’affiche parfaitement sur PC , mais sur mobile les images n’apparaissent pas, il n’y a que le texte .
Que faire ?
Merci
J’utilise le thème Brooklyn .
J’ai vraiment pas l’habitude de mettre des commentaires mais cette fois-ci tu m’a réellement rendu service alors que j’ai cherché partout sur internet alors MERCI !
Ah oui d’ailleurs les liens des images que tu as postées ne sont plus disponibles du coup il faut les changer soi-même mais rien de très bon compliqué.
Hello, ca c’est lié au thème, c’est lui qui défini la taille. pour reprendre la main il faudra dans le code à côté du padding:15px 25px; mettre font-size:14px; adapter le 14 selon la taille voulue.
Salut Dgeo !
Super tuto, j’utilise ton code depuis un moment déjà sur mes sites.
2 Questions :
– Est-ce qu’il est possible de rajouter 1 badge ou 2 en plus ?
– Est-ce qu’on peut modifier la couleur du background de la zone genre pour la mettre en noir par exemple ? j’ai essayé de bidouiller mais j’ai pas trouvé.
Hello, merci pour le com 🙂
1. Oui c’est possible mais il faudra adapter le % des colonnes 100 / x colonnes
2. On peut mettre en noir mais les images ne se verront pas très bien donc je déconseille à moins de s’y connaitre en Photoshop 😉
Slt Dgeo!
Merci pour tes codes et tout ce que tu apporte en contenu.
Juste pour simplifier l’utilisation de ton code ( si ça n’a pas encore été suggéré ) :
Au lieu de copier le code dans le thème au risque de la casser, il y a section code html personnalisé dans la partie personnalisation du thème, fournie par shopify.
C’est beaucoup plus simple je trouve et il y a moins de risque de casser le thème.
Aussi, cette section est disponible sur des pages uniques, en gros quand tu l’installe sur la page d’accueil ça reste sur la page d’accueil uniquement. Pour le mettre ailleurs il suffit de cliquer sur le produit, le cart ou autre.
J’espère avoir été concis et dsl pour les fautes au passage.
Bonnes ventes à tous!
Hello et merci pour le message. Alors oui sur speedfly par exemple cette zone existe mais pas sur tous les thèmes et notamment les free de shopify que la plupart des personnes utilisent 😉 mais oui c’est clair que c’est mieux :). Bonne soirée.
Hello et merci pour toutes tes aides !
Moi j’aimerai plutôt le mettre sur toutes les pages SAUF sur la page d’accueil ! Si tu as une solution je suis preneur !?
MERCI !
Bonjour et merci pour tes tutos !
Aurais-tu un tuto pour pour ajouter les logos de sécurité sur le checkout de shopify ?
Sur ma page produit c’est ok mais impossible de trouver la solution pour le checkout :/
Merci d’avance pour ton aide 🙂
Super tuto merci !! pourrais tu m’aider ? Saurais-tu comment mettre des liens url direct à chaque badge ? (exemple : lorsque l’on clique sur le badge « satisfait ou remboursé » on tombe sur une page où tout est expliqué )
Hello merci pour les explications !
As-tu la possibilité de me montrer comment changer la couleur du texte pour la passer en noir en dessous de chaque badges ?
Merci beaucoup ! 🙂
Hello, grand merci pour tous ces tuto, c’est superbe ! Une question, est-il possible de changer les icônes proposés ? Si oui, une vidéo auto disponible ?
Merci !
Hello et merci pour le message 🙂 il suffit de changer les url des images. il est possible des les importer sur shopify dans param – fichiers – et ensuite de prendre l’url de chaque image et de les modifier.
J’ai le titre de chaque badges (Livraison en Europe, Satisfait ou remboursé…)qui ne sont pas centrés par rapport au badge et le texte du dessous, peux tu me dire comment le centrer stp?
Merci!
Hello, alors la c’est le thème qui doit reprendre la main, il faudra essayer sur chaque balise h3 de mettre avant le texte des titres ceci < center >titre< /center > (enlever les espaces)
Bonjour,
après que j’ai installer ce footer sur mon thème shopify, sur ma boutique apparait ce code:
theme.productStrings = { addToCart: « Ajouter au panier », soldOut: « Épuisé », unavailable: « Non disponible » }
Que dois-je faire pour remédier cela?
Hum c’est une erreur js, je pense que le code n’a pas été coller au bon endroit. faudra essayer de revenir sur la version dupliquée ou supprimer le code du tuto et recommencer 🙂
Salut,
Je suis passé du thème Debut sur lequel tout allait bien au thème Turbo.. J’ai réinstallé les badges mais ils sont légèrement décallés sur la droite. J’ai essayé de bidouiller mais impossible de les centrer.. J’ai consulté tous les commentaires mais pas trouvé de solution à mon problème. Pourrais-tu m’indiquer la manip à effectuer ?
Merci
Bonjour Dgeo!
Merci beaucoup! Super site et très bon tutos !
Ce dernier fonctionne parfaitement et j’en suis ravi!
Petite question, pensez-vous qu’il soit possible, facilement, de le faire afficher sur mobile et tablette non pas chaque éléments à la ligne mais plutôt 2 dans la largeur soit 2 hauteurs seulement?
Avec cette modif, l’affichage mobile est parfait ( 2 par 2) par contre affichage ordi montre un logo par ligne.
serait il possible d’avoir le code en entier svp?
Hello, il est surement pas mis au bon endroit 🙂 essaie d’écrite des toto1 toto2 dans ton fichier afin de repérer le bon emplacement. ensuite coller le code html à cet endroit
Bonjour,
Il y a un grand espace blanc qui s’est créé entre mon bandeau newsletter, juste au dessus, et ce pré-footer. Comment réduire cet espace vide ? De même que j’ai un trait de séparation entre ces 2 mêmes éléments ? Merci de votre aide
Bonjour, alors c’est les espaces et séparations natives du thème. Il faudrait donc voir directement avec le support de celui ci et il pourront vous indiquer un petit hack pour supprimer cela sur une section bien précise 🙂 Bonne journée.
Bonjour,
Je voudrais modifier la couleur du texte du code pour la mettre en noir mais je ne trouve pas comment faire (Le texte du code est de la même couleur que celle de mes titres/liens de mon thème)
Très bon rendu sur pc donc merci, par contre sur mobile c’est pas totalement responsive, le texte et logo ne sont pas centrés, si jamais tu pourrais m’aider par rapport à ça ça serait top, merci! (Avec rémunération évidemment)
Hello et merci pour le commentaire. Pour l’effet centré c’est surement votre thème qui reprend la main au besoin je peux intervenir dans ce cas vous pouvez utiliser le chatbot messenger du site pour que l’on voit ca ensemble.
Bonjour,
Quand on passe sur téléphone avec un le thème sombre on ne voit presque plus les badges.
Est-il possible de changer la couleur du background de cette partie du pied de page ?
Bonjour, le mieux est de trouver des imaegs ou de les retraiter sous photoshop et les mettre en blanc. Sinon mettre un background en css sur la section ou zone. pour cela vous pouvez regarder ma chaine qui vous expliquera comment faire.
Bonjour, je viens d’adhérer a vos vidéos elles sont top!
je viens d’insérer le code à la bonne place, j’ai retiré un logo, donc j’en ai 3. par contre même en mettant 33% ça ne se recentre pas.
Bonjour, est-il possible de mettre ce code sur une fiche produit juste au-dessus de la description ? j’ai essayé de voir où je pourrai l’insérer mais je ne vois pas. Merci
Bonjour,
Tout d’abord merci pour tous vos tutos de très bonne qualité !
Je rencontre le même pb que bcp de personnes, mes badges sont légèrement décalés vers la droite. J’ai essayé de bidouillé le code, de le déplacer mais cela ne fonctionne pas. Pour info, j’utilise le thème Venue.
J’ai essayé de vous contacter via Messenger mais je n’y arrive pas.
Pouvez-vous m’envoyer le bout de code qui peut résoudre ce pb si vous le connaissez.
Ou sinon me contacter via mon mail.
Merci beaucoup incroyable j’ai réussit ! moi qui n’y connais rien en informatique. de plus, les logo sont vraiment les plus beau que j’ai pu trouvé. merci milles foooois
Bonjour tout d’abord merci pour ce tutoriel, cependant j’aimerais changé la couleurs des logo est ce possibles ? si oui comment faire ? merci d’avance !
Bonjour et merci pour ce tuto génial 🙂
J’aimerai que le code fonctionne sur toutes mes pages sauf deux: 1 page produit et 1 page spécifique.
J’y suis arrivé pour la page produit mais impossible d’imbriquer la page spécifique…
Voici mon code:
{% if product.id != 6174701584577 && page.id != 74768220353 %}
Pouvez-vous m’aider s’il vous plait?
Merci par avance 🙂
Hello, c’était presque ça bravo ! mais il faut un or au lien d’un and 🙂 donc {% if product.id != 6174701584577 or page.id != 74768220353 %} car le code actuel veut dire qu’il faut afficher le footer sauf si on est en même temps sur un produit spécifique et une page spécifique ce qui est donc impossible
Salut Dgeo,
super tuto !!!!
Je voulais savoir un truc. sur ta page de Démo les images arrivent les unes après les autres. (ca fais super joli) .. comment fais tu cela ?
Salut , peux être que la question à déjà été posé mais j’avoue qu’il y a un paquet de commentaires … C’est très simple pourtant il m’arrive quand même d’avoir deux petit problèmes ,
le premier : quand j’appui sur maj et tabulation la mise en forme ne se fait pas ( je ne sais pas si ca a un impact sur l’affichage sur le site )
deuxième problèmes : Sur tout mes shops , que ce soit sur mobile ou Pc mes icone sont centré mais avec légèrement + sur la droite ( sur mobile c’est plus flagrant) elle ne sont pas hyper au centre de l’écrans . aurait tu quelque chose pour y remédier ? merci bcp .
Hello, alors c’est selection de la zone ctrl + A et ensuite maj + tab – pour le décalage cela vient du thème 🙂 il faut reset les marges des grilles – je vais essayer d’améliorer le code pour éviter ces soucis 🙂 au besoin reprendre le code à partir de demain matin 😉
Bonjour, merci beaucoup pour cette vidéo ! J’ai par ailleurs une petite question, j’ai changé le width à 15% car je préfère le rendu au niveau de la taille, mais je n’arrive pas à changer le code pour que ce soit centré sur la page ( les badges se collent à droite de la page). Merci par avance pour votre réponse ! 🙂
Hello, dans ce cas il faudrait trouver une image adaptée et l’héberger dans les fichiers de votre boutique et remplacer l’url de l’image par celle générée par shopify dans le src du code de l’image à remplacer 🙂
Salut je voudrais savoir comment mettre les badges uniquement sur mes pages produits et uniquement sur la page d’accueil .
Sachant que mon thème est impulse .
Merci encore pour t’es tutos ✔
Bonjour, merci beaucoup pour ce super tuto qui ajoute une touche plus pro à nos sites 😀
Je voulais savoir comment faire sur la version mobile pour que les icônes se placent plutôt sur 2 lignes de 2 plutot que les 4 a la suite ca mange de la place je trouve .. Merci !!
je viens juste de tomber sur le video et c’est bien fait vraiment, j’aimerai savoir si on peut changer la langue du texte et le faire en espagnole . merci
Merci pour ce tuto, ça rend vraiment bien.J’aurais une petite question: est-ce que l »on peut insérer du texte alt dans le code des images, car depuis que je l’ai mis en place les logiciels type seranking ou semrush relève des erreurs car il n’y a pas de texte alt.Merci
Bonjour, oui c’est possible sur shopify en éditant les images 🙂 sur mon code par contre les alt sont vides car les images n’ont pas un but SEO mais de design 😉 donc le lat doit etre présent mais rester vide pour la bonne pratique et indiquer à google que c’est visuel
ok j’ai trouvé donc dans THEME.LIQUID dans les style du SRC rajouter: background: #FFFFFF; border-radius: 95px; cela fonctionne!
petite bizarerie certaine image sont plus ovales et d’autres bien rondes a voir! mais les fonds est bien blanc en mobile et en pc merci! félicitation pour votre travail!!
Bonjour,
J’ai fait tout ce qui était indiqué dans la vidéo, mais quand je vais dans SECTIONS pour ajouter les badges, ils ne sont pas la. Merci d’avance pour la réponse
Bonjour, oui c’est possible. Titre et texte ? si oui c’est au niveau du css du code du tuto qu’il faut intervenir en ajoutant un color:nomdelacouleurhexadecimale.
Au besoin je propose un service d’installation de mini intervention ou hack personnalisé à 9e 🙂 si intéressé me contacter ici : dgeodev@gmail.com
Emma
30 Jan 2019Merci pour tes tutos!
Dgeo Dev
9 Août 2019Hello, merci 😉
rami
30 Jan 2019je veux le logo en anglais non en francais
Dgeo Dev
31 Jan 2019Hello, faudra donc en trouver et remplacer les src (lien) vers l’image dans le code 😉
Pipounn
30 Jan 2019Salut, y’a t’il moyen d’enlever les point entre chaque badge ?
Dgeo Dev
31 Jan 2019Hello, les points ? euh y a pas de points 🙂 surement une interprétation de ton thème.
jo87
31 Jan 2019hello, pareil moi j’ai les point
Benat
1 Fév 2019Si 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
Benat
1 Fév 2019Tu vas sur themecssliquid et tu rajoutes :
.col-item {
list-style: none;
}
( désolé de tout ces commentaires )
nathan
30 Jan 2019Hello,
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 !
jo87
31 Jan 2019.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.
Benat
1 Fév 2019Petite 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 ?
Lucas
3 Fév 2019Bonjour !
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 !
Bilal
5 Fév 2019Merci pour les tutos!
Steven
10 Fév 2019Salut à 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.
Dgeo Dev
20 Fév 2019Hello, merci pour le message 🙂
Surement un soucis de fermeture de div. essayer de mettre à la fin du code donné un
nico
16 Fév 2019{% if template.name != « index » %}
le code ci-dessus
{% endif %}
Je n’ai pas compris ou faut il le placer?
Dgeo Dev
20 Fév 2019Ce 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 »
Sarah
17 Fév 2019Bonjour,
Comment peut on réduire la taille des badges ? Ils semblent énormes sur smartphone.
Dgeo Dev
20 Fév 2019Hello, il faudra utiliser un logiciel de retouche d’image comme photopea pour réduire leur taille
Nina
18 Fév 2019Bonsoir,
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
Dgeo Dev
20 Fév 2019Il 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
nicolas
18 Fév 2019alors 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 ???
Dgeo Dev
20 Fév 2019Hello, il faut mettre == au lieu de !=
Johan
19 Fév 2019Pour moi, ce n’est pas centré, tout est décalé sur la gauche, j’ai tout essayé
Dgeo Dev
20 Fév 2019C’est que le thème n’est pas compatible, lien du site au besoin en MP page Facebook.
Caroline
27 Fév 2019Hello ! On le place où le bout de code pour que ça n’apparaisse que sur la home ? Thanks !!
Dgeo Dev
6 Mar 2019Hello, il faut adapter le tuto et mettre le code dans layout – theme.liquid
boutique
4 Mar 2019bonjour comment réduire la taille des images svp, merci
Dgeo Dev
6 Mar 2019Hello, avez un logiciel de retouche image comme photoshop ou photopea en ligne 🙂
fall
12 Mar 2019Salut 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.
Dgeo Dev
13 Mar 2019Merci pour le message, Ok je vais modifier cela merci bcp 🙂
Monchi
27 Mar 2019Salut , 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 !!!
Dgeo Dev
7 Avr 2019Hello, 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
dylan
3 Mai 2019comment peut on modifier la taille svp je galere
merci d avance
Dgeo Dev
7 Mai 2019Hello, ca dépend de ton thème pour le coup, sinon rajoute en dessous de width:25%; mettre font-size:13px; (modifier le 13 par la valeur voulue)
Gael
18 Mai 2019Bonjour,
super tes tutos et très instructifs !!
Par contre je rencontre un petit problème avec le thème Cascade. Les badges de confiance ne sont pas centrés horizontalement. La marge à gauche est 3 fois plus importante que la marge à droite.
Aurais-tu une solution !?
Merci à toi !
Suzy
6 Juin 2019Bonjour, j’ai fait la manipulation sa mache très bien merci , par contre sa s’affiche sur toutes mes pages et je veux qu’il ne soit que sur l’accueil . j’ai chercher le code {% if template.name == « index » %}
dans le layout mais je ne l’ai pas trouvez ? comment faire svp ? C’est le theme debut.
Dgeo Dev
12 Juin 2019Hello, si le code n’y est pas il faut le créer et donc l’ajouter 🙂 Y a un tuto la dessus » comment personnaliser sa fiche produit » ou quelque chose comme cela 🙂
Adrien
13 Juin 2019Bonjour, j’ai bien mis le code mais le texte qui se trouve en dessous des logos est sur fond noir alors que ma page d’accueille à un fond blanc. comment dois-je mis prendre?
Dgeo Dev
18 Juin 2019Bonjour, c’est à cause du thème qui met cette couleur sur les balises center me semble t-il, il faut donc faire un petit hack css
Louka
14 Juin 2019Salut, ça marche pour moi mais j’ai un petit problème : j’utilise product reviews et depuis que je l’ai mis, les avis de product reviews ne s’affiche plus, une idée ? Merci d’avance et parfait ce petit auto
Dgeo Dev
18 Juin 2019Hello, ca ressemble typiquement à un copier/coller au mauvais endroit. Essayez de supprimer ce que vous avez fait et remettez le à un autre endroit. Bonne chance.
Cvprovence
19 Juin 2019Bonjour, je ne parviens pas à faire en sorte que les badges prennent la largeur de la page. Sauriez-vous m’indiquer ?
Merci d’avance.
Nicolas
22 Juin 2019Salut Dgeo, excellent travail !
Ca marche pour moi également, j’ai le thème TUrbo.
Par contre version portable il y a un décalage sur la droite de l »ensemble un peu gênant; à quoi c’est du à ton avis ?
Comment corriger ça ?
Merci d’avance pour ta réponse.
Nicolas
NEKCER
24 Juin 2019Bonjour j’aimerais que ce code ne s’affiche sur ma page « guide des tailles » comment puis je le retiré. Merci
dripro
27 Juin 2019Hello Geoffrey, comment pourrais-je stp réduire la largeur. j’aimerais que les boutons ne soient pas full sur l’ecran mais adaptés à la taille de mon footer qui laisse une marge gauche et à droite. merci par avance
Dgeo Dev
28 Juin 2019Hello, difficile à dire comme cela… au besoin contact moi en MP messenger 😉
Razik
1 Juil 2019Merci ça marche pour moi, comment je peu changer la couleur du fond?
razik
3 Juil 2019Merci pour le tuto, comment je fais pour modifié la couleur du fond
Dgeo Dev
5 Juil 2019Hello, c’est une image donc avec photoshop ou photopea ou autres logiciels de retouche d’images
razik
6 Juil 2019Bonjour, merci pour la réponse, je ne sais comment le faire (je parle de la couleur du fond du pré_footer pas des icônes des badges )
Dgeo Dev
14 Juil 2019Hello, MP moi sur Facebook le lien du site je te donnerai un hack 😉
Antoine
7 Juil 2019Bonjour, tout marche parfaitement, merci d’ailleurs, seulement je n’arrive pas réduire la marge qu’il y a entre les badges et le pied de page . C’est dommage car cela fait un espace blanc pour rien !
Dgeo Dev
14 Juil 2019Bonjour, la c’est dépend du thème 🙁 MP au besoin pour voir si il existe un moyen de réduire ces espaces 😉
Jérémie
30 Juil 2019Bonjour, de mon côté les liens (img) apparaissent comme cassé au niveau de ma page index, sauf le premier.
Est-ce normal?
Dgeo Dev
4 Août 2019Hello, étrange, non ce n’est pas normal, au besoin link moi le lien de ton site en MP Facebook
Jennifer Lacourt
21 Août 2019Hello Dgeo,
Très beau travail, ces trust badge apportent une valeur significative à ma boutique,
Cepandant j’ai un petit soucis: Avec le thème simple, j’ai placé le code dans la page de mon « cart » pour avoir les trust badge sur la page panier. Le code s’affiche mais est légèrement décalé sur la droite. Comment puis-je le centre correctement?
Je te remercie d’avance.
Dgeo Dev
21 Août 2019Hello, merci pour le message. Au besoin link moi le site en MP et je te donnerai un hack 🙂
Antoine
3 Sep 2019Salut Djeo Dev,
Merci pour ton astuce qui m’a servis plus d’une fois.
Mon problème est que j’ai des encadrés blanc sous les badges et je n’en veux pas.
Je veux que les citations soit directement sur le fond de page.
Je précise que c’est la première fois que cela m’arrive peut être a cause de la mise a jour du thème.
Si tu pouvais m’aider je t’en serai vraiment reconnaissant.
Bonne continuation à toi.
Je te remercie.
Dgeo Dev
3 Sep 2019Hello, merci pour le commentaire 🙂
Il suffit dans le tuto de trouver la partie : background:#FFFFFF et de remplacer par background:none
Bonne soirée
Paul
4 Sep 2019Salut Dgeo et merci c’est top !
Je souhaite simplement modifier la livraison europe par : nous livrons partout dans le monde !
Y-a-t-il un moyen ?
De plus j’ai remplacer la partie : background:#FFFFFF et de remplacer par background:none
pour le pied de page mais ca ne marche pas. Bonne journée continue comme ca
Dgeo Dev
11 Sep 2019Hello, dans ce cas me MP pour regarder ensemble 😉
Karl
17 Sep 2019Bonjour,
Merci pour ce bout de code !
J’ai bien réussi à l’installer mais je rencontre toujours un problème sur lequel j’aurai besoin d’aide.
Une fois le bout de code inséré, il est bien apparut, mais il apparaissait en dessous de la newsletter ce qui ne faisait pas un bon rendu.
J’ai donc repositionné le bout de code ci dessous en dessous du code que vous nous avez partagé:
{% unless template contains ‘index’ or settings.secondary_newsletter_banner == false %}
{% section ‘newsletter’ %}
{% endunless %}
Résultat: La newsletter est venu se repositionner en dessous des Badges, SAUF pour la page d’accueil ce qui ne donne pas un bon rendu visuel.
J’ai cherché, éssayé différentes choses mais rien à faire …. Avez vous une solution pour positionner ce bout de code juste au dessus de la newsletter et non en dessous pour la page d’accueil ?
Merci à vous
Dgeo Dev
18 Sep 2019Hello, le mieux pour trouver une solution est d’en discuter directement sur facebook 🙂
internet
18 Sep 2019bonjour,
2 images ne s’affichent plus dans mes badges de confiance, satisfait remboursé et paiement sécurisé . puis je avoir de l’aide merci.
Dgeo Dev
18 Sep 2019Bonjour, Pourtant pas de soucis de mon côté 🙂 https://dgeodev.myshopify.com/
Au besoin MP sur Facebook 😉
Jo
24 Sep 2019Bonjour,
Il y a un problème au niveau du logo service après-vente qui ne s’affiche plus .
Dgeo Dev
26 Sep 2019Hello, c’est des soucis temporaires cdn shopify il suffit de réactualiser la page ctrl + F5 🙂
Jo
27 Sep 2019Même en réactualisant ça ne change rien, l’image service après vente n’apparaît plus !
Dgeo Dev
27 Sep 2019Bonsoir, effectivement soucis de cache, j’ai donc changé de serveur de chargement des images 😉 il faudra donc reprendre le nouveau code du tuto 😉
Nono
1 Oct 2019Bonsoir pour moi ça fonctionne nickel merci
Mais j’aimerais qu’il ne soit pas complètement en bas de page est ce possible de le remonter ?
Dgeo Dev
2 Oct 2019Hello, parfait, oui il suffit de le placer à un autre endroit du fichier
Jo
30 Sep 2019c’est ok maintenant, merci !
Dgeo Dev
30 Sep 2019Parfait 😉 de rien bonne journée.
Andriano
2 Oct 2019Un tuto bien décrit car j’ai réussi à le faire rapidement. Encore merci
Fouad
10 Oct 2019Bonjour,
Si je veux en mettre que trois et centrer,
Tu sais comment faire ?
Merci pour le tuto
Dgeo Dev
14 Oct 2019Hello, il suffit de trouver la partie de code : 25% et de modifier en 33%
CorinneAkTosi
17 Oct 2019Super, un grand merci ça fait vraiment plus pro. J’ai enlevé le service après vente que je ne propose pas sur ce site.
J’adore bidouiller dans le code (bin oui ! à 66 ans on ne peut pas dire que je sois née avec …mais comme j’aime pas tricoter…)
C’est ma première boutique.
Dgeo Dev
18 Oct 2019Je vous en prie, c’est super ! un grand bravo à vous et bonne continuation pour votre boutique !
Hana
21 Oct 2019MERCI BCP !!! 🙂
Luis
16 Nov 2019Salut merci beaucoup pour tes tutos !
Comment je pourrais faire pour centrer les 3 images, car j’ai enlever un badge ?
#gd-pre-footer { overflow:hidden; clear:both; margin-top:35px; margin-bottom:10px; padding-bottom:0; }
#gd-pre-footer .col-item { padding:15px 25px; text-align:center; list-style:none; }
#gd-pre-footer center { background:#FFFFFF; }
@media screen and (min-width: 768px) {
#gd-pre-footer .col-item {
width:25%;
text-align:center;
float:left;
padding:15px 15px;
}
}
Livraison en Europe
Vous n’habitez pas en France ? Pas de problème, nous livrons partout en Europe !
Service Après Vente
Besoin d’aide ? Nous sommes à votre service du lundi au vendredi
Paiement sécurisé
Nous utilisons le cryptage SSL pour des paiements en toute sécurité
Dgeo Dev
19 Nov 2019Hello, merci pour le commentaire. je l’explique ici 😉 https://youtu.be/3WQQoKWrfSI?t=213 bonne soirée
James
18 Nov 2019Bonjour,
Merci beaucoup en effet pour ce tutoriel!
Vous avez le même pour rajouter un logo dans le footer a gauche ou bien centré?
Merci!
Dgeo Dev
19 Nov 2019Bonsoir, merci pour le message ! Non navré mais je note l’idée 😉 bonne soirée.
Romain
19 Nov 2019Bonjour j’ai un soucis le badge s’affiche parfaitement sur PC , mais sur mobile les images n’apparaissent pas, il n’y a que le texte .
Que faire ?
Merci
J’utilise le thème Brooklyn .
Dgeo Dev
19 Nov 2019Bonsoir, étrange ! la je ne sais pas au besoin linker le lien du site sur mon Facebook 🙂
David
20 Nov 2019J’ai vraiment pas l’habitude de mettre des commentaires mais cette fois-ci tu m’a réellement rendu service alors que j’ai cherché partout sur internet alors MERCI !
David
20 Nov 2019Ah oui d’ailleurs les liens des images que tu as postées ne sont plus disponibles du coup il faut les changer soi-même mais rien de très bon compliqué.
Dgeo Dev
20 Nov 2019Hello, oui en migration cette semaine 🙂 elles sont de nouveau disponibles
Dgeo Dev
20 Nov 2019Hello, merci c’est sympa 😉
yoyo
20 Nov 2019Bonjour et merci pour tes tutos!
J’ai le thème simple et les images ne s’affichent pas.
Une idée s’il te plaît?
Dgeo Dev
20 Nov 2019Hello, oui en migration cette semaine elles sont de nouveau disponibles
Corinne
20 Nov 2019Attention, l’adresse des images a changé dans shopify apparemment.
Il faudra sans doute modifier ces adresses dans le code
Dgeo Dev
20 Nov 2019Hello, oui merci 🙂 en migration cette semaine elles sont de nouveau disponibles
Hamza Lahlou
28 Nov 2019Bonjour, j’ai bien appliqué le code mais j’ai un soucis au niveau de la taille d’écriture y’a t’il une possibilité de réduire la taille ?
Dgeo Dev
30 Nov 2019Hello, ca c’est lié au thème, c’est lui qui défini la taille. pour reprendre la main il faudra dans le code à côté du padding:15px 25px; mettre font-size:14px; adapter le 14 selon la taille voulue.
fbaien
28 Nov 2019Merci Dgeo Dev Toujours au Top
josephine
2 Déc 2019Nickel même avec un thème prémium merci beaucoup!
Adam
8 Déc 2019Salut Dgeo !
Super tuto, j’utilise ton code depuis un moment déjà sur mes sites.
2 Questions :
– Est-ce qu’il est possible de rajouter 1 badge ou 2 en plus ?
– Est-ce qu’on peut modifier la couleur du background de la zone genre pour la mettre en noir par exemple ? j’ai essayé de bidouiller mais j’ai pas trouvé.
Dgeo Dev
10 Déc 2019Hello, merci pour le com 🙂
1. Oui c’est possible mais il faudra adapter le % des colonnes 100 / x colonnes
2. On peut mettre en noir mais les images ne se verront pas très bien donc je déconseille à moins de s’y connaitre en Photoshop 😉
Jerry
12 Déc 2019Slt Dgeo!
Merci pour tes codes et tout ce que tu apporte en contenu.
Juste pour simplifier l’utilisation de ton code ( si ça n’a pas encore été suggéré ) :
Au lieu de copier le code dans le thème au risque de la casser, il y a section code html personnalisé dans la partie personnalisation du thème, fournie par shopify.
C’est beaucoup plus simple je trouve et il y a moins de risque de casser le thème.
Aussi, cette section est disponible sur des pages uniques, en gros quand tu l’installe sur la page d’accueil ça reste sur la page d’accueil uniquement. Pour le mettre ailleurs il suffit de cliquer sur le produit, le cart ou autre.
J’espère avoir été concis et dsl pour les fautes au passage.
Bonnes ventes à tous!
Dgeo Dev
12 Déc 2019Hello et merci pour le message. Alors oui sur speedfly par exemple cette zone existe mais pas sur tous les thèmes et notamment les free de shopify que la plupart des personnes utilisent 😉 mais oui c’est clair que c’est mieux :). Bonne soirée.
sire
13 Déc 2019Moi je l’ai mis en haut de la page mais il prend un peu de place comment je peux faire pour réduire sa taille
Dgeo Dev
16 Déc 2019Hello, il faudrait limiter la largeur sur conteneur parent #gd-pre-footer { juste après rajouter : max-width:1170px; margin: 0 auto;
laurent
17 Déc 2019Hello et merci pour toutes tes aides !
Moi j’aimerai plutôt le mettre sur toutes les pages SAUF sur la page d’accueil ! Si tu as une solution je suis preneur !?
MERCI !
Dgeo Dev
19 Déc 2019Hello, faire une condition inverse alors:
{% if template.name != « index » %}
le code ci-dessus
{% endif %}
Anais
16 Jan 2020Bonjour et merci pour tes tutos !
Aurais-tu un tuto pour pour ajouter les logos de sécurité sur le checkout de shopify ?
Sur ma page produit c’est ok mais impossible de trouver la solution pour le checkout :/
Merci d’avance pour ton aide 🙂
Dgeo Dev
16 Jan 2020Hello, ce n’est malheureusement plus possible depuis le 1er février 2019 ou Shopify a interdit l’accès 🙁
Brice
26 Jan 2020Salut !
Super tuto merci !! pourrais tu m’aider ? Saurais-tu comment mettre des liens url direct à chaque badge ? (exemple : lorsque l’on clique sur le badge « satisfait ou remboursé » on tombe sur une page où tout est expliqué )
Dgeo Dev
26 Jan 2020Hello, oui il faut englober la balise img d’aun lien de type href. tu peux te renseigner sur google en tapant lien href html 😉
Thomas
20 Fév 2020Hello merci pour les explications !
As-tu la possibilité de me montrer comment changer la couleur du texte pour la passer en noir en dessous de chaque badges ?
Merci beaucoup ! 🙂
Dgeo Dev
21 Fév 2020Hello, vu ensemble en MP il me semble 😉
Jules BOUGARD
9 Mar 2020salut ! si je veux changer les logos comment ça se passe ? merci !
Dgeo Dev
10 Mar 2020Hello, il faut changer l’url des images dans l’attribut src 🙂
Richard
10 Mar 2020Hello, grand merci pour tous ces tuto, c’est superbe ! Une question, est-il possible de changer les icônes proposés ? Si oui, une vidéo auto disponible ?
Merci !
Dgeo Dev
13 Mar 2020Hello et merci pour le message 🙂 il suffit de changer les url des images. il est possible des les importer sur shopify dans param – fichiers – et ensuite de prendre l’url de chaque image et de les modifier.
chris
12 Mar 2020Salut,
Merci pour les différents partages.
J’ai le titre de chaque badges (Livraison en Europe, Satisfait ou remboursé…)qui ne sont pas centrés par rapport au badge et le texte du dessous, peux tu me dire comment le centrer stp?
Merci!
Dgeo Dev
13 Mar 2020Hello, alors la c’est le thème qui doit reprendre la main, il faudra essayer sur chaque balise h3 de mettre avant le texte des titres ceci < center >titre< /center > (enlever les espaces)
Aderya
22 Mar 2020Salut, tout d’abord merci. Je trouve que ca prend énormément de place, il n’y a pas une possibilité de réduire la largeur ? Merci
Dgeo Dev
23 Mar 2020Hello et merci pour le message, alors pour cette partie cela dépend essentiellement du thème. Il faut voir le type de conteneur qu’il utilise.
diagne
28 Mar 2020bonjour est ce que c est possible de l avoir en anglais , merci pour le trust badge
Dgeo Dev
29 Mar 2020Hello, non navré je n’ai pas les images en anglais
Lanceï Condé
30 Mai 2020Bonjour,
après que j’ai installer ce footer sur mon thème shopify, sur ma boutique apparait ce code:
theme.productStrings = { addToCart: « Ajouter au panier », soldOut: « Épuisé », unavailable: « Non disponible » }
Que dois-je faire pour remédier cela?
Dgeo Dev
1 Juin 2020Hum c’est une erreur js, je pense que le code n’a pas été coller au bon endroit. faudra essayer de revenir sur la version dupliquée ou supprimer le code du tuto et recommencer 🙂
diagne
30 Mar 2020merci
Benjamin
10 Avr 2020Salut,
Je suis passé du thème Debut sur lequel tout allait bien au thème Turbo.. J’ai réinstallé les badges mais ils sont légèrement décallés sur la droite. J’ai essayé de bidouiller mais impossible de les centrer.. J’ai consulté tous les commentaires mais pas trouvé de solution à mon problème. Pourrais-tu m’indiquer la manip à effectuer ?
Merci
Dgeo Dev
10 Avr 2020Hello, je pense que le code n’est pas coller au bout endroit dans le fichier. Essayer plus bas sinon me linker l’url en MP.
Riz
1 Mar 2021Bonsoir, j’ai le même problème que Benjamin. Peux-tu m’indiquer la manip stp ?
lukas
14 Avr 2020Bonjour, je voulais savoir comment inclure ma page produit au footer? STP
Dgeo Dev
15 Avr 2020Hello, navré mais cela me semble non recommandé 🙂
Mouctar
18 Avr 2020helllo merci beaucoup pour cette formation grace a toi jai pu metre ma boutique en valeur
JoWb
20 Avr 2020Bonjour Dgeo!
Merci beaucoup! Super site et très bon tutos !
Ce dernier fonctionne parfaitement et j’en suis ravi!
Petite question, pensez-vous qu’il soit possible, facilement, de le faire afficher sur mobile et tablette non pas chaque éléments à la ligne mais plutôt 2 dans la largeur soit 2 hauteurs seulement?
Merci d’avance et bonne continuation
Dgeo Dev
20 Avr 2020Hello et merci pour le message 🙂 oui en ajoutant dans le premier #gd-pre-footer .col-item { width:50%; …etc…
JoWb
20 Avr 2020C’est normal 🙂 Il faut savoir remercier !
Alors ça n’a pas fonctionné tel que je le voulais, (mais ça m’a dirigé vers la solution) du coup j’ai réussi en rajoutant ce code :
@media screen and (max-width: 600px) {
#gd-pre-footer .col-item {
width:50%;
text-align:center;
float:left;
padding:5px 15px;
}
}
Dgeo Dev
20 Avr 2020Yes bravo ! c’était ça effectivement je me suis trompé c’était bien la 2ème occurrence qu’il fallait prendre en compte ! bravo 😉
Julien Lescure
8 Nov 2020Merci beaucoup!!!!
Avec cette modif, l’affichage mobile est parfait ( 2 par 2) par contre affichage ordi montre un logo par ligne.
serait il possible d’avoir le code en entier svp?
William
27 Déc 2020En faisant ça mes images deviennent ovales, comme écrasées sur les côtés..
Mahmoud MOUTAOUKIL
21 Avr 2020Merci pour les tutos.
simao
21 Avr 2020bonjour merci pour votre tutos par contre c’est quoi le bouton qu’on doit appuyer pour bien mettre le code on ordre
Dgeo Dev
23 Avr 2020Hello, maj + tabulation
Lilo
3 Juin 2020Salut merci pour le tuto
Mais cela ne marche pas chez moi. J’ai suivi le tutoriel à la lettre mais rien ne s’affiche
Dgeo Dev
4 Juin 2020Hello, il est surement pas mis au bon endroit 🙂 essaie d’écrite des toto1 toto2 dans ton fichier afin de repérer le bon emplacement. ensuite coller le code html à cet endroit
Prescillia Felicite
2 Juil 2020avec mon thème narrative j’arrive pas a le mettre sais normal ?
Dgeo Dev
2 Juil 2020Hello, c’est compatible tout thème donc il faut persévérer ou me MP le lien du site pour voir
seb
22 Juil 2020Salut prescillia! J’ai eu le même problème ! Mais j’ai réussi en modifiant la première ligne comme ça :
#gd-pre-footer { overflow:hidden; clear:both; margin-top:-400px; margin-bottom:500px; padding-bottom:0; }
J’espère que ça marchera pour toi aussi !
Venom
25 Juil 2020Bonjour,
Merci pour le tuto. Y-a-t-il un moyen de modifier la couleur des badges ?
Merci.
Dgeo Dev
29 Juil 2020Hello, oui en modifiant les images sous photoshop
Cecile Isambard
9 Sep 2020Bonjour,
Il y a un grand espace blanc qui s’est créé entre mon bandeau newsletter, juste au dessus, et ce pré-footer. Comment réduire cet espace vide ? De même que j’ai un trait de séparation entre ces 2 mêmes éléments ? Merci de votre aide
Dgeo Dev
10 Sep 2020Bonjour, alors c’est les espaces et séparations natives du thème. Il faudrait donc voir directement avec le support de celui ci et il pourront vous indiquer un petit hack pour supprimer cela sur une section bien précise 🙂 Bonne journée.
Théodore RIBOT
10 Sep 2020Bonjour,
Je voudrais modifier la couleur du texte du code pour la mettre en noir mais je ne trouve pas comment faire (Le texte du code est de la même couleur que celle de mes titres/liens de mon thème)
Dgeo Dev
11 Sep 2020Hello, ca dépend des paramètres de votre thème. idéalement demander au support de celui ci de vous aider 🙂 bonne journée
William
27 Déc 2020J’ai rajouté : #gd-pre-footer { color:#232323; } et cela fonctionne 🙂
Dgeo Dev
28 Déc 2020Cool 🙂
Tim Sprecher
23 Sep 2020Très bon rendu sur pc donc merci, par contre sur mobile c’est pas totalement responsive, le texte et logo ne sont pas centrés, si jamais tu pourrais m’aider par rapport à ça ça serait top, merci! (Avec rémunération évidemment)
Dgeo Dev
25 Sep 2020Hello et merci pour le commentaire. Pour l’effet centré c’est surement votre thème qui reprend la main au besoin je peux intervenir dans ce cas vous pouvez utiliser le chatbot messenger du site pour que l’on voit ca ensemble.
Emmanuel
28 Oct 2020Bonjour,
Quand on passe sur téléphone avec un le thème sombre on ne voit presque plus les badges.
Est-il possible de changer la couleur du background de cette partie du pied de page ?
Dgeo Dev
29 Oct 2020Bonjour, le mieux est de trouver des imaegs ou de les retraiter sous photoshop et les mettre en blanc. Sinon mettre un background en css sur la section ou zone. pour cela vous pouvez regarder ma chaine qui vous expliquera comment faire.
ANAIS
17 Nov 2020Bonjour, comment insérer une autre photo ?
Dgeo Dev
19 Nov 2020En modifiant l’url des images de la balise src 🙂
floflo
17 Nov 2020Bonjour, je viens d’adhérer a vos vidéos elles sont top!
je viens d’insérer le code à la bonne place, j’ai retiré un logo, donc j’en ai 3. par contre même en mettant 33% ça ne se recentre pas.
merci de votre aide
Amélie
20 Nov 2020MERCI ÉNORMÉMENT. Vos contenus sont de qualité et très bien expliqué. J’adore.
Dgeo Dev
20 Nov 2020Hello, merci c’est sympa 😉
jennifer
20 Nov 2020Bonjour, est-il possible de mettre ce code sur une fiche produit juste au-dessus de la description ? j’ai essayé de voir où je pourrai l’insérer mais je ne vois pas. Merci
Dgeo Dev
20 Nov 2020Hello, il faut trouver ce code
{{ product.description }}
est mettre ce que vous voulez juste au dessousLucas
21 Nov 2020Bonjour,
Tout d’abord merci pour tous vos tutos de très bonne qualité !
Je rencontre le même pb que bcp de personnes, mes badges sont légèrement décalés vers la droite. J’ai essayé de bidouillé le code, de le déplacer mais cela ne fonctionne pas. Pour info, j’utilise le thème Venue.
J’ai essayé de vous contacter via Messenger mais je n’y arrive pas.
Pouvez-vous m’envoyer le bout de code qui peut résoudre ce pb si vous le connaissez.
Ou sinon me contacter via mon mail.
Merci par avance 🙂
Dgeo Dev
23 Nov 2020Bonjour, essayez dans la partie css de mettre ceci :
#gd-pre-footer ul { margin-left:0 !important; }
tuduri
20 Déc 2020Merci beaucoup incroyable j’ai réussit ! moi qui n’y connais rien en informatique. de plus, les logo sont vraiment les plus beau que j’ai pu trouvé. merci milles foooois
Mathys
27 Déc 2020Bonjour c’est ou le mag pour mettre en forme le code ?
Dgeo Dev
28 Déc 2020Bonjour, navré je n’ai pas compris la question
Gael
8 Jan 2021Bonjour tout d’abord merci pour ce tutoriel, cependant j’aimerais changé la couleurs des logo est ce possibles ? si oui comment faire ? merci d’avance !
Dgeo Dev
8 Jan 2021Hello et merci pour le commentaire 🙂 il suffit de les modifier sur photoshop ou photopea 🙂
MARIGARD
13 Jan 2021Salut merci pour l’astuce t es le meilleur. Sa fonctionne super bien!!!
JM
31 Jan 2021Bonjour et merci pour ce tuto génial 🙂
J’aimerai que le code fonctionne sur toutes mes pages sauf deux: 1 page produit et 1 page spécifique.
J’y suis arrivé pour la page produit mais impossible d’imbriquer la page spécifique…
Voici mon code:
{% if product.id != 6174701584577 && page.id != 74768220353 %}
Pouvez-vous m’aider s’il vous plait?
Merci par avance 🙂
Dgeo Dev
1 Fév 2021Hello, c’était presque ça bravo ! mais il faut un or au lien d’un and 🙂 donc {% if product.id != 6174701584577 or page.id != 74768220353 %} car le code actuel veut dire qu’il faut afficher le footer sauf si on est en même temps sur un produit spécifique et une page spécifique ce qui est donc impossible
jerome
8 Fév 2021Salut Dgeo,
super tuto !!!!
Je voulais savoir un truc. sur ta page de Démo les images arrivent les unes après les autres. (ca fais super joli) .. comment fais tu cela ?
Dgeo Dev
10 Fév 2021Hello et merci pour le message 😉 le tuto est ici pour les anim : https://dgeodev.com/comment-creer-animation-shopify/
jerome
10 Fév 2021Merci a toi … 😉
Patrick
1 Mar 2021Bonjour Dgedev,
Petit soucis stp, le lien ci-dessous ne fonctionne pas et arrive sur une page 404 :
« Ajouter un effet de rotation sur les images »
Merci beaucoup par avance.
Dgeo Dev
4 Mar 2021C’est normal il n’est pas encore publié 😉 c’est pour bientôt
Dylan
25 Mar 2021Salut , peux être que la question à déjà été posé mais j’avoue qu’il y a un paquet de commentaires … C’est très simple pourtant il m’arrive quand même d’avoir deux petit problèmes ,
le premier : quand j’appui sur maj et tabulation la mise en forme ne se fait pas ( je ne sais pas si ca a un impact sur l’affichage sur le site )
deuxième problèmes : Sur tout mes shops , que ce soit sur mobile ou Pc mes icone sont centré mais avec légèrement + sur la droite ( sur mobile c’est plus flagrant) elle ne sont pas hyper au centre de l’écrans . aurait tu quelque chose pour y remédier ? merci bcp .
Dgeo Dev
25 Mar 2021Hello, alors c’est selection de la zone ctrl + A et ensuite maj + tab – pour le décalage cela vient du thème 🙂 il faut reset les marges des grilles – je vais essayer d’améliorer le code pour éviter ces soucis 🙂 au besoin reprendre le code à partir de demain matin 😉
Huberman Liran
30 Mar 2021Bonjour, merci beaucoup pour cette vidéo ! J’ai par ailleurs une petite question, j’ai changé le width à 15% car je préfère le rendu au niveau de la taille, mais je n’arrive pas à changer le code pour que ce soit centré sur la page ( les badges se collent à droite de la page). Merci par avance pour votre réponse ! 🙂
Dgeo Dev
30 Mar 2021Hello, c’est un peu compliqué à expliquer en commentaire.
topicy
3 Avr 2021bonjour,
je voudrait changer le badge satisfait ou remboursé par un badge (satisfaction 100% garantie) merci d’avance de votre réponse
Dgeo Dev
4 Avr 2021Hello, dans ce cas il faudrait trouver une image adaptée et l’héberger dans les fichiers de votre boutique et remplacer l’url de l’image par celle générée par shopify dans le src du code de l’image à remplacer 🙂
Antoniazzi
11 Avr 2021Salut je voudrais savoir comment mettre les badges uniquement sur mes pages produits et uniquement sur la page d’accueil .
Sachant que mon thème est impulse .
Merci encore pour t’es tutos ✔
Dgeo Dev
12 Avr 2021Hello, il faut ajouter des conditions : voir le tuto comment personnaliser fiche produit 😉
Eva
24 Avr 2021Bonjour, merci beaucoup pour ce super tuto qui ajoute une touche plus pro à nos sites 😀
Je voulais savoir comment faire sur la version mobile pour que les icônes se placent plutôt sur 2 lignes de 2 plutot que les 4 a la suite ca mange de la place je trouve .. Merci !!
Dgeo Dev
25 Avr 2021Hello dans le css
@media screen and (max-width: 767px) {
#gd-pre-footer .col-item {
width:50%;
text-align:center;
float:left;
padding:5px 15px;
}
}
Hamza
21 Mai 2021bonjour merci pour ce tuto merveilleux
je souhaiterai savoir comment faire pour mettre un fond de couleur gris merci
Dgeo Dev
21 Mai 2021Hello et merci pour le com 😉 il faut mettre un background color sur le parent
Yassine
28 Mai 2021Bonjour, si je veux retirer les badges mais seulement sur 1 page précise c’est possible ?
Dgeo Dev
29 Mai 2021Hello, oui c’est possible mais c’et un peu technique. Il faut adapter ce tutoriel pour jouer avec les conditions https://dgeodev.com/comment-personnaliser-fiche-produit-shopify/
nabil
6 Juin 2021Bonjour,
Merci pour votre aide, est ce que ce code fonctionne aussi avec une template WordPress Storefront ?
Merci
Dgeo Dev
7 Juin 2021Hello, oui ca reste du html et du css donc facilement adaptable sur WordPress 😉
Badara
30 Juin 2021je viens juste de tomber sur le video et c’est bien fait vraiment, j’aimerai savoir si on peut changer la langue du texte et le faire en espagnole . merci
Dgeo Dev
30 Juin 2021Hello, oui bien sur, il suffit de modifier les textes et modifier les 2 images contenant du texte
lau
16 Nov 2021Bonjour Dgeo Dev j’ai essayé votre tuto , les badges s’affiches 2 secondes et plus rien… Que faire svp
Merci pour votre contenu , vous etes super
Dgeo Dev
17 Nov 2021Bonsoir, hum étrange… jamais eu ce cas de figure. Peut être demander au support du thème.
Evan Duventru
6 Déc 2021bonjour Tuto excellent rien a dire parfait honnetement
Mais petit bemol je n’arrive pas a modifié la taille des icone help me please
Dgeo Dev
7 Déc 2021Hello et merci pour le com 😉 vous parlez des images ? c’est le width 95px à modifier
Gaëtan
7 Juil 2022bonjour Dgeo,
Merci pour ce tuto, ça rend vraiment bien.J’aurais une petite question: est-ce que l »on peut insérer du texte alt dans le code des images, car depuis que je l’ai mis en place les logiciels type seranking ou semrush relève des erreurs car il n’y a pas de texte alt.Merci
Dgeo Dev
7 Juil 2022Bonjour, oui c’est possible sur shopify en éditant les images 🙂 sur mon code par contre les alt sont vides car les images n’ont pas un but SEO mais de design 😉 donc le lat doit etre présent mais rester vide pour la bonne pratique et indiquer à google que c’est visuel
Dgeo Dev
7 Juil 2022J’ai donc rajouté les alt vident dans le tutoriel 😉
gaetan
7 Juil 2022Merci beaucoup Dgeo toujours au top !
laurent
5 Sep 2022Bonjour pour mobile que je mette 100% ou 50% ça ne change pas. J’ai toujours 3 badge en haut et un bagdes en bas
Dgeo Dev
6 Sep 2022Hello, j’ai corrigé le soucis ! merci 🙂
zevin
13 Nov 2022bonjour . j’ai mis les badge mais c’était ceux de la rangée d’en haut comment mettre les badges de la rangée d’en bas ?
Dgeo Dev
14 Nov 2022Hello, il suffit de changer les url des images souhaitées
nicolas
1 Juin 2023Bonjour, merci pour vos tuto! les badges apparaissent bien en fond blanc sur pc mais foncés sur mobile….une idée? merci!
Dgeo Dev
1 Juin 2023Hello, hum étrange c’est pas très logique. Peut etre que le thème a une modification sur la charte graphique sur mobile ?
nicolas
2 Juin 2023Bonjour! merci de votre réponse! comment vérifier je ne sais pas trop? vers ou se situe cette charte graphique? Merci!
Dgeo Dev
6 Juin 2023Assez délicat à dire. Faudrait demander au support du thème – généralement c’est dans parametres du theme – couleurs
nicolas
2 Juin 2023ok j’ai trouvé donc dans THEME.LIQUID dans les style du SRC rajouter: background: #FFFFFF; border-radius: 95px; cela fonctionne!
petite bizarerie certaine image sont plus ovales et d’autres bien rondes a voir! mais les fonds est bien blanc en mobile et en pc merci! félicitation pour votre travail!!
EC
12 Sep 2023Bonjour,
J’ai fait tout ce qui était indiqué dans la vidéo, mais quand je vais dans SECTIONS pour ajouter les badges, ils ne sont pas la. Merci d’avance pour la réponse
Dgeo Dev
18 Sep 2023Hello, étrange surement le mauvais fichier. faudrait plutot utiliser un bloc du theme de type html pour éviter de le mettre dans un fichier
ACTI3D
31 Déc 2023Bonjour,
comme d’habitude, bravo
Dgeo Dev
3 Jan 2024Hello, merci c’est gentil 🙂
Émilie
5 Mar 2024Bonjour,
Est-ce possible de changer la couleur des écritures? Je suis sur le thème Dawn
Merci d’avance pour votre réponse
Dgeo Dev
7 Mar 2024Bonjour, oui c’est possible. Titre et texte ? si oui c’est au niveau du css du code du tuto qu’il faut intervenir en ajoutant un color:nomdelacouleurhexadecimale.
Au besoin je propose un service d’installation de mini intervention ou hack personnalisé à 9e 🙂 si intéressé me contacter ici : dgeodev@gmail.com