How can I achieve this in the CMS?

Juan_Jesus_Millo · August 18, 2020, 6:14pm

Hello to all! I am trying to figure out how to achieve this design inside Webflow, let me explain to you guys.

This is a collection of products page, where you can see the categories at the left and the products at the right.

Every product has a 1 category (ex. Research) and 1 subcategory (ex. Analytics).

I can make a collection list for Products and a Category collection linked with the products with a selector and (here’s one question), how can I link the subcategories? I have 9 categories, should I make 9 collections list, one for each category, and create a selector for each subcategory?

Since, my goal is to create this Category Page:

You can see that except the part of “Latest Products”, there is one section for each subcategory, but of course, each category will have different names and number of subcategories (I don’t want subcategories pages, only categories).

Any help?

Juan_Jesus_Millo · August 20, 2020, 9:25am

I tried to make the next solution but I failed:

Category Collection → Multireference the subcategory
Subcategory Collection
Product Collection → Multireference the subcategory

In the Category Page, I used a collection to show the Subcategory Names so now I have:

Category Page:

Subcategory 1
Subcategory 2
Subcategory 3
…

Inside, I nested the products, but it says that it can only show 5 of them, why? Any workaround?

Thanks <3

Salman_Salahuddin · January 31, 2024, 4:08pm

Hi Juan,
Were you able to figure this out? I want to have different headings for various groupings of the courses under one CMS collection. The page shown above is a part of another CMS collection.

memetican · January 31, 2024, 6:24pm

@Salman_Salahuddin , the best way I’ve found to build these types of hierarchical interfaces in Webflow is to setup your context for the page and then use JS to assemble it.

You’d emit your possible Role headings in one collection list, and your Courses in another, then stitch them together by moving elements.

Webflow’s CMS-bound custom attributes makes tagging the containers for your scripts much more convenient.

With careful design you can do multi-level nested hierarchies as well. However this all requires an understanding of Javascript, selectors and DOM manipulations. If you’re not a developer, drop me a message- I build these for clients often.