How to create an E-commerce breadcrumb trail on Webflow?

Here is a guide that will help you to set up a breadcrumb trail on your website from Webflow. The breadcrumb trail is an important element in E-commerce as it allows users to easily find their way around the online shop. Moreover, it is a practice that has a positive influence on your SEO, as it improves the user experience (UX) and allows a better web accessibility. You can easily set up this navigation system with this tutorial.

Key points to remember

Today we will look at how to organise the information architecture of one's website. We will see how we can provide a better user experience (UX) through relationships between products and CMS collections.

Indeed, it is important, even essential, for an e-commerce site to organise the many products it contains. To organise the information, you can add labels to your products. This will make it easier and quicker for users to browse your online catalogue.

This navigation layout is called "Ariadne's Thread". This refers to Greek mythology where Ariadne (daughter of Minos, king of Crete) gave Theseus (her lover) a ball of thread so that he could find his way back through the labyrinth that enclosed the Minotaur.

Today, we use this expression to designate a guiding path. On a website, the breadcrumb trail is a visual aid to help users understand which page they are on. It is a navigation system that helps to identify the structure of a site.

‍

Example of a breadcrumb trail on an e-commerce site

‍

Before starting, you need to have a clear vision of the architecture of your e-commerce site. You can set up this e-commerce architecture visually with Miro. Once you know how to link your categories, sub-categories and products, you can go to Webflow.

Step 1: Access your project

Go to Webflow and access your online shop project.

‍

Step 2: Create your Categories and Subcategories

For this second step, you have to go to the "CMS collection" section.

You will then create a new collection that you will name "Category" for example.

Do the same for the sub-categories with the only difference that you will have to add a custom field "Reference": Name it "Category" (If you previously named the collection "Category") and select the collection you previously created (In our example: "Category").

Creation of category and sub-category collections from the Webflow CMS

‍

Step 3: Your product settings

In the settings of your products, you will add 2 new custom fields "Reference". The first one will be for your "Category" collection and the second one for your "Subcategory" collection. You will have to check the box "This field is required".

Creation of Custom Fields Reference Category and sub-category in webflow ecommerce products

‍

Step 4: Add categories and sub-categories to your products

In the Ecommerce - Products page, modify your products to add the categories and sub-categories that you will have previously filled in the CMS part of Webflow. Since custom fields are "Reference" and not "Multi-Reference", a product belongs to 1 category and 1 sub-category. However, in Ecommerce - Categories, you can insert categories and assign them to several products to propose similar products on your pages.

Choice of categories and sub-categories of a product on webflow e-commerce

‍

Step 5 : Formatting the breadcrumb trail on the "Products Templates" page

You will have to create a Flexbox with 4 links separated by an acronym (in our example we have chosen the acronym ">").

You can rename the first link to "Home", "Store" or whatever you like (this will be the link to your home page). Then go to "Links settings", select "Page" and choose the "Home" page.

Creation of the homepage link on the Webflow breadcrumb trail

‍

For the second link, still in "Links Settings", you will select not "Page", but "Collections Page". Then, in "References", select "Category" (or the name of your first collection). Finally, in "Get text from", scroll down and in "Custom Fields", "Category", select "Name".

Creation of the category link on the Webflow Breadcrumb trail

‍

For the third link, do the same thing, but for the "Subcategory".

Creation of the subcategory link on the Webflow breadcrumb trail

‍

Finally, for the last link, select in "Page Collection", "Current Product". And in "Get text from", select "Name" in "Basic Info".

Creation of the Link of products on the Webflow Breadcrumb trail

‍

This is the preview after the changes have been published (Publish) in our example:

Example of the implementation of a breadcrumb trail on a webflow ecommerce site

‍

Step 6: Repeat for your different pages

Now, you will be able to reuse the same process for your different dynamic pages: Category Templates, Subcategory Template (Be careful for the categories, there will only be 2 levels and 3 for the subcategories). In the same way, you can repeat the operation for your static pages.

Bonus: Use structured data for your SEO

To go further and to respect SEO best practices, you can add structured data dedicated to the breadcrumb trail to your site. This will take the form of a JSON-LD code in an HTML script tag. You can find the architecture of your site (Category - Subcategory - Products) with the 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>

‍
For more information, you can check out Google Search Central's article on Breadcrumb. Otherwise Digidop can also help you with your Webflow projects while following SEO best practices.