Comment créer un footer déroulant pour Mobile sur Shopify

L’expérience utilisateur mobile sur un site e-commerce est très importante. En effet les internautes achètent de plus en plus sur Mobile et veulent avoir une navigation fluide, cohérente et surtout avoir l’essentiel en un coup d’oeil ! C’est pour toutes ces raisons que j’ai décidé de proposer un tutoriel qui va refermer les parties non prioritaires du pied de page sur Mobile. Essentiellement les parties informations, menus secondaires et la newsletter.

C’est bien beau tout ça mais concrètement ça va donner quoi ?  Vous pouvez aller voir le site de démo ou regarder le screen c-dessous:

footer menu déroulant shopify

Comment installer le système d’accordéon sur le Footer ?

Afin de vous éviter de modifier vous même les codes et afin d’avoir quelque chose de générique pouvant être utilisé sur tous les thèmes. Je vous ai pondu un truc qui va transformer automatiquement vos éléments du footer en menu déroulant à partir du moment ou vous avez des titres de section comme par exemple (Information, menu rapide, liens utiles, newsletter etc…).

Vous allez à ce stade devoir trouver la classe ou la balise des titres du footer de votre thème.

Comment trouver le code de mon thème ?

Rendez-vous sur votre site et dans la barre de votre navigateur – Afficher – Options pour les développeur – Un onglet en bas ou à droite va s’ouvrir.

Cliquez sur le carré avec une flèche dessus comme sur l’exemple ci-dessous, il doit être bleu:

Maintenant allez sélectionner un des titres de votre Footer (pied de page) comme ceci:

On nous donne la classe de l’élément ! retenez que sur le thème Debut c’est donc la classe « p.h4 ». 

Sur Dawn c’est « .footer-block__heading »

Etant donné que nous sommes dans le Footer vous avez devoir rajouter en préfixe la balise footer .

Votre code final sera donc : « footer p.h4 »

Sur Dawn c’est « footer .footer-block__heading »

Dans un des codes ci-dessous vous allez voir la partie accordeonMobile("footer .h4","9");

C’est la seule partie que vous devez modifier !

  • Le premier élément est l’identifiant que vous devez remplacer, sur cette exemple c’est footer .h4
  • Le deuxième est le degré de transparence de la flèche grise.

Ps: j’ai fais une flèche grise afin qu’elle puisse être visible sur un fond clair ou foncé. Le degré d’opacité vous permettra d’ajuster sa visibilité.

Comment activer le système de menu déroulant sur Shopify ?

Une fois que vous avez adaptez le code pour qu’il fonctionne avec votre thème, vous allez devoir copier/coller ce code dans un des fichiers de votre thème.

Rendez-vous dans Boutique en ligne -> Actions -> Modifier le code -> Ressources (Assets) – Trouvez votre ficher xxx.js ! généralement intitulé : « global.js, theme.js, timber.js ou app.js » -> Mettez vous tout en bas du fichier et collez le code !

// fonction accordeon pour les éléments du footer sur mobile
if (window.matchMedia("(max-width: 768px)").matches) {
 function accordeonMobile (selector,opacity) {
  document.head.insertAdjacentHTML("beforeend", `
  <style>
   .dg-panel-title { text-align:left; padding:7px 0; }
   .dg-panel-hidden { display:none; }
   .dg-panel-show { display:block; text-align:left; transition: transform 0.3s linear; }
   .dg-panel-chevron { width:15px; height:15px; color:#FFF; float:right; opacity:0.${opacity};}
   .dg-panel-chevron--rotate { transform: rotate(180deg); }
   .site-footer__item { margin-bottom:0; }
   .site-footer__item-inner { display:block; width:100%; }
   
  </style>`);
  const panelTitles = document.querySelectorAll(selector);
  for (let i = 0; i < panelTitles.length; i++) {
   const panelTitle = panelTitles[i];
   panelTitle.classList.add("dg-panel-title");
   const addChevron = '<img class="dg-panel-chevron" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj48Zz48Zz4KCTxnPgoJCTxwb2x5Z29uIHBvaW50cz0iMjI1LjgxMyw0OC45MDcgMTI4LDE0Ni43MiAzMC4xODcsNDguOTA3IDAsNzkuMDkzIDEyOCwyMDcuMDkzIDI1Niw3OS4wOTMgICAiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0FGQUZBRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcG9seWdvbj4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+" />';
   panelTitle.insertAdjacentHTML('beforeend', addChevron);
   const panelContent = panelTitles[i].nextElementSibling;
  
   panelContent.classList.add("dg-panel-hidden");   
   panelTitle.addEventListener("click", function() {    
    panelContent.classList.toggle("dg-panel-show");
      let panelChevron = panelTitle.firstElementChild;
     console.log(panelChevron);
    panelChevron.classList.toggle("dg-panel-chevron--rotate");
   });
  }
 }
 accordeonMobile("footer .h4","2");
}

Le système va automatiquement s’activer si vous êtes sur Mobile ou Tablette format portrait 😉

Bon tuto à tous !

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 4.9 sur 8 votes]

Besoin d'aide ?

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.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 49 commentaires

  1. Anaïs

    26 Mai 2020 Répondre

    Bonjour DGEO,
    Merci pour ce tuto !
    J’ai le thème Début et ça ne fonctionne malheureusement pas :/

    Enfaite, mon footer est en 3 parties. Et il y a initialement un espace entre les 3 parties (pour bien les différencier).
    Une fois que j’ajoute le code, les 3 parties sont quasiment collées. Mais il y a pas de menu déroulant ni même de flèche qui apparaît comme ça devrait l’être.

    Saurais-tu d’où vient le problème ?
    Merci d’avance ! 🙂

      1. Anaïs

        27 Mai 2020 Répondre

        Merci pour ton retour.
        Sur ton lien, quand je fais fn+F12 pour voir la version mobile, le footer déroulant n’apparaît pas.
        J’ai tout de même refais le tuto à plusieurs reprises et rien n’y fait, le menu déroulant n’apparaît pas du tout

        1. Dgeo Dev

          27 Mai 2020 Répondre

          Il faut tester sur mobile directement ou actualiser la page après avoir redimensionné sinon ca ne marchera pas 😉

  2. gael

    3 Juil 2020 Répondre

    coucou dgeo, tu es au top!!!! je te suis depuis 3 mois maintenant merciii pour toute la valeur que tu apportes, vraiment!
    cependant ce tuto je ny arrive pas du tout, jai essayé pendant 2 heures ahahah
    je suis sur le theme Prestige.

    ca c’est un de mes titre de footer,
    INFORMATIONS LÉGALES:

    peut tu m’aider sil te plait, si tu as le temps. Merci beaucoup!

    1. Dgeo Dev

      4 Juil 2020 Répondre

      Hello et merci pour le message 🙂 tu peux remplacer accordeonMobile("footer .h4","9"); par accordeonMobile("footer h2","9");

  3. Florian

    26 Sep 2020 Répondre

    Parfait, un grand merci pour ce énième tuto, ca fonctionne pour Venture aussi, par contre petite question qui doit être un peu bête mais comment changer la couleur de la flèche?
    Elle est grise et mon footer aussi, du coup on ne voit pas,
    j’ai essayé de changer la partie color:#FFF au cas ou c’est ca mais je ne vois pas ce qui change.

    Merci

    1. Dgeo Dev

      29 Sep 2020 Répondre

      Hello et merci pour le com. Ce n’est pas une question bête 😉 par contre ce n’est pas évident à modifier 🙁 il faudrait remplacer l’image dans la balise img et l’url du src de la variable « addChevron » … pour en savoir plus sur les balises HTML j’ai fais une vidéo qui pourrait t’aider : https://youtu.be/teOWaeg_hPE bon courage

  4. Julien

    14 Nov 2020 Répondre

    Hello Dgeo,
    Merci beaucoup pour les tutos qui fonctionnent toujours super.
    malheureusement pour moi celui là ne fonctionne pas, j’ajoute bien le code sur assets theme.js ( j’ai le theme début ), mes tites sont bien p.h4, mais rien a faire ça ne change rien sur mobile aucune différence.
    Aurais tu une solution ?
    Je te remercie par avance.
    Cordialement

    1. Dgeo Dev

      14 Nov 2020 Répondre

      Hello, il faudrait me linker le site en MP 🙂

      1. Julien

        14 Nov 2020 Répondre

        Merci dgeo, peux tu me dire comment te faire un mp ?

        1. Dgeo Dev

          14 Nov 2020 Répondre

          En cliquant sur le chatbot en bas à droite 😉

  5. mehdi

    2 Jan 2021 Répondre

    Bonjour DGEO,
    Merci pour ce tuto
    J’ai le thème booster et ça ne fonctionne malheureusement pas

  6. Josué Jean charles

    15 Fév 2021 Répondre

    Salut DGEO,
    Merci pour ce tuto
    moi aussi j’ai le theme booster et ça ne fonctionne malheureusement pas aussi.

  7. BEN

    20 Fév 2021 Répondre

    Bonjour, votre code fonctionne bien sur mon theme début mais il y a un écart trop important entre chaque section, est il possible de les réduire svp ?

    1. Dgeo Dev

      21 Fév 2021 Répondre

      Hello, il faudrait voir avec le support du thème 🙂 sinon il faut s’y connaitre un peu en CSS

      1. BEN

        24 Fév 2021 Répondre

        Bonjour, vous n’auriez pas la formule magique CSS à intégrer par hasard mon cher ? Ce service est il payant ? merci d’avance

  8. Beluniv

    8 Mar 2021 Répondre

    Salut ! Alors tout d’abord merci beaucoup pour tes tutos ils sont vraiment très bien expliquées et faciles à suivre !

    Par contre, j’ai un problème avec celui là car il ne fonctionne pas. J’ai essayé de le refaire à 2-3 reprises et pourtant ça ne fonctionne toujours pas. La flèche est bien présente mais quand j’appuie dessus il ne se passe rien et il n’y pas l’effet déroulant. Pourrais-tu m’aider s’il te plaît ? Merci 🙂

    1. Dgeo Dev

      8 Mar 2021 Répondre

      Hello, tu peux me linker le lien svp? 🙂

        1. Dgeo Dev

          10 Mar 2021 Répondre

          Hum pour être franc c’est codé trop bizarrement 😀 navré à par un développement sur mesure c’est pas possible 🙁

  9. François

    27 Mar 2021 Répondre

    Hey merci beaucoup pour ton tuto !

    Malheureusement je n’arrive pas à le faire fonctionner avec le thème Prestige (meme en essayant .h2) mes Catégories de footer sont en A PROPOS</h2

    (le theme ou j'ai test est en draft, ce n'ai pas le theme utilisé actuellement sur ma boutique)

    1. Dgeo Dev

      28 Mar 2021 Répondre

      Hello, c’est .Footer__Title pour prestige 😉

      1. François

        28 Mar 2021 Répondre

        Merci Dgeo pour ta réponse ! « footer .Footer__Title » ne fonctionne toujours pas de mon coté :/

        1. François

          28 Mar 2021 Répondre

          L’intitulé de la balise étant « h2.Footer__Title.Heading.u-h6 » même avec ça ou autre combinaison je n’arrive pas à faire fonctionner 😀

        2. Dgeo Dev

          28 Mar 2021 Répondre

          Faut changer de thème pour speedfly c’est inclu =p

          1. François

            29 Mar 2021

            Si j’avais su plus tôt haha, aucune solution du coup ? :/ Parce que je galere depuis 3 jours dessus, je trouve pas de solutions, pourtant ce n’est qu’un simple Prestige :/ !

  10. François

    29 Mar 2021 Répondre

    Solution trouvé : Copié dans Custom.js et non dans le theme.js ! (Com trouvé dans un autre de tes tutos en com super!)

    1. Dgeo Dev

      29 Mar 2021 Répondre

      Hello, cool bravo 🙂

  11. LESPI

    7 Sep 2021 Répondre

    Salut DGEO, parfait merci bcp

    Ptite qst, j’essaie de mettre un after dans le code pour qu’après le clique on aie une flèche qui monte vers le haut

    c’est possible en modifiant directement dans le bout de code?

    merci à toi

    1. Dgeo Dev

      8 Sep 2021 Répondre

      Merci pour le com 🙂 c’est une bonne idée j’ai modifié le tuto en conséquence 😉

      1. LESPI

        8 Sep 2021 Répondre

        Parfait merci bcp, bon courage ! 🙂

  12. Marc

    7 Oct 2021 Répondre

    Bonjour, je voudrais le faire pour le theme Dawn mais je trouve aucun des fichiers

    1. Dgeo Dev

      9 Oct 2021 Répondre

      Hello, sur dawn il faut remplacer footer .h4 par footer .footer-block__heading

      1. faiza

        11 Juin 2022 Répondre

        HI s’il vous plait dans quel fichier de DAWN faudrait-il ajouter ce code merci d’avance.

        1. Dgeo Dev

          11 Juin 2022 Répondre

          Hello, c’est dans global.js sur dawn

  13. Chaizon

    11 Oct 2021 Répondre

    Bonjour Joseph, j’ai tout essayé mais ca ne fonctionne pas sur le thème Venture.
    Quand je colle l’identifiant au bon endroit ca me faire disparaitre le header du site.
    Quelqu’un à l’identifiant à mettre sur Venture ?
    Le code me dit que l’identifiant de Venture est : h4.h1.site-footer_section-title
    Mais ca ne fonctionne pas malheureusement.
    Merci d’avance.

  14. Julide

    29 Déc 2021 Répondre

    Merci pour ce tuto.
    J’aimerai au lieu de mettre des flêches, mettre des + pour dérouler et – pour fermer.
    J’utilise le thème Debut.
    Comment faire s’il vous plaît?

    1. Dgeo Dev

      31 Déc 2021 Répondre

      Hello, cela demanderai un peu de connaissance en code pour faire cela. il faut remplacer le const addChevron = ‘img…’ par un const addChevron = ‘+’
      Pour le moins c’est plus compliqué

  15. Ngtshk

    2 Oct 2022 Répondre

    Hello ! Merci pour tes tutos ils sont top !
    Je n’arrive pas à trouver le fichier ou coller le bout de code sur le thème Refresh. Tu aurais une idée ? Merci

    1. Dgeo Dev

      3 Oct 2022 Répondre

      Hello et merci pour le com 🙂 visiblement c’est dans global.js

  16. Ryan

    26 Fév 2023 Répondre

    Salut, merci pour le tuto.

    Est-il possible de réduire l’espace entre deux menus déroulants?
    Merci

  17. Brooks

    21 Juil 2023 Répondre

    Bonjour, je viens d’utiliser votre tuto qui à trop bien fonctionné (je suis sur dawn)merci beaucoup .
    J’avais une question j’aimerais réduire les espacements (comme dit à la fin de la vidéo), pouvez vous m’aider ?

  18. Madma Bijoux

    4 Jan 2024 Répondre

    Bonjour,
    Celà n’a pas l’air de fonctionner sur le theme North. Pouvez vous m’aiguiller ? 🙂
    Merci !

    1. Dgeo Dev

      10 Jan 2024 Répondre

      Bonjour, Navré je ne connais pas du tout ce thème. Je peux éventuellement vous proposer une mini-intervention pour vous le faire. me contacter en Mp ici au besoin : https://www.facebook.com/dgeodev

  19. blaise

    24 Avr 2024 Répondre

    Bonjour,
    Pour les modifications « Assets » correspond à quoi sur shopify, comme votre version est antérieure.

    1. Dgeo Dev

      7 Mai 2024 Répondre

      Hello, ca correspond à Ressources 🙂

  20. Philomène

    12 Juin 2024 Répondre

    Hello, super tuto ! Je suis sur le thème refresh et en effet le footer est bien déroulant sur mobile, en revanche, il l’est également sur desktop.
    Comment peut-on changer le code pour que le footer reste classique sur version desktop ? Merci

    1. Dgeo Dev

      19 Juin 2024 Répondre

      Hello et merci pour le com 🙂 la partie CSS est bien intégrée ? car normalement c’est uniquement sur mobile

Laisser un commentaire

Fermer le menu
×
×

Panier