How can I achieve this in the CMS?

Design help CMS
1

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.

image
image1438×1286 266 KB

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:

image
image1434×1506 352 KB

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? :frowning_face:

2

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

3

Sections
Sections2788×5204 332 KB

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.

4

@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.