[BASICS] [TUTORIAL] 'Dynamic Product List' in 'Ecommerce Categories Template'

[TUTORIAL] ‘Dynamic Product List’ in ‘Ecommerce Categories Template’

Took me three days to find this thing out, and couldn’t find any clear and concise post, on how to do such basic thing.

GOAL: Display my dynamic ‘CMS Product List’ in the ‘Ecommerce Categories Template’ and let the products change based on category slug (URL).


STEP 1 - BACKEND - SETUP - CREATE PRODUCTS

  • Add your Products to the Backend of Webflow, and save.

Path: ECOMMERCE > PRODUCTS > + NEW PRODUCT


STEP 2 - BACKEND - SETUP - CREATE PRODUCT CATEGORIES

  • Create your Product Categories.

Path: ECOMMERCE > CATEGORIES > + NEW CATEGORY

  • Add your Products to the Product Categories of your choice under Products, and save.


STEP 3 - DESIGNER - ECOMMERCE CATEGORIES TEMPLATE

  • Go to the Designer & select the Ecommerce Categories Template Page.

  • Select your CMS Collection List and go to the Collection List Settings by clicking on the gear icon on the right side of your screen.

  • Select Source: Products (NOT Categories)

  • Select the Filter (underneath) and make sure, that you have the following settings applied.

1. Categories
2. Contains
3. Current Category
in that order

(this will tie your created ecommerce product categories, to the respective Collection URL SLUGs, auto generated by Webflow.)

STEP 4 - DESIGNER - NORMAL CMS SOURCING PRCEDURE
Procced with your normal CMS Data Sourcing of your Collection Item, until you have everything what you need.

DONE

Cheers

Dom

It worked!
Thank you very much <3