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 hierarchical categories and subcategories in Webflow for a net shop and use them to dynamically order products, you’ll need to structure your CMS Collections correctly and use Collection Lists with filtering and sorting.

1. Set Up Category and Subcategory Collections

• Create a CMS Collection called Categories with fields like:
• Name (Plain Text)
• Slug (Auto-generated)
• Parent Category (Reference field linking to the same Categories collection — optional for hierarchy)
• Use the Parent Category field to define top-level and subcategories. Leave it blank for top-level categories.

2. Create a Products Collection with Category Reference

• Create a CMS Collection called Products with fields like:
• Name, Price, Image, etc.
• Category (Reference or Multi-reference field to the Categories collection)
• If products can belong to one subcategory only, use a Reference field. If multiple, use a Multi-reference.

3. Display Categories and Subcategories Dynamically

• Use Collection Lists to show categories on the frontend.
• Add a Collection List for Categories and filter it to show only top-level categories (i.e., Parent Category is empty).
• Nest another Collection List inside it filtered to Parent Category = Current Category — displaying the subcategories.

4. Filter and Order Products by Category/Subcategory

• On product listing pages, add a Collection List connected to Products.
• Use Filters to display items from a selected Category or Subcategory:
• Filter by Category equals Current Category (useful for detail pages or collection templates).
• Use the Sort Order feature to dynamically order products by:
• Price, Name, Created Date, or any custom sort field.

Note: Webflow CMS does not natively support multi-level nested filtering (e.g., all products under a parent category and its subcategories). You'll need custom JavaScript or third-party tools like Jetboost or Finsweet CMS Filter if you want deeper dynamic filtering based on hierarchy.

5. Optional: Create Landing Pages for Categories

• For each Category, use either:
• A CMS Template Page for Categories (Webflow auto-generates one per collection item)
• A custom static page with Collection Lists filtered manually or via URL parameters

Summary

To create hierarchical categories in Webflow, use a Categories CMS Collection with a Parent Category reference structure. Link your Products Collection to these categories using a Reference field, then filter and sort products dynamically using Webflow’s Collection Lists and sort/filter options. For advanced dynamic behavior, consider third-party tools like Finsweet’s CMS Filter.