Comment créer un fil d'Ariane E-commerce sur Webflow ?

Voici un guide qui va vous aider à mettre en place un fil d'ariane sur votre site internet depuis Webflow. Le fil d'Ariane est un élément important en E-commerce puisqu'il permet aux internautes de se repérer facilement sur la boutique en ligne. De plus, c'est une pratique qui a une influence positive sur votre SEO, car elle améliore l'expérience utilisateur (UX) et permet une meilleure accessibilité web. Mettez donc en place facilement ce système de navigation grâce à ce tuto.

Publié le 
15/12/2021
Modifié le 
27/3/2023
5 min
Logo webflow avec la vue d'un extrait de fil d'ariane sur un site e-commerce et un sac de shopping

Aujourd’hui, nous allons voir comment organiser l’architecture de l’information de son site web. Nous allons voir comment nous pouvons offrir une meilleure expérience utilisateur (UX) grâce à des relations entre les produits et les collections CMS.

En effet, il est important voire primordial pour un site e-commerce d’organiser les nombreux produits qu’il contient. Pour organiser l’information, vous allez pouvoir ajouter des étiquettes à vos produits. Ainsi, les internautes pourront naviguer plus simplement et rapidement sur votre catalogue en ligne.

Cette mise en forme de navigation s’intitule “Fil d’Ariane”. Cela fait référence à la mythologie grecque où Ariane (fille de Minos, roi de Crète) donna à Thésée (Son amoureux) une pelote de fil pour qu’il puisse retrouver son chemin dans le labyrinthe qui enfermait le Minotaure.

Aujourd’hui, nous utilisons cette expression pour désigner un chemin directeur. Sur un site internet, le fil d’Ariane consiste en une aide visuelle pour aider les internautes à comprendre sur quelle page ils se trouvent. C’est un système de navigation qui permet d’identifier la structure d’un site.

Exemple d'un Fil d'Ariane présent sur un site E-commerce
Exemple d'un Fil d'Ariane présent sur un site E-commerce


Avant de commencer, il faut que vous ayez une vision claire de l’architecture de votre site e-commerce. Vous pouvez mettre en place cette architecture e-commerce visuellement grâce à Miro. Une fois que vous savez comment lier vos catégories, sous-catégories et produits, vous pouvez vous rendre sur Webflow.

Étape 1 : Accédez à votre projet

Rendez-vous sur Webflow et accéder au projet de votre boutique en ligne.

Dashboard All Projects sur Webflow


Étape 2 : Créez vos Catégories et Sous-catégories

Pour cette seconde étape, il faut vous rendre dans la partie “CMS collection”.

Vous allez ensuite créer une nouvelle collection que vous nommerez “Catégorie” par exemple.

Faites de même pour les sous-catégories à la seule différence que vous allez devoir ajouter un custom field “Reference” : Nommez le “Catégorie” (Si précédemment vous avez nommé la collection “catégorie”) et sélectionnez la collection que vous avez précédemment créée (Dans notre exemple : “Catégorie”).

Création des collections catégories et sous-catégories depuis le CMS de Webflow


Étape 3 : Paramètres de vos produits

Dans les paramètres de vos produits, vous allez ajouter 2 nouveaux customs field “Reference”. Le premier sera pour votre collection “Catégorie” et la seconde pour votre collection “Sous-catégorie”. Il faudra bien penser à cocher la case “This field is required”.

Création Custom Fields Reference Catégorie et sous-catégorie dans les products ecommerce webflow


Étape 4 : Ajoutez à vos produits des catégories et sous-catégorie

Dans la page Ecommerce - Products, modifiez vos produits pour ajouter les catégories et sous-catégorie que vous aurez renseignées au préalable dans la partie CMS de Webflow. Puisque les customs field sont des “Reference” et non “Multi-Reference”, un produit appartient à 1 catégorie et à 1 sous-catégorie. Cependant dans Ecommerce - Categories, vous pouvez insérer des catégories et les affecter à plusieurs produits pour proposer des produits similaires sur vos pages.

Choix des catégories et sous-catégories d'un product sur le e-commerce de webflow


Étape 5 : Mise en forme du fil d’Ariane sur la page “Products Templates”

Vous allez devoir créer une Flexbox avec 4 liens séparés par un sigle (Dans notre exemple, nous avons opté pour le sigle “>”).

Vous pouvez renommer le premier lien “Home”, “Store” ou le nom que vous souhaitez (Ce sera le lien qui renverra vers votre page d’accueil). Rendez-vous ensuite dans les “Links settings”, sélectionnez “Page” et choisissez la page “Home”.

Création du Link de la page d'accueil sur le Fil d'Ariane de Webflow


Pour le second lien, toujours dans les “Links Settings”, vous allez sélectionner non pas “Page”, mais “Collections Page”. Ensuite, sélectionnez dans “References”, “Catégorie” (ou le nom de votre première collection). Enfin, dans “Get text from”, scrollez et dans “Custom Fields”, “Catégorie”, sélectionnez “Name”.

Création du Link des catégories sur le Fil d'Ariane de Webflow


Pour le troisième lien, faites la même manipulation, mais pour les “Sous-catégorie”.

Création du Link des sous-catégories sur le Fil d'Ariane de Webflow


Enfin, pour le dernier lien, sélectionnez dans “Page Collection”, “Current Product”. Et dans “Get text from”, sélectionnez “Name” dans “Basic Info”.

Création du Link des products sur le Fil d'Ariane de Webflow


Voilà l’aperçu une fois les modifications publiées (Publish) dans notre exemple :

Exemple de la mise en place d'un fil d'Ariane sur un site ecommerce webflow


Étape 6 : Répétez l’opération pour vos différentes pages

Maintenant, vous allez pouvoir réutiliser le même processus pour vos différentes pages dynamiques : Catégorie Templates, Sous-catégorie Template (Attention pour les catégories, il n’y aura que 2 niveaux et 3 pour les sous-catégories). De la même façon, vous pouvez répéter l’opération pour vos pages statiques.

Bonus : Utilisez des données structurées pour votre SEO

Pour aller plus loin et pour respecter les best practices SEO, vous pouvez ajouter des données structurées dédiées au fil d’Ariane à votre site. Cela va prendre la forme d’un code JSON-LD dans une balise Script HTML. Vous pouvez retrouver l’architecture de votre site (Catégorie - Sous-catégorie - Produits) avec les positions.

<script type="application/ld+json">
{
  "@context": "https://schema.org/", 
  "@type": "BreadcrumbList", 
  "itemListElement": [{
    "@type": "ListItem", 
    "position": 1, 
    "name": "Digidop Store : Télephone",
    "item": "https://example.com/telephone"  
  },{
    "@type": "ListItem", 
    "position": 2, 
    "name": "Digidop Store : Smartphone",
    "item": "https://example.com/telephone/smarphtone"  
  },{
    "@type": "ListItem", 
    "position": 3, 
    "name": "Digidop Store : Iphone 13",
    "item": "https://example.com/telephone/smarphtone/iphone13"  
  }]
}
</script>


Pour de plus amples informations, vous pouvez regarder l’article de Google Search Central sur le fil d’Ariane. Sinon Digidop peut aussi vous aider dans la réalisation de vos projets Webflow tout en respectant les meilleures pratiques SEO.

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !