Adapter le style du fil d’Ariane à votre thème

Breadcrumbs Uncomplicated hérite de chaque choix visuel de votre thème - couleur des liens, couleur du texte, police, comportement au survol, espacement. Le rôle de l’application est d’ajouter le fil d’Ariane lui-même, pas d’imposer une apparence par-dessus votre design existant. Si le fil d’Ariane rendu ne ressemble pas à ce que vous attendez, c’est presque toujours parce que votre thème n’a pas réglé ce style sur les liens ou le texte, et l’application hérite fidèlement de cette absence. Chacun des remplacements ci-dessous est un paramètre en un clic dans le bloc de thème ; la solution CSS à la fin couvre le reste.

Hériter des couleurs du thème (le défaut)

Par défaut, le fil d’Ariane hérite des couleurs de liens, de texte et de survol de votre thème - le bloc n’émet aucun CSS de couleur tant que vous ne le demandez pas. Sur la plupart des thèmes c’est exactement la bonne chose : le fil d’Ariane reprend la même couleur d’accent que le reste de votre navigation, et les états visités / survolés s’alignent sur le reste du site.

Si les couleurs héritées ne conviennent pas (parce que votre thème utilise des schémas de couleurs limités à un périmètre où l’intégration ne se trouve pas, ou parce que le thème utilise des couleurs de texte transparentes qui rendent mal au-dessus d’une image), cochez Remplacer les couleurs du thème et l’application expose trois sélecteurs de couleur : Couleur du texte du lien, Couleur du séparateur et Couleur du titre du produit. Désactivez le remplacement et l’héritage revient.

Espacement - au-dessus, en dessous, entre

L’espace vertical autour du fil d’Ariane correspond à la marge fournie par la section parente de votre thème. Si vous avez besoin d’un rythme différent :

• Définir l’espacement ci-dessus - un curseur, -60 à +60 px par pas de 5 px, appliqué comme margin-top sur la balise nav du fil d’Ariane.
• Définir l’espacement ci-dessous - même plage et même pas, appliqué comme margin-bottom.
• Définir l’espacement entre les fils d’Ariane - un menu Petit/Moyen/Grand (0.3em / 0.6em / 1.0em) contrôlant l’écart autour de chaque séparateur.

Il n’y a pas de réglage de marge gauche - l’alignement horizontal est hérité de la section qui enveloppe le bloc. Si un thème indente les blocs d’application différemment, voir le paramètre avancé Classe d’emballage.

S’aligner avec l’image du produit

Sur certains thèmes le fil d’Ariane se trouve au-dessus d’une image produit pleine largeur, mais le fil d’Ariane lui-même est contraint à la colonne de contenu plus étroite, ce qui le fait paraître mal aligné. C’est un choix du thème : le fil d’Ariane hérite de la largeur de la section dans laquelle il est placé.

Il n’y a pas de bascule “pleine largeur” dans le bloc. La solution est de déplacer le bloc fil d’Ariane dans la même section que votre galerie d’images (pour qu’il reprenne le même page-width), ou d’ajouter un bloc Liquid personnalisé avec un remplacement <style> qui tire la balise nav sur toute la largeur.

Séparateurs personnalisés

Le défaut est › (guillemet simple à angle vers la droite, ›), choisi parce qu’il est visuellement discret sur tous les thèmes. Le paramètre Séparateur de fil d’Ariane propose quatre choix : flèche (›), barre oblique (/), barre oblique inverse (\) et barre verticale (|). Un véritable caractère personnalisé ou un SVG n’est pas une option intégrée - pour cela vous avez besoin de la solution CSS (ciblez .breadcrumb__sep et remplacez son contenu), traitée ci-dessous.

Majuscules et soulignement

Le fil d’Ariane reprend sa capitalisation et son soulignement de votre thème par défaut. Quand vous voulez un comportement différent :

• Capitalisation du texte du lien - Par défaut du thème, Tout en majuscules, Tout en minuscules, Mettez chaque mot en majuscule, ou Mettez le premier mot en majuscule.
• Lien soulignant - Par défaut du thème, Ajouter un soulignement, Supprimer le soulignement, ou Souligner uniquement au survol.

Il n’y a pas de réglage de graisse dans le bloc - pour le gras vous voudrez utiliser le snippet CSS ci-dessous.

Quand vous avez vraiment besoin de CSS

Pour les besoins moins fréquents - graisse en gras, un remplacement de thème précis, des états de survol, des séparateurs animés - l’application donne à chaque élément du fil d’Ariane un nom de classe stable. La balise nav a l’id #uncomplicated-breadcrumbs et la classe .category-breadcrumbs ; chaque lien non-feuille est a.breadcrumb__branch ; l’élément final en texte seul facultatif est span.breadcrumb__leaf ; chaque séparateur est span.breadcrumb__sep.

La modification la plus demandée est de masquer le fil d’Ariane sur les petits écrans, où l’espace vertical est précieux :

@media (max-width: 900px) {
  #uncomplicated-breadcrumbs { display: none; }
}

L’endroit le plus propre pour placer ce snippet est dans un bloc Liquid personnalisé dans l’Éditeur de thème Shopify, encadré par des balises <style>. Ce screencast montre comment en insérer un :

Ce qu’il ne faut pas faire

Ne collez pas le CSS directement dans le code de votre thème pour modifier le fil d’Ariane. Mettez-le dans un bloc Liquid personnalisé (comme ci-dessus), un fichier CSS personnalisé, ou le champ CSS personnalisé de l’éditeur de thème, pour que les mises à jour du thème ne l’écrasent pas.

Résumé

Les valeurs par défaut sont délibérées : l’application hérite de tout de votre thème pour que le fil d’Ariane paraisse natif sans configuration. Chaque paramètre de cette page est un choix d’exception, pour les cas où les valeurs par défaut du thème ne sont pas ce que vous voulez.