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

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 »

Ou placer ce bout de code ?

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

// 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");
} 

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 -> Trouvez votre ficher xxx.js ! généralement intitulé : « theme.js, timber.js ou app.js » -> Mettez vous tout en bas du fichier et collez le code !

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: 5 sur 5 votes]

🤗 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 32 commentaires

  1. 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. 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. Il faut tester sur mobile directement ou actualiser la page après avoir redimensionné sinon ca ne marchera pas 😉

  2. 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. Hello et merci pour le message 🙂 tu peux remplacer accordeonMobile("footer .h4","9"); par accordeonMobile("footer h2","9");

  3. 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. 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. 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. Hello, il faudrait me linker le site en MP 🙂

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

        1. En cliquant sur le chatbot en bas à droite 😉

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

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

  7. 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. Hello, il faudrait voir avec le support du thème 🙂 sinon il faut s’y connaitre un peu en CSS

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

  8. 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. Hello, tu peux me linker le lien svp? 🙂

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

  9. 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. Hello, c’est .Footer__Title pour prestige 😉

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

        1. 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. Faut changer de thème pour speedfly c’est inclu =p

          1. 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. Solution trouvé : Copié dans Custom.js et non dans le theme.js ! (Com trouvé dans un autre de tes tutos en com super!)

    1. Hello, cool bravo 🙂

  11. 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. Merci pour le com 🙂 c’est une bonne idée j’ai modifié le tuto en conséquence 😉

      1. Parfait merci bcp, bon courage ! 🙂

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine