How to add nested / sub categories to products

If you want to nest your categories for better organization, you can do this natively in CartGenie and Webflow with multi-reference fields. This can be as many levels deep as you like.

Example:

• Shirts

  • T-Shirts

  • Polos

  • Dress Shirts

• Shoes

  • Dress Shoes

  • Tennis Shoes

Step 1: Add a “Subcategory” CMS Collection

In Webflow, create a new CMS collection to house your subcategories. Name it whatever you want such as “Subcategories”.

Create ALL subcategory items here (for all your categories). This is not specific to a certain category.

Step 2: Add a Multi-Ref Field to Category Collection

Open CartGenie (this is the preferred method to creating in Webflow) and go to Category Settings page.

Add a New Field. Select Multi-Reference.

Name it as you wish. Such as “Subcategories”.

Select your “Subcategories” CMS collection. Save the field.

Step 3: Add a Multi-Ref Field to Products Collection

Open CartGenie (this is the preferred method to creating in Webflow) and go to Product Settings page.

Open Product Settings

Add a New Field. Select Multi-Reference.

Name it as you wish. Such as “Subcategories”.

Select your “Subcategories” CMS collection. Save the field.

Step 4: Add Subcategories to Each Category

Open CartGenie’s Categories page.

Click into each category and go to the “Additional Info” tab.

Find the Subcategories reference field you created and add the subcategories for each category. (Example: Dress Shoes and Tennis Shoes go in the “Shoes” category)

Publish each category once you’ve made the changes.

Step 5: Add Subcategories to Each Product

Open CartGenie’s Products page.

Open Products

Click into each product and add to your preferred categories on the basic info tab.

Then, go to the “Additional Info” tab.

Find the Subcategories reference field you created and add the subcategories for each product. (Example: Athletic Running Shoes go in the “Shoes” category and the “Tennis Shoes” subcategory)

Publish each product once you’ve made the changes.

Note: You can create as many nested collections as you want with this same general structure. You simply need to add a multi-ref field in each subcategory level you create and add all “children” subcategories to it. Then be sure to add a multi-ref field inside the products collection for each subcategory level so you can add a product to all subcategory levels that it should belong to.

Step 6 (optional): Display Categories & Subcategories on Product Page

Go to your Products template page in Webflow and add a CMS collection list block wherever you want to display your categories and/or subcategories

Connect the collection list to your Categories collection.
Be sure to select the “Categories” option which is under the product options section.

FYI: By choosing “Category” under the Product Fields section instead of the standalone Categories collection, Webflow will only display the categories that this product belongs to.

Then add a text block inside of the collection item and connect that to the "Name” field to display the category name.

You can do these same steps with a second collection list beside it or underneath it and connect it to the Subcategory collection.

Be sure to connect the collection list to the “Subcategories” option underneath the “Product Fields” section and not the standalone Subcategories collection.

Optional: I wrapped both collections and a > symbol in an H Flex block so they display inline. I also wrapped each text block in a link block and linked it to “Current Category”

Now, my product page has nice breadcrumb links right at the top for easier navigation.

Step 7 (optional): Create Category and Subcategory Pages

Category Page

Go to your Categories template page in Webflow and add a new Collection List block and connect it to Subcategories collection (underneath the “Collection Fields” section)

Add a text block (or heading) inside each collection list and connect it to the “Name” field of the subcategory. Wrap each text block in a link block as well and connect it to “Current Subcategory”.

Note: instead of linking to the subcategory page, you can instead use these subcategories as a “Filter” for your product collection list using Finsweet. This will immediately filter the visible products to just the ones that match the selected subcategory (instead of opening a new subcategory page).
Read our guide here.

Then add a new collection underneath or beside it and connect it to the "Products” field in the Category Collection.

Then, follow these steps to add the CartGenie product card inside the collection.

Here’s an idea of how it could look.

Subcategory Page

You can now create a similar design and layout on the subcategory page.

The biggest difference here is how you create the Product Collection List block.

Because we have a Subcategories multi-ref field in the Product collection, but we do not have a “Product” field in the Subcategories collection, then we must do the following:

Add a Collection List Block and connect it to the main Products Collection

You should now see a list of ALL products - not just the ones that belong to this subcategory.

We can fix this easily by selecting the collection list layer and going to the layer settings panel. Find the “Filter” section and add the following Filter:

• Field: Subcategories

• When: Contains

• Value: Current Subcategory

This will filter the collection list to only display products that have added the current subcategory to the multi-ref field in the “Additional Info” tab.

Now our subcategory page looks like this: