Paramètres de disposition de la navigation

Liens en vedette

1. Documentation Shopify sur l’éditeur de thème
2. Documentation de Company XYZ sur les paramètres de mise en page de la navigation

Vidéos utiles

Vidéo Shopify Academy : personnaliser votre boutique

Vidéo Shopify Academy : personnaliser votre boutique

Utilisez ce groupe de paramètres pour contrôler l’emplacement de la navigation dans l’en-tête sur ordinateur et mobile. Cela vous permet de conserver la navigation dans la ligne principale ou de lui attribuer une ligne pleine largeur séparée lorsque le menu a besoin de plus d’espace.

Pour un aperçu plus général de l’interface, consultez la documentation Shopify sur l’éditeur de thème

Paramètres de disposition

La disposition sur ordinateur et sur mobile est contrôlée séparément, afin que vous puissiez conserver une présentation compacte sur une taille d’écran et une présentation plus aérée sur l’autre. Gauche, centre et droite placent la navigation dans la ligne principale de l’en-tête. Pleine largeur la déplace sous cette ligne, sur sa propre ligne.

Ce choix affecte à la fois la visibilité et l’équilibre. Conserver la navigation dans la ligne principale aide à créer un en-tête plus compact, tandis qu’une ligne pleine largeur donne plus d’espace aux éléments du menu et rend la navigation plus visible.

Pour plus de détails sur le comportement de l’alignement et du regroupement, consultez les paramètres de disposition de la navigation.

Pleine largeur ne fait pas que modifier l’alignement. Cela place la navigation sur une ligne séparée sous la ligne principale de l’en-tête.

Emplacement sur ordinateur et mobile

Sur ordinateur, gauche et droite peuvent bien fonctionner lorsque la navigation doit se placer à côté de la marque, de la recherche ou des icônes d’action. Centre est souvent le meilleur choix lorsque la navigation doit être le point visuel central de l’en-tête.

Sur mobile, privilégiez la clarté plutôt que la symétrie. Si l’en-tête semble encombré, déplacer la navigation vers une ligne pleine largeur peut rendre la disposition plus facile à parcourir et réduire la concurrence avec les autres éléments de l’en-tête.

Utiliser l’espace disponible

Utiliser l’espace disponible étire la zone de navigation pour utiliser l’espace restant dans la ligne sur ordinateur. Cela peut aider l’en-tête à paraître plus équilibré lorsque la navigation se trouve à côté d’éléments plus petits et qu’il y aurait autrement de l’espace vide.

C’est surtout utile lorsque la navigation reste dans la ligne principale. Si les libellés de votre menu sont longs ou si l’en-tête paraît déjà dense, testez avec précaution afin que la largeur supplémentaire améliore l’équilibre sans rendre l’espacement maladroit.

Note

Utiliser l’espace disponible s’applique uniquement aux dispositions sur ordinateur.

Notes d’utilisation

1. Faites correspondre la disposition à la longueur du menu. Utilisez la pleine largeur lorsque la navigation de niveau supérieur a besoin de plus d’espace horizontal.
2. Ajustez chaque taille d’écran séparément. Choisissez la disposition la plus claire pour l’ordinateur et le mobile au lieu d’imposer le même emplacement sur les deux.
3. Utilisez la pleine largeur pour réduire l’encombrement. Si la navigation, la marque et les éléments utilitaires se disputent une seule ligne, déplacer la navigation en dessous crée généralement un en-tête plus net.
4. Étendez l’espace avec intention. Activez Utiliser l’espace disponible lorsque la ligne sur ordinateur dispose d’espace restant et que la navigation doit contribuer à ancrer la disposition.
5. Vérifiez l’équilibre global de l’en-tête. Après avoir modifié l’alignement, vérifiez que la navigation paraît toujours intentionnelle à côté des autres éléments de l’en-tête.
6. Vérifiez les deux fenêtres d’affichage. Une disposition qui paraît équilibrée sur ordinateur peut encombrer l’en-tête sur mobile, alors vérifiez les deux tailles avant de publier.