Comment Créer une Barre Flash Infos sur Shopify

Cet article a 90 commentaires

1. 

   BRICE

   7 Déc 2020 Répondre

   Salut
   Superbe boulot encore une fois
   Juste sur version mobile, une flèche apparait en haut à droite au niveau du slide. Cela décale le site.
   Peut-on la supprimé ?

2. 

   david meckler

   7 Déc 2020 Répondre

   Bonjour,
   magnifique tuto comme d’hab
   par contre même problème j’ai « previous » et « next » qui s’affiche aux extrémité de la barre ?
   comment supprimé sa ?
   merci encore .

   1. 

      Dgeo Dev

      7 Déc 2020 Répondre

      Hello, le code a été mis à jour avec le correctif

      1. 

         Abdellahi

         24 Avr 2021 Répondre

         bonjour,

         Pour moi la barre est affiché, mais sa ne défile pas ca reste bloqué sa ne bouge pas
         vous pouvez me dire c’est quoi le problème s’il vous plait

         1. 

            Dgeo Dev

            25 Avr 2021 Répondre

            Hello, surement un problème JS ou thème incompatible. Ouvrir la console de développement chrome et me dire l’erreur rouge affichée svp

            1. 

               corinne

               6 Mai 2021

               Bonjour,

               Même problème, mes 3 textes sont bloqués à gauche de l’écran, ça ne défile pas.

            2. 

               Corinne

               6 Mai 2021

               j’utilise le thème Brooklyn

3. 

   Damien Crocq

   9 Déc 2020 Répondre

   Hello 🙂 j’ai essayé de l’appliquer, mais la bar ne s’affiche pas correctement et seulement sur 3/4 de la page d’accueil. Je suis sur le thème Narrative
   merci de ton retour

   1. 

      Dgeo Dev

      9 Déc 2020 Répondre

      Hello, faudra m’envoyer le lien en MP pour que je jete un oeil

      1. 

         Thomas Garnero

         23 Déc 2020 Répondre

         Hello j’ai le même soucis avec le thème narrative
         Merci de ta réponse !

         1. 

            Dgeo Dev

            20 Jan 2021 Répondre

            M’envoyer en MP le lien du site avec la barre qui ne fonctionne pas et je regarderai 🙂

            1. 

               JEANNE

               10 Fév 2021

               Dgeo Dev j’ai un souci sa ne passe pas ils affichent

               Liquid error: Could not find asset snippets/dg-flash-infos.liquid

            2. 

               Dgeo Dev

               11 Fév 2021

               Hello, c’est que le fichier dans le dossier snippets n’a pas été créé ou alors le nom est mauvais 🙂

      2. 

         Thomas

         19 Jan 2021 Répondre

         Hello j’ai le même soucis avec le thème narrative
         Merci de ta réponse !

4. 

   MARIE NIENIE

   9 Déc 2020 Répondre

   Merci beaucoup!

5. 

   Ahmindach Mohamed

   10 Déc 2020 Répondre

   Bonjour je voudrait savoir si il est possible de fixer le slider pour qu’il apparaisse même si on scroll vers le bas, merci de votre réponse!

   1. 

      Dgeo Dev

      10 Déc 2020 Répondre

      Bonjour, tout dépend du thème car ca reste délicat surtout sur mobile. Le mieux est de se rapprocher du support du thème pour vous donner les bonnes pratiques selon les codes natifs du thème 🙂

6. 

   Jeremy Taloté

   16 Déc 2020 Répondre

   Hello dgeo et merci ! Comment peut on modifier la police du theme?

7. 

   sebastien

   20 Déc 2020 Répondre

   Bonjour,

   Super tuto, comme d’habitude. Est-il possible de ne garder que 3 icones sur desktop ? Lorsque je garde seulement 3 icones, elles se placent toutes sur la gauche. Comment faire pour qu’elles se répartissent l’espace ?

   Merci pour votre réponse.

   1. 

      Dgeo Dev

      21 Déc 2020 Répondre

      Hello, étrange… tu as bien 3 icônes max au format desktop dans les options ? sinon c’est le thème qui gère mal 🙂

8. 

   Achraf

   24 Déc 2020 Répondre

   Salut, super tuto comme d’habitude! J’aimerais savoir s’il est possible de n’afficher la barre que sur la page d’accueil.

   1. 

      Dgeo Dev

      24 Déc 2020 Répondre

      Hello et merci, oui tu peux regarder le tuto personnaliser fiche produit et tu trouvera la réponse

9. 

   Natasha DERBY

   24 Déc 2020 Répondre

   Bonjour moi j’ai un problème au niveau des barres jai un espace blanc en bas, pouvez vous m’aider svp ?

   1. 

      Dgeo Dev

      26 Déc 2020 Répondre

      Hello, il faudrait voir avec le support du thème en question car nativement y a pas d’espaces 🙂

10. 

    Julien

    30 Déc 2020 Répondre

    Bonjour,

    Superbe tuto !! Super bien expliqué ! le top !
    Comment peut on diminuer la taille du texte sur la barre ?
    merci 🙂

    1. 

       Dgeo Dev

       31 Déc 2020 Répondre

       Hello et merci 🙂 dans .flash-infos { rajouter un font-size:14px; ou plus }

11. 

    dan

    19 Jan 2021 Répondre

    Bonjour ,
    déjà merci pour tous tes tutos .
    Jai essaye a plusieurs reprises de mettre les codes en place et il m’affiche sur le site thème début :
    Liquid error: Could not find asset snippets/dg-flash-infos.liquid

    malgres les 2 codes si l’un ne marche pas j’ai mis l’autre et ca ne fonctionne tout de meme pas une solution ?

    1. 

       Dgeo Dev

       19 Jan 2021 Répondre

       Hello, c’est qu’il ne trouve pas le fichier dans le dossier snippets 🙂 vérifiez qu’il est bien écrit et présent

12. 

    Kévin

    11 Fév 2021 Répondre

    Bonsoir, je suis sur le thème Brooklyn, est sur la page d’accueil il y a une barre blanche qui s’affiche en dessous de la header, j’ai essayé sur deux boutiques différentes et ça fais exactement la même chose. Y’a t’il un code à rajouter en plus ?

13. 

    Am

    12 Fév 2021 Répondre

    Bonjour Dgeo Dev Merci pour ta video super enrichissante !
    Cependant je suis sur le theme Prestige et tous les icon se placent sur la gauche
    J’aimerais savoir si tu as la solution stp?
    Il y a beaucoup d’utilisateur du theme prestige qui doivent rencontrer le même problème
    Merci pour ta réponse

    1. 

       Dgeo Dev

       13 Fév 2021 Répondre

       Bonjour, dans la partie style (css) vous pouvez tenter de mettre ce code : .flash-info svg { float:left; } ou .flash-info svg { float:left; width:28px; }

14. 

    Devopify

    20 Fév 2021 Répondre

    Hey, pourrais tu joindre la librairie des icones stp ? pour qu’on puisse choisir celles quon veut. super tuto, merci

    1. 

       Dgeo Dev

       21 Fév 2021 Répondre

       Hello, oui c’est sur https://www.flaticon.com/ 🙂

15. 

    Thomas

    22 Fév 2021 Répondre

    Hello, je suis sur le thème Billionaire donc tout marche niquel sauf deux choses : ça ne s’affiche pas sur mobile et la deuxième c’est que j’ai une barre d’annonce sous ma barre d’annonce de couleur grise donc cela ne fait pas très pro. Peux tu m’aider s’il te plaît ? Merci d’avance

    1. 

       Dgeo Dev

       23 Fév 2021 Répondre

       Hello, le mieux est de demander au support du thème pour le rendre compatible 😉

16. 

    Daniel Cunha

    17 Mar 2021 Répondre

    salut, j’ai le theme debut et j’ai bien la barre qui apparait cependant elle reste fixe au lieu de slider, du coup ça rend pas top…

    1. 

       Dgeo Dev

       17 Mar 2021 Répondre

       Hello, dans ce cas c’est que l’intégration du code est incomplète ou alors y a un conflit avec une app ou le thème 🙁 faudrait voir le site si y a des erreurs au niveau de la console de développement Google

17. 

    Rémi

    18 Mar 2021 Répondre

    hello est-ce possible de rendre la fonctionalité disponible que sur mobile? merci d’avance je suis sur le thème turbo portland

    1. 

       Dgeo Dev

       19 Mar 2021 Répondre

       Hello, essayer de mettre ceci tout en bas du fichier css
       .flash-infos { display:none !important; }
       @media screen and (max-width:600px) {
       display:flex !important;
       }

18. 

    Krystel

    29 Mar 2021 Répondre

    Bonjour,
    Merci pour ce tuto. La barre marche très bien sur début, par contre j’ai un soucis. Lors du chargement de la page l’image du camion apparait en gros à l’écran très rapidement mais ca gêne à l’œil.
    Y aurait il un moyen de corriger cela.
    Merci

    1. 

       Dgeo Dev

       29 Mar 2021 Répondre

       Hello, rajouter dans les svg un height= »28px » au besoin j’ai mis à jour le code

       1. 

          Krystel

          8 Avr 2021 Répondre

          Merci beaucoup c’est parfait

19. 

    Romain

    7 Avr 2021 Répondre

    Bonjour,

    Merci pour le tuto.
    J’ai un soucis sur l’affichage mobile, une fine ligne noir apparait sous le header. (Theme turbo)

    Sais-tu comment corriger le bug ?
    Merci

    1. 

       Dgeo Dev

       10 Avr 2021 Répondre

       Hello, ah le turbo 😀 le thème qui bug le plus avec mes tutos 😀 faudrait me linker le lien en MP 😉

20. 

    luigi

    4 Mai 2021 Répondre

    bonjour Dgeo Dev,

    J’ai le thème speedfly mais pour moi la barre est affiché, mais sa ne défile pas ca reste bloqué sa ne bouge pas
    c’est quoi le problème s’il vous plait ? J’ai copié collé le code au bon endroit pourtant

    1. 

       Dgeo Dev

       4 Mai 2021 Répondre

       Hello, pour toute demande concernant speedfly c’est ici 😉 speedecom.freshdesk.com. bonne journée.

21. 

    fabien

    13 Mai 2021 Répondre

    pour infos pour speedfly le code ne fonctionne pas (defile pas) j’ai pris le 2eme code en partant du haut cela fonctionne

    merci dgeo pour ton travail 😉

    1. 

       Dgeo Dev

       13 Mai 2021 Répondre

       Hello, ok merci pour le retour

22. 

    Jeff

    25 Mai 2021 Répondre

    Merci beaucoup pour ce tuto.
    Je suis sur le thème venture et j’ai un soucis, il y a une espace entre la barre et mon header. Comment régler ce soucis ?

    1. 

       Dgeo Dev

       29 Mai 2021 Répondre

       Hello, c’est à cause du thème, il faut trouver d’ou vient l’espace. le mieux est de demander à leur support 😉

23. 

    André Ribeiro

    29 Mai 2021 Répondre

    hello c’est surper encore une fois de plus! mais il manque pas la deuxieme partie du code pour colle sur theme.liquid? comme dans video merci

    1. 

       Dgeo Dev

       1 Juin 2021 Répondre

       Hello, non non tout est la sur un seul fichier 😉

       1. 

          kum

          4 Juin 2021 Répondre

          hello super comme boulot ! mais on ne voit pas la 2ème partie du code

          1. 

             Dgeo Dev

             5 Juin 2021 Répondre

             Merci, il n’y a qu’une seule partie 😉

    2. 

       Dgeo Dev

       14 Juin 2021 Répondre

       Effectivement il manquait une partie désolé ! c’est ajouté 😉

24. 

    david

    14 Juin 2021 Répondre

    bonsoir le dernier code je ne trouve pas ! Merci de me aider sil’vous pas , normalement il y a 2 code j’ai installer le 1er code dans snippets et l’autre je trouve pas

    1. 

       Dgeo Dev

       14 Juin 2021 Répondre

       Hello, il est rajouté 🙂

25. 

    dams

    18 Juil 2021 Répondre

    Salut, un grand merci pour tes tutos que je dévore sans fin. Etant sur brooklyn, est t’il possible de ne pas mettre la barre sur la page d’accueil. J’ai trouvé un code pour le faire apparaitre sur une page souhaitée:

    {% if request.path contains ‘collections’ %}
    {% include ‘dg-flash-infos’ %}
    {% endif %}

    mais sa m’oblige à rentrer le code pour chaque page :p. Si tu as une solution, je suis preneur. Un grand merci encore

    1. 

       Dgeo Dev

       19 Juil 2021 Répondre

       Hello et merci pour le com 😉 oui c’est possible avec cette condition :
       {% if template.name != « index » %}
       {% include ‘dg-flash-infos’ %}
       {% endif %}

       1. 

          Dams

          21 Juil 2021 Répondre

          Tu gère merci Dev

       2. 

          dams

          21 Juil 2021 Répondre

          bon bah j’ai repris vite fais le code ça ne fonctionnais pas.. ça m’affichais sa à la place de la barre flash:
          Liquid error: Argument error in tag ‘include’ – Illegal template name

          du coup j’ai juste eu à modifié comme ça (si quelqu’un en a besoin):
          {% if template.name != « index » %}
          {% include ‘dg-flash-infos’ %}
          {% endif %}

          1. 

             Dgeo Dev

             24 Juil 2021 Répondre

             Hello, cool merci pour l’astuce 🙂

26. 

    Assi

    18 Août 2021 Répondre

    Hello dgeo, merci beaucoup pour ce super tuto, j’aimerai ne pas afficher cette barre que sur la page d’accueil.

    Aurais-tu la solution ? J’ai regardé le tuto pour personnaliser sa fiche produit mais je n’ai pas trouvé de réponse 🙂

    1. 

       Dgeo Dev

       20 Août 2021 Répondre

       Hello et merci pour le com 🙂 oui il faut englober tout le code de la condition suivante :
       {% if template.name != « index » %}
       le code…
       {% endif %}

27. 

    Azzi

    19 Août 2021 Répondre

    Hello Dgeo merci pour ce super tuto. Peux-tu me dire comment est-ce que je peux faire pour afficher cette barre uniquement sur la Home page ? je n’arrive pas à trouver l’information

    1. 

       Dgeo Dev

       20 Août 2021 Répondre

       J’ai répondu un peu plus haut 🙂

28. 

    Mart1

    5 Oct 2021 Répondre

    Merci pour le tuto il est super par contre j’ai une barre blanche en dessous de la barre header et je n’arrive pas a l’enlever. je suis sur le thème Brookline et je précise que j’qi utiliser le 2em code.
    Si quelqu’un sais pourquoi et sur tout comment l’enlever je suis très preneurs merci d’avance.

29. 

    Paul

    8 Oct 2021 Répondre

    Bonjour comment rendre cette barre d’annonce sticky ? 🙂

    1. 

       Dgeo Dev

       9 Oct 2021 Répondre

       Bonjour, rajouter position:sticky; top:0; dans .flash-infos { …

30. 

    lau

    15 Nov 2021 Répondre

    Bonjour malheuresement cela me met « Liquid error: Could not find asset snippets/dg-flash-infos.liquid »

    1. 

       Dgeo Dev

       15 Nov 2021 Répondre

       Hello, c’est que le snippet n’a pas été créé ou alors mal nommé 🙂

31. 

    Yas

    21 Nov 2021 Répondre

    Bonjour,
    J’ai un soucis avec les deux codes plus haut, après avoir ajouter le code pour le carrousel d’images la barre dynamique grossi en longueur et impossible d’ajouter les deux sans qu’il en ai un qui beug …
    Merci d’avance !

    1. 

       Dgeo Dev

       22 Nov 2021 Répondre

       Hello, je pense que votre thème n’est pas compatible. Lequel est-ce ? si le support est sympa essayez de leur demander si ils vous corriger l’incompatibilité 😉

32. 

    Louis

    27 Nov 2021 Répondre

    Bonjour, malgré l’essai des 2 codes, j’ai toujours un écart blanc qui apparait entre la barre défilante et la première section.. Auriez-vous une solution? Je suis sur le thème Brooklyn.

    Merci d’avance.

    Cordialement

    1. 

       Dgeo Dev

       29 Nov 2021 Répondre

       Hello, c’est des écarts natifs du thème faudrait voir avec le support si c’est brooklyn vous avez droit à 60mn gratos en sav de la part de shopify 😉 autant en profiter

33. 

    Marta

    15 Mar 2022 Répondre

    Hello, comment réduire la hauteur de la barre d’info pleaseee ? 🙂

    1. 

       Dgeo Dev

       16 Mar 2022 Répondre

       Hello, en trouvant la valeur padding:6px 10px; et modifier le 6px du genre : padding:2px 10px;

34. 

    Francois

    25 Mar 2022 Répondre

    Hello Dgeo,

    (mon precedent message a du bugger je réitère^^)

    Mes 3 textes restent bloqués à gauche de l’écran, sur toutes mes pages desktop SAUF sur ma Homepage. (Thème Prestige)

    Je mis mon site dans la description de mon profil avec mon email, aurais une solution stp ?

    Merci bcp pour ton contenu !

    1. 

       Dgeo Dev

       26 Mar 2022 Répondre

       Hello et merci pour le com 🙂 hum difficile à dire sans voir le résultat. Lien du site en MP au besoin et je regarderai dés que j’ai un moment 🙂

       1. 

          Francois

          26 Mar 2022 Répondre

          Hello ! J’ai ajouté

          .slick-track {
          width:100%;
          }
          Et cela a régler mon soucis, mais je ne sais pas si c’est « propre » ou exact mais ça a marché visuellement en tout cas 😀

          Merci à toi

          1. 

             Dgeo Dev

             29 Mar 2022 Répondre

             Hello, oui c’est très bien bravo ! 🙂

35. 

    Philippe

    24 Juin 2022 Répondre

    Bonjour,

    est-il possible de changer la couleur de la barre ? J’ai cherché mais je n’ai pas trouvé le « color » dans le dg-flash-info.

    Sinon super tuto merci.

    1. 

       Dgeo Dev

       24 Juin 2022 Répondre

       Hello oui il suffit de changer la valeur hexa de cette partie 😉 background:#333;

36. 

    Stefan

    30 Oct 2022 Répondre

    Bonjour. Super tuto

    Je voudrais le mettre en dessous du header et non au dessus. Comment faire ?

    1. 

       Dgeo Dev

       4 Nov 2022 Répondre

       Hello, merci pour le com 😉 au lieu de le mettre dans theme.liquid trouver dans sections – un fichier header.liquid et mettre le dernier code du tuto tout en bas

37. 

    loick

    20 Avr 2023 Répondre

    bonjour dgeo dev
    tout d’abord merci du contenu que tu propose tu fait un super boulot
    j’ai un soucis tout ce met sur la gauche en version pc par contre en version mobile le rendu est correcte bien repartie
    j’utilise le thème sense merci d’avance pour la reponse a bientot

    1. 

       Dgeo Dev

       25 Avr 2023 Répondre

       Hello, essaie de le placer ailleurs, y a surement un principe de grilles ou colonnes sur ce thème

38. 

    Ludovic

    7 Mai 2023 Répondre

    Bonjour, merci pour tout ce contenu !
    Est-ce qu’il est possible d’ajuster la hauteur des éléments car j’ai toute la ligne légèrement décentré vers le haut ça fait pas très propre ?
    Merci

39. 

    Chris

    30 Nov 2023 Répondre

    bonjour, j’ai le thème Dawn est j’ai une double barre. Pourtant la ligne de code n’est copié qu’une fois dans .
    Le correctif résoudra mon soucis? Si oui, ou est ce correctif?
    Merci

    1. 

       Dgeo Dev

       30 Nov 2023 Répondre

       Hello exactement la même barre ou celle en plus de la native de dawn ?