Aller au contenu
GloboGlobo Docs
Installer l’app
Français

Barre de navigation inférieure mobile

Ajoutez une barre d'icônes fixe, façon application, avec des liens rapides et des actions pour vos acheteurs.

Guide pratique Pro Navigation 10 min de lecture

La barre reste à l’écran pendant que les acheteurs font défiler la page, comme la barre d’onglets d’une application mobile, et offre un accès en un geste à l’accueil, au menu, au panier, à la recherche, au chat ou à un appel téléphonique. Un élément peut aussi ouvrir un petit sous-menu, par exemple un élément Plus avec des liens vers le compte, le contact et la FAQ.

L'éditeur de barre inférieure : onglets de paramètres (1) et aperçu en direct (2). Changez d'appareil d'aperçu avec les boutons en bas à gauche de l'aperçu.

Les onglets de paramètres sont Éléments du menu, Général, Typographie, Couleurs, Position, Avancé et Historique des versions.

Créer une barre inférieure

  1. Créer la barre

    Sur la page Accueil de l’application, cliquez sur Ajouter une navigation inférieure, ou dans Gestionnaire de menus, cliquez sur Créer un menu et choisissez Barre inférieure mobile.

    Accueil : (1) actions rapides pour créer ou importer un menu, (2) le bouton qui active l'intégration de l'application

  2. Configurer les éléments

    Dans Éléments du menu, modifiez les éléments par défaut et ajoutez les vôtres. Voir Ajouter et modifier des éléments.

    L'éditeur de barre inférieure : onglets de paramètres (1) et aperçu en direct (2). Changez d'appareil d'aperçu avec les boutons en bas à gauche de l'aperçu.

  3. Styliser la barre

    Ajustez les onglets Général, Typographie et Couleurs. Voir Styliser la barre.

    Paramètres généraux, dont la position et le style d'ouverture du sous-menu.

  4. Choisir où elle apparaît

    Dans Position, choisissez les appareils et la position à l’écran. Voir Choisir où la barre apparaît.

    Activez la barre sur mobile (1) et sur ordinateur (2), puis choisissez une position.

  5. Enregistrer et publier

    Cliquez sur Enregistrer, puis sur Publier en haut à droite. Voir Publier la barre.

Ajouter et modifier des éléments

  1. Afficher les actions de l’élément

    Dans Éléments du menu, survolez un élément pour afficher Modifier, Dupliquer et Supprimer. Faites glisser un élément par sa poignée pour le réordonner.

    Survolez un élément pour le modifier, le dupliquer ou le supprimer.

  2. Ajouter des éléments et des sous-menus

    Cliquez sur Ajouter un élément pour ajouter un élément à ce niveau, ou sur Ajouter un sous-menu sur un élément pour imbriquer des éléments en dessous. Les éléments imbriqués s’ouvrent sous forme de sous-menu, jusqu’à trois niveaux.

  3. Définir l’icône, le titre et le lien

    Cliquez sur Modifier pour ouvrir Modifier l’élément de menu. Choisissez une Icône (cliquez sur Modifier), saisissez un Titre, puis cliquez sur le champ Lien.

    Cliquez sur le champ Lien pour choisir l'action de l'élément.

  4. Choisir une action

    Dans Sélectionner le lien, cliquez sur Sélectionner à côté d’une action (1). La zone Lien (2) reçoit le début du lien, par exemple /collections/ pour Produits par collection. Complétez-la comme indiqué dans la colonne Syntaxe, par exemple /collections/summer-sale, puis cliquez sur Mettre à jour (3).

    Cliquez sur Sélectionner (1), complétez le lien (2), puis cliquez sur Mettre à jour (3).

Paramètres de l’élément

Icône
Cliquez sur Modifier pour choisir une icône ou importer une image.
Titre
Le texte sous l’icône.
Lien
Ce qui se passe au toucher. Cliquez dessus pour ouvrir Sélectionner le lien (voir Actions des éléments).
Ouvrir dans un nouvel onglet
Ouvre le lien dans un nouvel onglet du navigateur.
Description
Court texte facultatif affiché avec l’élément.
Taille de l'icône
Taille de l’icône en px.
Boîte > Rayon des angles
Arrondit les angles de la boîte de l’élément, de 0 à 100 px.
Boîte > Marge intérieure
Espace à l’intérieur de la boîte de l’élément, de 0 à 100 px.
Boîte > Position
Déplace l’élément vers la gauche (négatif) ou vers la droite (positif), de -100 à 100 px.
Couleur
Couleurs du texte, de l’icône, de l’arrière-plan de l’icône et de l’arrière-plan pour cet élément uniquement, chacune avec une couleur au survol. Réinitialiser les paramètres rétablit les couleurs de la barre.
Badge
Une petite étiquette sur l’élément, avec Titre, Couleur du texte du badge et Couleur d’arrière-plan du badge.
Visibilité
Masque l’élément sur certains appareils ou pour certains acheteurs, ou ne l’affiche qu’entre deux dates. Voir Règles d’affichage.
Avancé
Nom de classe supplémentaire ajoute une classe CSS pour le CSS personnalisé. Divide ajoute une ligne de séparation à côté de l’élément.

Actions des éléments

Sélectionner le lien regroupe les actions en huit sections. Cliquez sur l’icône d’information à côté d’une action pour voir un exemple.

1. Liens vers les pages internes de votre boutique
URL courte exacte /[votre-url], Page d’accueil /, Tous les produits /collections/all, Produits par collection /collections/[handle-de-la-collection], Détail d’un produit /products/[url-courte-du-produit], Tous les articles de blog /blogs/news, Détail d’un article de blog /blogs/news/[url-courte-de-l-article], Détail d’une page /pages/[url-courte-de-la-page], Page du panier /cart, Page de recherche /search, Formulaire de contact /pages/contact.
2. Open panels (compatible avec les thèmes populaires)
Ouvrir le menu (mobile) gm-open:MobileMenu, Ouvrir le panier gm-open:Cart, Ouvrir la recherche gm-open:Search.
3. Ouvrir d'autres applications (par exemple Shopify Inbox)
Ouvrir la boîte de chat gm-open:Inbox ouvre le chat Shopify Inbox.
4. Défiler sur la page
Défiler vers le haut gm-scroll:Top, Défiler vers le bas gm-scroll:Bottom, Défiler jusqu’à un élément de la page gm-scroll:OnPage(htmlElement).
5. Appeler une fonction JavaScript
gm-javascript:Function exécute une fonction JavaScript sur votre site.
6. Outils d'assistance
Passer un appel tel:, Envoyer un SMS sms:, Envoyer un e-mail mailto:, Discuter avec Messenger, WhatsApp, Telegram, Line ou Zalo.
7. Partager
Copier l’URL actuelle gm-share:CopyUrl, Partager sur Facebook gm-share:Facebook, Partager sur X (Twitter) gm-share:X.
8. Liens vers des sites externes
URL complète (n’importe quelle adresse web complète), Ne pas rediriger #.
Sections 2 à 4 : ouverture de panneaux, autres applications et défilement.
Sections 5 et 6 : JavaScript et outils d'assistance.
Sections 7 et 8 : partage et liens externes.

Exemples :

  • gm-scroll:Top(150) : défile vers le haut en laissant une marge de 150 px.
  • gm-scroll:OnPage(#page-title) : défile jusqu’à l’élément dont l’ID est page-title.
  • tel:+0123456789 : appelle ce numéro.
  • sms:+012345678?body=I need help : ouvre un SMS avec le texte prérempli.
  • https://wa.me/0123456789 : ouvre une conversation WhatsApp. Utilisez l’indicatif du pays, sans +.

Styliser la barre

Paramètres généraux, dont la position et le style d'ouverture du sous-menu.

Menu principal (niveau 1)

Arrondi du menu
Rayon des angles de la barre, de 0 à 50 px.
Espacement des éléments
Espace entre les éléments, de 0 à 50 px.
Marge intérieure horizontale · Marge intérieure verticale
Espace horizontal et vertical à l’intérieur de chaque élément, de 0 à 100 px.
Utiliser l'ombre de la boîte
Ajoute une ombre autour de la barre.

Sous-menu (niveaux 2 et 3)

Position du sous-menu
Gauche, Droite, Centre ou largeur Complet.
Style d'ouverture du sous-menu
Menu déroulant ou Panneau coulissant.
Largeur du sous-menu
De 100 à 900 px.
Marge intérieure horizontale · Marge intérieure verticale
Espace horizontal et vertical à l’intérieur de chaque élément du sous-menu, de 0 à 100 px.

Icône et texte

Taille de l'icône · Taille de l'icône du sous-menu
Tailles d’icône pour la barre et ses sous-menus, de 0 à 100 px.
Espace texte - icône du menu principal · Espace texte - icône du sous-menu
Espace entre l’icône et le texte, de 0 à 50 px.

Avancé

Masquer le texte du menu
Uniquement des icônes dans la barre.
Masquer le texte du sous-menu
Uniquement des icônes dans les sous-menus.
Masquer la description du sous-menu
Masque les descriptions des éléments dans les sous-menus.

Choisir où la barre apparaît

  1. Choisir les appareils

    Dans Position, activez Affichage sur mobile (1), Affichage sur ordinateur (2), ou les deux.

    Activez la barre sur mobile (1) et sur ordinateur (2), puis choisissez une position.

  2. Choisir une position

    Cliquez sur une mise en page sous chaque commutateur :

    • Mobile : en bas, en haut, au centre à gauche, au centre à droite, en bas à gauche ou en bas à droite.
    • Ordinateur : en bas au centre, en bas à gauche, en bas à droite, en bas sur toute la largeur, au centre à gauche ou au centre à droite.

  3. Masquer pendant le défilement (facultatif)

    Sélectionnez Masquer lors du défilement vers le bas pour que la barre ne couvre pas le contenu pendant que l’acheteur fait défiler la page vers le bas.

Paramètres avancés

Disponibilité par marché
Affiche la barre uniquement sur les marchés sélectionnés. Consultez Afficher des menus par marché.
Z-index du menu
Ordre d’empilement. Augmentez-le si d’autres éléments recouvrent la barre ; diminuez-le si la barre recouvre des fenêtres contextuelles.
Opacité du menu
Transparence de la barre, de 0 à 100 %.
Marge inférieure
Espace entre la barre et le bas de l’écran.
Feuille de style / CSS
CSS personnalisé pour la barre.
JavaScript
JavaScript personnalisé pour la barre.

Règles d’affichage

Où Paramètre Effet
Onglet Position Affichage sur mobile, Affichage sur ordinateur Affiche ou masque toute la barre selon l’appareil.
Onglet Avancé Disponibilité par marché Affiche toute la barre uniquement sur les marchés sélectionnés.
Élément > Visibilité Masquer sur ordinateur, Masquer sur mobile Masque un élément sur un appareil.
Élément > Visibilité Masquer une fois connecté, Afficher uniquement lorsque connecté Affiche un élément uniquement aux visiteurs non connectés, ou uniquement aux clients connectés.
Élément > Visibilité Planifier la publication Affiche un élément uniquement entre Date de début et Date de fin.

Publier la barre

  1. Publier

    Cliquez sur Enregistrer, puis sur Publier en haut à droite, choisissez le thème et confirmez. La boîte de dialogue fonctionne comme pour un méga menu (consultez Publier un menu). Le statut passe de Brouillon à Actif.

    Fenêtre Publier le menu : (1) Choisir le thème, (2) Aperçu et Publier

  2. Vérifier votre boutique en ligne

    Ouvrez votre boutique en ligne sur un téléphone, ou dans une fenêtre de navigateur étroite.

Modifier ou supprimer la barre

  • La retirer de votre boutique en ligne : cliquez sur Désactiver en haut de l’éditeur.
  • Restaurer une version antérieure : ouvrez l’onglet Historique des versions. Consultez Historique des versions.

Dépannage

La barre n'apparaît pas sur ma boutique en ligne

La barre se charge via l’intégration de l’application, comme tous les menus. Assurez-vous que l’intégration de l’application est activée pour ce thème ; consultez Activer l’intégration de l’application.

Une action Ouvrir des panneaux ne fait rien

Les actions Open panels ouvrent le tiroir de menu, le tiroir de panier ou la recherche propres à votre thème, et fonctionnent donc avec les thèmes populaires. Si rien ne se passe sur le vôtre, renvoyez plutôt vers la page (par exemple Page du panier /cart), ou contactez-nous.

La barre chevauche un bouton de chat ou un bandeau de cookies

Augmentez Marge inférieure ou modifiez Z-index du menu dans l’onglet Avancé, ou choisissez une autre position dans l’onglet Position.

Cette page vous a-t-elle aidé ?

Signaler un problème