The company wants to display online the motor-oils that it sells offline.
Every product category needs to have three filtering/sorting options, namely: Oil-Type, Brand, Quantity.
Some products share product categories.
As you see in the image below, P1 and P3 (IN RED) under product category - Automotive, are also available in under product category - Commercial Vehicles.
Similarly, P1 and P2 (IN GREEN) under product category - Automotive, are also available in under product category - Commercial Vehicles.
The ones written in Black do not share product category. They are specific/available in only the category that itâs displayed under.
Now, I will create a CMS collection for Automotive and one for Commercial Vehicles and insert products in them accordingly. But instead of making double entries for products that share categories, how can I use the single-reference & multi-reference fields here? Is it possible to do this?
For the filtering/sorting option thatâs available under every product category, I intend to use this: https://webflow.com/website/mixitup-webflow-tutorial. Although, I still donât know how to implement it, but this will be a topic for another day!
Oil Type (dropdown selector) [engine oil, gear oil]
Brand (dropdown selector) [brand names]
Next if you want to ramp it up, if necessary, add other collections. BUT always only have a single product collection with each product only listed once. Remember that each collection will get its own template page which could be helpful instead of creating static pages with collection lists/conditions.
@matthewpmunger Thank you for replying and for sharing that article. Honestly at this moment, Iâm quite confused with information overload and Iâm unable to figure out what to do next. Sorry for that, this is my first time designing a website on webflow and first time using WF CMS.
So from what you said, I need to make 1 CMS collection for all 600+ products. Insert a Switch Field (9 in total, 1 for every product category).
Create the following 3 CMS collections:
Oil Type (multi-reference)
Brand (single reference)
Quantity (multi-reference)
Is this the way to go about?
Hereâs my confusion now, I need to have 3 filtering/sorting options on every one of the 9 product category pages. Let me know you something I did on Wix to explain better.
This Products Page displays all Product Categories:
Now, when we open Agricultural Oils, you see Oil-Type in Anchor Links. Somewhat similar, I need to have 3 filtering/sorting options on every Product Category page on webflow.
Now on webflow, I created a page that displays the product category list and then, links to the page that contains the respective CMS collection. The Switch field allows me to choose which to products to display (category wise) on that page. Correct?
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:
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.
Brand (single-reference)
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.
@matthewpmunger Thank you very much for understanding. 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!
Webflow eCommerce wonât work in this case because you have to put a price on every item. Whereas, we only want to create an online-database of all the items we sell offline. (We do, however, intend to create a different website for e-commerce in summer this year. Spoiler: Iâll do that on webflow too!).
So right now, Iâm using a CMS siteplan and currently have an active project. Iâve already shared a Read-Only in my post, anyway, here it is again:
Thanks for offering help to do the layout on my behalf, I appreciate it too. But I believe the best way to learn is to do it yourself. So hereâs my new collection:
A page that displays the product category, along with filtering/sorting options. Example in image - Commercial Vehicles category is displaying available oil types, namely: engine oil & gear oil.
So if I have products in categories displaying on a template page, I donât think its possible to create another template page to showcase as a product page. Or is it?
From what I see, Page setting has only filters & sort order:
@matthewpmunger I think Iâve figured out the right way to do it.
On Automotive Oils page, I put two CMS collections and changed what it displays using filters. So right now, it is showing engine oils & gear oils from all brands and all size variants. Please let me know if Iâm doing it right.
@matthewpmunger I was doing what you showed me and Iâve got a doubt.
Agricultural Oils, which is a product category, (displayed in tabs and as H1) is dynamic. But Engine Oils (displayed in tabs & as H2) and Gear or Transmission (displayed as H2) are static, so they appear on every CMS template.
Between 12:04 and 12:14 mins. of the video, you showed this.
I need the Oil-Type as headings / tabs (Engine Oils, Gear or Transmission, etc) to be dynamic. The Oil-Type headings need to change, just as the products displayed under it. I am not able to do it. Seems like only the products displayed can be filtered, but not the headings.
Thatâs why I had created static pages for every product category. So that I could individually name the Oil-Type (as heading or as tabs).
Am I missing something here?
Sorry to bother you again about this.
This is because weâre dealing with multi-reference fields. In order to use conditions based on a multi-ref, the elements must be inside a collection list connected to that multi-ref list. I have a solution for you that will require double the amount of collection lists. Letâs just take a look at the Engine Oils as an example, here are the steps:
Duplicate the collection list containing products limited to type:engine oil and current category
Erase the elements inside the first collection list
Add a H2 element inside the collection list and change the text to "Engine Oils
Limit that collection to only show 1 item
On both collection lists, remove the text element from the empty state
On both collection lists, give the empty states a class of âhiddenâ and set the display property to None
Now you have a H2 label and a list of items that will dynamically show based on the conditions. See gif below.
Now youâll just need to repeat this process for the other Oil Types and then the label and products will dynamically populate each Categories item page based on this template.
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!
