Streaming live at 10am (PST)

Need help with reference & multi-reference field

#1

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.

image

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! :smiley:


Here is my public share link: LINK
(how to access public share link)

#2

Hey @RohanGanachari

Start by reading this article. It will help you wrap your head around how to organize your data.

I would start as simple as possible.

Product Collection (fields listed below)

  • Name (plain text)
  • Automotive (switch) [true/false]
  • Commercial (switch) [true/false]
  • 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.

Product Collection (fields listed below)

  • Name (plain text)
  • Category (multi-reference)
  • Oil Type (multi-reference)
  • Brand (single-reference)

Hopefully this will help get you jumpstarted.

#3

@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:

  1. Oil Type (multi-reference)
  2. Brand (single reference)
  3. 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?

But what about the 3 filtering/sorting options? Is this where I insert the mix-it-up code on every page to do it?

Thank you.

#4

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.
  • 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.


Links





1 Like
#5

@matthewpmunger Thank you very much for understanding. :slightly_smiling_face: 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:

I was working on it since sometime and I ran into a problem.

From what you’re saying, I’d have products displaying on a template page, where I can set conditional visibility.

But what I need is,

  1. A page that displays product categories. DONE.

  1. 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.

  1. Finally, when you click on any product, it takes you to a ‘product page’. In webflow, it would be the template page.

You can view the above website that I designed on Wix over here: https://www.linelube.co.uk/products

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:

And the template setting has the Conditional Visibility, which I had previously designed as product page.

There must be a workaround to this! :cold_sweat:
Maybe I’ve mixed things up in confusion.

#6

@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. :grin:

I think I did the same as you mentioned. Except that, instead of using Conditional Visibility, I used filters.

#7

Hey @RohanGanachari

I thought a video would be the best way to walk you through the next steps. Hope this helps!

1 Like
#8

@matthewpmunger Thank you so much taking the time to make this video and to teach me basics. :webflow_heart:

I have learnt more than I asked for and got some great ideas to do things…

I’m on holidays for the full of next week. Can’t wait to get back and do everything you taught me. :grin:

And I will definitely pass on this kindness to somebody. Thank you.

1 Like
#9

@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.

Read-only link: https://preview.webflow.com/preview/online-lubricants?utm_source=online-lubricants&preview=ff8d377fc002beee242e503f2bac33fc

#10

Hey @RohanGanachari

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:

  1. Duplicate the collection list containing products limited to type:engine oil and current category
  2. Erase the elements inside the first collection list
  3. Add a H2 element inside the collection list and change the text to "Engine Oils
  4. Limit that collection to only show 1 item
  5. On both collection lists, remove the text element from the empty state
  6. 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.

Here is the new collection list that is limited.

Here is the structure of the two collection lists.

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.

Hope this helps. Happy designing!

1 Like