Hey @RohanGanachari no need to apologize. Thatâs why all of us come to the forum, to help and learn from each other. Itâs perfectly understandable feeling overwhelmed and getting brain burn trying to setup complicated database relationships. Iâve been there myself many times too.
The Setup
Letâs go with option 2 I listed above. Hereâs what you will need:
- Products Collection
- Category Collection
- Oil Type Collection
- Brands Collection
Each of those collections will have a template page. So you will have a product page for each product, a page for each category, for each oil type, and for each brand. The collection page urls will look something like mysite.com/category/automotive or mysite.com/oil-type/engine-oil or mysite.com/brand/webflow
The product pages are pretty simple. Youâll bind the data from that product to elements on the page such as text, images, and so on.
Reference Fields
For each collection, youâll go in and add the necessary fields such an image and rich text description. Now the product collection will need some special fields.
- Category (multi-reference)
-
- This is a multi-ref because a product could be either or both automotive and commercial.
- Oil Type (multi-reference)
-
- This is a multi-ref because a product could be either or both an engine and gear oil.
-
- This is a single-ref because a product can only have one brand manufacturer
Are you using Webflow Ecommerce? If so then Webflow will provide the quantity and size/weight fields automatically. If youâre using a different payment processing solution then you might need to add a number field for the qty.
Collection Template Pages
For the other pages, youâll bring in a collection list onto the template page. Connect that list to the products. Then youâll add a condition (in the item settings panel) to the list such as âproduct category equals current categoryâ.
That way on the page for Automotive youâll only get products for automotive cars. To take it a step further add a second condition such as âproduct oil type equals engine oilâ. This will give you a list of automotive engine oils. Then add a second collection list to the page with these two conditions: âproduct category equals current categoryâ and âproduct oil type equals gear oilâ. Now youâll have two list of products on the Automotive page, one for engine oils and one for gear oils.
Youâll repeat this process of utilizing collection lists and conditions to get products showing in the correct places. You can then link to these pages from the navigation or any button/link on the site.
Filtering/Sorting
Using the Mixitup plugin either on the cms template pages or in static page called Store or something, well that is a different subject. But know that setting up using referenced collections will work with Mixitup which will require hidden text for the functionality. The hidden text will be tied to the references to give Mixitup its power.
You can use the sort functionality on a collection list but this is not adjustable on the fly by visitors. When using Mixitup, think of the Webflow sort order as your initial âorderâ state for the list.
Closing
Last thing, do you already have a Webflow project started? I could easily setup the cms structure for you and then transfer it over to your account if thatâs helpful. Let me know.
Hopefully you can understand everything. Iâll include some helpful links below.
Links
https://university.webflow.com/article/intro-to-webflow-cms
https://university.webflow.com/article/reference-field
https://university.webflow.com/article/multi-reference-field
https://university.webflow.com/topic/designing-collections
I appreciate your patience and you taking the time out to explain in detail. Iâve read and watched almost all videos on WF university dozens of time - thus, the brain fry!
