Ajouter une position de menu personnalisée

Guide pratique Tous les forfaits 2 min de lecture

Utilisez-la lorsque votre thème n’a pas d’élément de menu là où vous le voulez, ou que son en-tête est trop personnalisé pour les autres options de Position. Vous ajoutez un conteneur vide au code du thème, puis vous faites pointer Afficher le menu sur ce sélecteur CSS vers celui-ci.

Attention

Dupliquez votre thème avant de modifier le code (Boutique en ligne > Thèmes > … > Dupliquer). Le code ne vous est pas familier ? Contactez-nous et nous installons le menu pour vous gratuitement.

Ajouter les conteneurs et y diriger l’application

1. Ouvrir le code du thème

   Allez dans Boutique en ligne > Thèmes, cliquez sur … sur le thème et choisissez Modifier le code.

2. Ajouter les conteneurs du menu

   Collez un conteneur vide à l’endroit où chaque menu doit apparaître, puis cliquez sur Enregistrer. N’importe quel ID convient ; voici des exemples :

   <div id="GloboDesktopMenu"></div>
   <div id="GloboMobileMenu"></div>

   • Ordinateur : généralement dans le fichier de la section d’en-tête (par exemple sections/header.liquid), là où la navigation doit se trouver.
   • Mobile : généralement dans le fichier du tiroir de menu de votre thème, ou dans layout/theme.liquid.

3. Saisir les conteneurs dans l’application

   Dans l’éditeur de menu, ouvrez l’onglet Paramètres et choisissez Afficher le menu sur ce sélecteur CSS sous Position. Saisissez #GloboDesktopMenu dans Sélecteur CSS de votre menu principal et #GloboMobileMenu dans Sélecteur CSS de votre menu mobile.

   

   Saisissez les ID de vos conteneurs dans les deux champs de sélecteur CSS

4. Enregistrer, publier et vérifier

   Cliquez sur Enregistrer, puis publiez le menu. Vérifiez votre boutique sur ordinateur et sur mobile.

Bon à savoir

• Une seule disposition : ajoutez un seul conteneur et laissez l’autre champ vide.
• Le contenu existant est remplacé : l’application remplit chaque conteneur et remplace tout ce qu’il contient.
• Le menu de votre thème reste en place : masquez-le ou supprimez-le dans le code ou les paramètres du thème si vous ne voulez pas des deux.
• Par thème : les modifications du code ne s’appliquent qu’au thème que vous avez modifié. Ajoutez à nouveau les conteneurs si vous changez de thème ou le mettez à jour.

Dépannage

Le menu mobile n'apparaît pas

Votre thème construit peut-être son tiroir plus tard en JavaScript. Déplacez le conteneur mobile vers du code toujours présent sur la page, comme layout/theme.liquid.

Rien ne s'affiche

Vérifiez que l’intégration de l’application est activée pour ce thème. Dans la console de votre navigateur, vérifiez que document.querySelector('#GloboDesktopMenu') trouve votre conteneur.

Pages associées

• Afficher le menu sur un sélecteur CSSPlacez le menu sur des éléments précis de votre thème en saisissant leurs sélecteurs CSS.
• Publier un menuPubliez votre menu sur un thème et choisissez où il apparaît sur votre boutique en ligne.
• CSS personnaliséAjoutez votre propre CSS pour affiner l'apparence du menu.

Cette page vous a-t-elle aidé ?

Signaler un problème