Creating Dynamic Breadcrumb in Ecommerce?

Hey @RugbyWebDesign @JanneWassberg @Kevin_Baum @Tone_Thieves

There is a way to build a breadcrumb sub-navigation, but it does require some setup and alternative thinking.

In Webflow there are no “nested” collections so there are no parent-child relationships. What we have are references which are actually sibling relationships. This means to give the appearance of a hierarchy or deep relationships, we have to find another way to approach it.

We have to define relationships all the way back up the chain and not only at the Product level. Let’s take look at the Groceries example.

Store (static page)

Department Collection (template page)

Section Collection (template page)

  • reference to Department Collection

Type Collection (template page)

  • reference to Department Collection
  • reference to Section Collection

Product Collection (ecommerce template page)

  • reference to Department Collection
  • reference to Section Collection
  • reference to Type Collection

Setting up the structure and relationships in this way will allow us to navigate up/down from each relationship as well as side-to-side between items in the same collection. You’ll notice I ignored the default product Categories collection that is automatically created because it currently is missing some of the dynamic filtering and conditions that we have with normal cms collections. Instead I created the Type collection to fulfill the same role.

Now creating a breadcrumb nav at each level is a breeze because we’ve defined the relationship from bottom to top at each level.

This “breadcrumb” nav can also be used as sidebar as I’ve done in this screenshot from an unpublished project.

Due note that the url structure will not reflect this relational hierarchy.

I’ve just quickly created a clone-able project that does exactly as I’ve outlined so that you can further investigate and understand what I’ve briefly described. Hope this helps. Feel free to ask further questions and I’ll do my best to answer them.

https://webflow.com/website/Ecommerce-Product-Breadcrumbs?s=ecommerce-product-breadcrumbs

4 Likes