Réussi
Fil d’Ariane
Affichez un fil d’Ariane qui aide les clients à remonter facilement vers les pages parentes.
- Documentation Shopify sur l’éditeur de thème
- Documentation Company XYZ sur le bloc de fil d’Ariane
- Documentation Company XYZ sur les icônes
- Documentation Company XYZ sur les paramètres d’espacement de section
- Documentation Company XYZ sur les paramètres d’arrière-plan de section
- Documentation Company XYZ sur les paramètres de séparateurs
- Documentation Company XYZ sur les paramètres de visibilité
- Documentation Company XYZ sur les paramètres de largeur de mise en page
Utilisez Breadcrumbs pour afficher un chemin de navigation clair vers les pages de niveau supérieur. Il fonctionne mieux près du haut d’une page, où il peut soutenir la navigation sans entrer en concurrence avec le contenu principal. Pour un contexte plus large sur la configuration du thème, consultez documentation Shopify sur l’éditeur de thème
Paramètres de base
Section intitulée « Paramètres de base »Les principaux paramètres contrôlent les icônes utilisées dans le fil d’Ariane. Vous pouvez utiliser une icône de maison pour le premier élément et choisir une icône de séparateur entre les liens du fil d’Ariane. Pour les icônes de séparateur, vous pouvez saisir un emoji ou un nom d’icône, ou laisser le champ vide pour un rendu plus épuré sans séparateur affiché. Pour obtenir de l’aide sur les icônes, consultez le guide des icônes.
Gardez le style du fil d’Ariane simple lorsque la page comporte déjà des éléments visuels forts à proximité. Un séparateur minimal paraît souvent plus épuré et est plus facile à parcourir sur les petits écrans.
Paramètres d’alignement
Section intitulée « Paramètres d’alignement »Ces paramètres contrôlent l’alignement horizontal séparément pour ordinateur et mobile. C’est utile lorsque les fils d’Ariane doivent s’aligner avec le contenu environnant sur les grands écrans, mais nécessitent une position différente sur les petits écrans.
L’alignement à gauche est généralement le plus facile à lire, surtout lorsque les chemins du fil d’Ariane sont plus longs. Si le fil paraît à l’étroit sur mobile, simplifiez les icônes ou raccourcissez les libellés avant de forcer un alignement plus décoratif.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces paramètres remplacent les couleurs plus larges du thème pour cette section. Ils sont particulièrement utiles lorsque le fil d’Ariane se trouve sur un arrière-plan personnalisé ou nécessite un traitement plus clair ou plus foncé que le reste de la page.
Essayez de garder les fils d’Ariane visuellement secondaires tout en restant lisibles et clairement interactifs. Les couleurs du texte et des icônes doivent offrir suffisamment de contraste pour rester faciles à repérer sans ressembler à des appels à l’action principaux.
Les fils d’Ariane doivent rester discrets, mais les clients doivent tout de même les reconnaître comme une navigation.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- Breadcrumb
Fil d’Ariane
Section intitulée « Fil d’Ariane »Utilisez ce bloc pour ajouter un lien parent statique au fil d’Ariane. Cela est utile lorsque vous souhaitez insérer une étape manuelle pour des pages de destination, des chemins de contenu personnalisés ou des flux de navigation spéciaux. Pour plus de détails sur la configuration du bloc, consultez Fil d’Ariane.
- Gardez le texte du bloc court afin que le fil complet reste lisible.
- Utilisez le paramètre de lien pour les vraies destinations parentes, et non pour des liens décoratifs ou répétés.
- Utilisez le paramètre de visibilité du bloc lorsqu’un lien parent manuel n’est utile que sur ordinateur ou uniquement sur mobile.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous du fil d’Ariane sur ordinateur et mobile. Dans cette section, ils vous aident à créer une séparation confortable avec l’en-tête et le contenu de la page.
Comme les fils d’Ariane sont compacts, un espacement plus léger convient généralement le mieux. N’ajoutez davantage d’espacement que lorsque la section doit se démarquer visuellement ou inclut un traitement d’arrière-plan.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Paramètres d’arrière-plan de section vous permettent de placer le fil d’Ariane sur une couleur, un dégradé, une image ou une vidéo. Cela peut aider la section à se distinguer, en particulier dans des mises en page de page plus personnalisées.
Utilisez ici les traitements d’arrière-plan avec précaution, car les fils d’Ariane sont petits et peuvent facilement être éclipsés. Les contrôles d’overlay peuvent aider à préserver la lisibilité lors de l’utilisation d’images ou de vidéo.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Paramètres de séparateur ajoutent une ligne facultative au-dessus ou au-dessous de la section. Ils sont utiles lorsque vous souhaitez séparer la zone du fil d’Ariane du contenu environnant sans ajouter beaucoup d’espace supplémentaire.
Un séparateur en haut peut bien fonctionner sous un en-tête, tandis qu’un séparateur en bas peut aider à définir le début du contenu principal de la page. Si vous laissez la couleur du séparateur transparente, la couleur de bordure standard est utilisée.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Paramètres de visibilité contrôlent si toute la section du fil d’Ariane apparaît sur ordinateur, mobile ou les deux. C’est utile lorsque vous souhaitez une mise en page plus simple sur une taille d’appareil.
Utilisez la visibilité de section pour les grandes décisions de mise en page. Si la section est masquée sur une taille d’appareil, les choix de visibilité au niveau du bloc à l’intérieur n’y apparaîtront pas non plus.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Paramètres de largeur contrôlent à la fois la largeur du contenu du fil d’Ariane et la largeur de l’enveloppe de la section. Cela vous aide à aligner les fils d’Ariane avec le contenu à proximité ou à étendre davantage un traitement d’arrière-plan sur la page.
Faire correspondre la largeur du contenu à la mise en page environnante crée généralement le résultat le plus propre. Lorsque vous modifiez les paramètres de largeur, prévisualisez la page en direct ainsi que la vue de l’éditeur, car les changements de mise en page peuvent sembler différents dans chaque cas.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Gardez des libellés concis. Des noms de fil d’Ariane courts sont plus faciles à lire et risquent moins de revenir à la ligne de manière maladroite sur mobile.
- N’utilisez les liens manuels que lorsque cela est utile. Ajoutez des blocs Breadcrumb lorsqu’ils clarifient le chemin, et non lorsqu’ils répètent une navigation évidente.
- Surveillez les changements liés aux blocs. Des fils d’Ariane supplémentaires peuvent modifier le chemin davantage que les paramètres au niveau de la section, alors vérifiez le chemin complet après l’ajout ou la suppression de blocs.
- Faites correspondre les choix de mise en page à proximité. Alignez la largeur, l’espacement et la position avec la page environnante afin que le fil paraisse intentionnel.
- Vérifiez la lisibilité sur les arrière-plans personnalisés. Examinez le contraste du texte, des icônes et des séparateurs chaque fois que vous ajoutez de la couleur, des images, des dégradés ou une vidéo.
- Testez les deux tailles d’appareil. Les fils d’Ariane peuvent se comporter différemment sur ordinateur et sur mobile, alors vérifiez l’alignement, la visibilité et tout traitement multimédia dans les deux vues.