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

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.

‍

‍

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.

‍

É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”).

‍

É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”.

‍

É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.

‍

É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”.

‍

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”.

‍

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

‍

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

‍

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

‍

É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.