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!
