How can I create hierarchical categories and subcategories in Webflow for a net shop, and can these categories be used to dynamically order products?
TL;DR
- Create Category and Subcategory CMS Collections using reference fields to build hierarchy.
- Link Products to Subcategories (and thus to Categories), display them using nested Collection Lists with filters, and use Finsweet CMS Filter for advanced frontend filtering.
To build hierarchical categories and subcategories in Webflow for a net shop and use them to dynamically filter or organize products, you’ll need to set up multi-reference fields and organize your CMS thoughtfully.
1. Create the Category and Subcategory Collections
- Create a “Category” Collection with a basic Name field.
- Create a “Subcategory” Collection, and add:
- A Name field
- A Reference field linking to the Parent Category
- This creates the hierarchy: Categories > Subcategories.
2. Assign Categories to Products
- In your Products Collection, add:
- A Reference field to Subcategory
- (Optionally) a Multi-reference field if a product needs to exist in multiple subcategories.
- Once linked to the subcategory, the product is indirectly tied to the top-level category.
3. Display Categories and Subcategories Dynamically
- On any page, you can use Collection Lists to show categories.
- Nest another Collection List inside each to show related subcategories using “Filter: Subcategory → Category is Current Category”.
- For product pages or category pages, use filtering logic to display products tied to a given subcategory or parent category.
4. Link Category Pages Using CMS Templates or Filters
- Create dedicated template pages for Categories and Subcategories if needed.
- Within a category page, add filtered dynamic lists to show only products that belong to subcategories of that category.
- Alternatively, use combo classes or query parameters if building a more custom filtering system.
5. Use Finsweet’s CMS Filter for Ordering and Filtering
- Webflow doesn’t support advanced filtering/order logic out of the box.
- Use Finsweet’s CMS Filter + MixitUp script to filter and sort products on the frontend based on subcategory or category.
- Configure filters to target subcategory or category reference text.
- Dynamically filter when users select a category or subcategory.
Summary
Set up Category and Subcategory Collections using reference fields, link them to Products, and use Collection List filtering to display them hierarchically. For dynamic ordering or filtering based on categories, integrate Finsweet CMS Filter on the frontend.
