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 .h3","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 .h3
  • 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é.

Pour vous faciliter la vie je vous donne 2 codes tout prêt pour le thème Debut et Speedfly 😉

Le code pour le thème Debut de Shopify

// 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};}
   .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");
   });
  }
 }
 accordeonMobile("footer .h4","9");
}

Le code pour le thème Speedfly

// 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};}
  </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");
   });
  }
 }
 accordeonMobile("footer .h3","9");
}

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 2 votes]

Cet article a 6 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");

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & 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