Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

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

Thibaut Legrand
Thibaut Legrand
December 15, 2021
Logo webflow avec la vue d'un extrait de fil d'ariane sur un site e-commerce et un sac de shopping

Tables des matières

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.


Etape 1 : Accédez à votre projet

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

Dashboard All Projects sur Webflow


Etape 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


Etape 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


Etape 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


Etape 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


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

  1. <script type="application/ld+json">
  2. {
  3. "@context": "https://schema.org",
  4. "@type": "BreadcrumbList",
  5. "itemListElement":
  6. [
  7.  {
  8.   "@type": "ListItem",
  9.   "position": 1,
  10.   "item":
  11.   {
  12.    "@id": "https://example.com/ telephone",
  13.    "name": "Telephone"
  14.    }
  15.  }
  16.  {
  17.   "@type": "ListItem",
  18.  "position": 2,
  19.  "item":
  20.   {
  21.     "@id": "https://example.com /telephone/ smarphtone",
  22.     "name": "Smartphone"
  23.   }
  24.  }
  25. {
  26.   "@type": "ListItem",
  27.  "position": 3,
  28.  "item":
  29.   {
  30.     "@id": "https://example.com/ telephone/ smarphtone/ iphone13",
  31.     "name": "Iphone 13"
  32.   }
  33.  }
  34. ]
  35. }
  36. </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.

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions