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.
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 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.
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.
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.
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.
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.
@RugbyWebDesign My pleasure! It took me many hours/days to get my head around how to currently hand complex data relationships using cms collection. Hopefully now you can understand in a matter of minutes. Keep us updated on your progress.
@JanneWassberg It does hurt. 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. The rabbit hole can only go deeper from here.
@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