How can I create hierarchical categories and subcategories in Webflow for a net shop, and can these categories be used to dynamically order products?

To create a hierarchical category and subcategory system for a Webflow e-commerce site and use that structure to dynamically organize products, follow these steps:

1. Create Category and Subcategory CMS Collections

• Go to CMS in your Webflow project.
• Create a Collection called Categories with fields like:
• Name (eg. “Clothing”)
• Slug
• Create another Collection called Subcategories with fields like:
• Name (eg. “T-Shirts”)
• Category (Reference) → Reference the Categories collection.
• Slug

This structure ensures your subcategories are dynamically linked to a top-level category.

2. Link Products to Subcategories

• In your Products Collection, add a Reference Field named “Subcategory” that connects to the Subcategories Collection.
• When adding/editing a product, assign it to the appropriate subcategory.
• Since the subcategory is linked to a category, this creates an indirect product → subcategory → category relationship.

3. Display Categories and Subcategories in the UI

• Use Nested Collection Lists on pages to display hierarchy:
• Add a Collection List for Categories.
• Inside it, nest another Collection List for Subcategories, filtered by the current category.
• Inside each subcategory, nest a third Collection List filtered by subcategory reference to show products.

Note: Webflow allows only up to 5 nested Collection Lists, and only one nested collection per wrapper.

4. Filter and Sort Products Dynamically

• On the Subcategory page, filter products where Subcategory equals Current Subcategory.
• On the Category page, use a Collection List of Subcategories, and optionally chain them to show all products in subcategories under that category using multi-reference or filters.
• Sorting products can be done by fields like “Name,” “Price,” or custom fields (e.g., “Display Order”).

Webflow doesn't inherently allow relational filtering (e.g., show all products for subcategories of a given category), but you can workaround this by:

• Creating a multi-reference field in Categories that lists all subcategories.
• Using third-party tools or custom JavaScript with attributes (e.g., using Jetboost or FS CMS Load) for advanced filtering and sorting.

5. Optional: Use Jetboost or Finsweet for Advanced Filtering

• Tools like Jetboost CMS Filters or Finsweet’s CMS Library allow real-time dynamic filtering (e.g., filter a product list by category → subcategory without reloading the page).
• This lets users interactively select a category and see only corresponding subcategories and products.

Summary

To build hierarchical categories in Webflow:

• Create separate Category and Subcategory CMS collections with linked references.
• Connect products to subcategories, which are linked to categories.
• Use nested Collection Lists to display products under subcategories and categories.
• Apply filters and sort logic with native Webflow features or extend with tools like Jetboost or Finsweet for dynamic interaction.