Aller au contenu

Fil d’Ariane

Aidez les clients à remonter dans la hiérarchie des pages grâce à un fil d’Ariane personnalisable.

Utilisez ce bloc pour afficher un fil d’Ariane près du haut d’une page afin que les clients comprennent rapidement où ils se trouvent et puissent revenir à des pages plus générales. Il fonctionne mieux sur les pages avec des chemins de navigation plus profonds, où une couche supplémentaire d’orientation aide les personnes à parcourir le site avec moins de friction.

Vous pouvez personnaliser l’icône d’accueil, choisir un style de séparateur et ajouter éventuellement un lien parent fixe. Pour une référence générale, consultez Fil d’Ariane. Pour savoir comment les blocs sont organisés dans l’éditeur, consultez documentation Shopify sur les sections et les blocs

Les principaux paramètres contrôlent le style visuel du fil d’Ariane lui-même.

Utilisez le champ Home icon pour le remplacer par une autre icône si votre boutique utilise un ensemble d’icônes cohérent ou un aspect plus minimaliste. Separator icon peut utiliser soit un emoji, soit un nom d’icône pris en charge, et vous pouvez le laisser vide si vous souhaitez que les éléments du fil d’Ariane apparaissent sans séparateurs visibles. Pour obtenir de l’aide sur le nommage des icônes, consultez Icons.

Ce groupe ajoute un lien parent statique au fil d’Ariane. Il est utile lorsque vous souhaitez guider les clients vers une page de destination précise, un hub de collection ou une destination sélectionnée qui compte dans votre flux de navigation.

Ajoutez à la fois le texte et le lien afin que l’étape parent soit lue naturellement dans le fil. L’ouverture du lien parent dans un nouvel onglet est disponible, mais les fils d’Ariane semblent généralement plus naturels lorsqu’ils conservent les clients dans le même chemin de navigation. Pour plus de contexte, consultez Lien parent.

N’ajoutez un lien parent statique que lorsqu’il correspond au chemin de page que les clients s’attendent à voir. S’il semble hors séquence, il peut rendre le fil d’Ariane plus difficile à faire confiance.

Ces paramètres vous permettent de contrôler séparément l’alignement horizontal sur ordinateur et sur mobile. C’est utile lorsque le fil d’Ariane doit s’aligner avec un en-tête de page centré sur une taille d’écran et une colonne de contenu alignée à gauche sur une autre.

Si votre fil d’Ariane devient long, testez soigneusement la mise en page mobile. Un alignement à gauche est souvent plus facile à lire lorsque le fil passe sur plusieurs lignes.

Ces paramètres remplacent les choix de couleur généraux du thème pour ce bloc. Utilisez-les lorsque le fil d’Ariane se trouve sur un fond teinté, basé sur une image ou autrement non standard et qu’il a besoin d’un meilleur contraste. Pour le comportement partagé des couleurs, consultez Paramètres de couleur.

Utilisez ces paramètres pour masquer le bloc sur ordinateur ou sur mobile. C’est utile lorsque vous souhaitez un en-tête mobile plus épuré ou lorsque les fils d’Ariane ne sont utiles que dans un seul contexte de mise en page. Pour le comportement partagé de la visibilité, consultez Paramètres de visibilité.

Ces paramètres influencent la manière dont le bloc est étiqueté dans la barre latérale de l’éditeur. Un titre d’éditeur clair peut rendre ce bloc plus facile à trouver lorsque vous gérez plusieurs blocs liés à la navigation ou à l’en-tête. Pour l’interface de l’éditeur, consultez documentation Shopify sur l’éditeur de thème

  1. Placez-le en haut de la page. Les fils d’Ariane sont les plus utiles lorsqu’ils apparaissent avant le contenu principal, là où les clients s’attendent à trouver des outils d’orientation.
  2. Gardez un chemin intuitif. Utilisez le lien parent uniquement lorsqu’il soutient la hiérarchie de la page que les clients sont susceptibles de supposer.
  3. Choisissez des icônes discrètes. Des icônes d’accueil et de séparateur subtiles aident le fil d’Ariane à rester lisible sans concurrencer le titre de la page.
  4. Vérifiez les petits écrans. Examinez les longs fils d’Ariane sur mobile pour vous assurer que le retour à la ligne et l’alignement restent nets.
  5. Utilisez les remplacements de couleur avec précaution. Les couleurs personnalisées des icônes et du texte doivent améliorer le contraste, et pas seulement correspondre aux accents de design voisins.