Creating Dynamic Breadcrumb in Ecommerce?

I’m sure what I’m trying to do should be a very ‘standard’ feature for any eCommerce store.

I’m trying to create a dynamic breadcrumb trail on the product page.

The problem is, if I try and create a text link, the product category isn’t available in the list (see image). And if I create a dynamic list of all the categories, I cannot limit to show current.

Any ideas?

@RugbyWebDesign want to be sure. This is not the product page is it a list in another page?

“I’m trying to create a dynamic breadcrumb trail on the product page”

Yes have the same problem Dam multi reference field. In my product i have reference to 2 other tablels, not a problen singel ref. But categories thats a problem with multi ref

This seems a very easy fix for the Webflow team, as by default, every product has a category field. (Not a custom field).

The link Settings dropdown has some fairly irrelevant items listed (such as measurements or created on). Why on earth would they omit the product category as an option?

This looks like an oversight, surely?

This is very frustrating for a range of situations. I do believe though it is because they are using this multi-select relationship as a building bock for variations/sizes etc. They have excluded it while they work on this feature so they don’t have conflict or future compatibility issues. Only reason I can think of.

Yeah this seems like a bug, or a miss. I was surprised to see the “Category” wasn’t a bindable tag. Can someone from Webflow let us know please?

Hi @RugbyWebDesignand all :wave:

The multi reference that comes pre-built in the Product collection can be used with a Collection list. When you add it to a Product Detail page you’ll get an option to connect it to the multi reference field.

If you’d like to bind Category data to elements outside of a collection list I recommend adding a single reference field to the Product collection and connect that to Categories.

I don’t think this solves your particular idea of a dynamic breadcrumb however, because we don’t have away of tracking the exact path a user takes to a Product page.

We do have a wishlist post for this feature if you’d like to give it your votes. Breadcrumb element | Webflow Wishlist

Hope that adds some clarification.

Hi @AlexN

My problem is part fixed by your solution, but we’re not over the line yet. What I’m trying to create seems so easy to solve, but I worry I may have muddied the water with my terminology of dynamic breadcrumb. (It doesn’t need to track visitor path).

Lets say we have a store with 3 primary departments. EG: Groceries / Electrical / Clothing.

I have added these as a custom single reference field, and can now see this appearing in the Link Settings dropdown list from the product page. But, I can only pull in text info, not the URL.

The pre-built product collection category’s are more specific EG: Meat / Vegetables / Fruit / Bread. But the pre-built collection is not listed in the Webflow Link Settings dropdown menu.

What I want to achieve on the Product Page is this…

HOME > GROCERIES > VEGETABLES > POTATOES

Please, can we have the pre-built collection category added to the list in the dropdown menu? So that the product page can link back to its parent category.

Are you trying to do what they have done in this free e-commerce template? Check it out:

https://webflow.com/templates/html/toystore-ecommerce-website-template

If yes, you might be able to copy-paste a few elements or reverse engineer them. Is that the kind of thing you are trying to create?

Hi @VladyRahn

Not quite. The tab “catalog” is actually a static page. (I have replicated this).

What I’m wanting is the tab to dynamically pull the data from the pre-built product category. The choice available to link includes irrelevant items for Ecom such as ‘Date uploaded’, but is missing such an important element the PRODUCT CATEGORY. This seems such a basic oversight.

So I can link to a collection (category) from any static page. But I cannot link back to that page from the child PRODUCT PAGE template.

@RugbyWebDesign i totalt agree. If im at the product page selling My product ofcourse i want to show relevant product information about the product like My product has folllowing categoris and so on.

Basic information in a relational dbStructure

1 Like

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

Hey @matthewpmunger Thanks a million!

I can see you have approached this from a completely different perspective, but actually makes the store easier to manage for the client/end user too.

Thankfully I don’t have too much much work to undo what I have done, before going down your route.

Thank you for taking the time to go create a cloneable project, it really helped me to see your workings. :+1:

@matthewpmunger Yes it works, but for me personaly it hurts. Breaking relational dbStructure creating dimond relations. :grinning:

The important thing is to solve the problem

@RugbyWebDesign My pleasure! It took me many hours/days to get my head around how to currently hand complex data relationships using cms collection. :laughing:Hopefully now you can understand in a matter of minutes. Keep us updated on your progress. :partying_face:

@JanneWassberg It does hurt. :face_with_head_bandage:However I can see a future version of Webflow that takes what they’ve learned from cms and ecommerce to allow for a third category of database design. This will be great for creating complicated websites and web apps. :crossed_fingers:The rabbit hole can only go deeper from here. :rabbit::tophat:

1 Like

@matthewpmunger I do se a big problem with this in the near future. When Webflow decide to fix nested collection this might break that functionality. Let’s hope not :grinning:

1 Like

Thank you for the share Matthew. I am new to Webflow and your solution makes my job much easier

1 Like

I’m going to try Matthew Munger’s solution, too

@StevieDan There’s an official blog post about this now with a video link at the bottom too. Hope it helps.