Using CMS to displaying image icons for a collection item

Hi everyone. I am interested to know how to achieve this result.

I would like to use webflow CMS to but a kind of online menu. Some drinks, for example, are only serving hot, so I have to add a “hot only” icon to both listing and that drink’s collection page.

Another example, there is a vegan dish, and I would like to add a little green veggie icon to this dish. This green icon will show as image ( insert as img or bg of a div box ). It will have to show on the menu page ( collection listing ) and on this dish’s page.

Such “hot only”, “vegan” and others like “with milk”, “spicy”, “recommended” has to be small icons instead of text. And I wish I can allow the client to choose as multiple selections when they publish a food item.

How to set up the CMS to achieve this? or maybe a similar result?

Thanks a lot.

Anthony

Say you have a drink collection.

Group the special characteristics depending on how they overlap (like if a drink can be ‘only hot’ bit also ‘vegan’, then vegan and only hot can’t be in the same group. Do as many group as you need.

Now you can either create collections for each of those groups, with items representing the options, and link those categories collection as fields in the drink collection (reference fields) OR create options fields with the characteristics as options.

Nox on CMS template page of in lists, add all the icons for all characteristics, and use Conditional visibility to display them or not.

I would do it like this.

  1. Create a collection for “Food Types” (Call it whatever you want)

  2. Multi-reference this collection in your menu collection (or wherever you’re creating food items).

  3. When creating new items simply select all the tags that apply.

This Webflow guide on multi-reference fields will show you how to display the content on your website.

1 Like

Thanks a lot @carlosdlt. Following your advice, I am able to add those tags to the collection page and display as small icons. Here are the steps.

  1. Create “menu items” collection, eg. Food A, Food B, Food C
  2. Setup “tags” collection (eg. vegan, spicy, with milk, recommended) and add image (small icons) field to the “tags”
  3. Go back to “menu items”, and add a multi-reference field of “tags”
  4. Go to the collection page of “menu items”, add a collection list and connect with “tags”, and display the icons as image or bg of div.

But I would also like to show such icons (images of the “tags”) on a list of items on the menu page, like this:

  • Food A “recommended” … $12
  • Food B “spicy” “vegan” … $15
  • Food C “with milk” … $9

To display the food list, I have to create a collection list and call the “menu items”. But I do not have the option to get the “tags” data display within the collection list of “menu items”.

Any idea?

Thank you very much!

Would you mind sharing your read only link so I can get an idea of how you currently have the menu set up?

That was an example. I had the same problem when handling a website some time ago, and I am facing the same problem again.

Let me build a simple site to demonstrate my doubt a bit later. Thanks.

@carlosdlt Hi. I build a simple site to demonstrate my question. Do you have any idea how to show the “tags” on the collection list of “menu items”?

https://preview.webflow.com/preview/menu-cms-test?utm_medium=preview_link&utm_source=designer&utm_content=menu-cms-test&preview=e814c149b574b185bbaf4ce724348bb9&mode=preview

Thanks a lot ~~~

As of right now I don’t believe Webflow has the functionality to display those tags outside of the template pages.

Some changes to the menu items collection are necessary to make it work.

That being said, you can keep the types collection the way it is but instead of a multi-reference field in the menu items collection let’s just do multiple (1-3) single-reference items.

This is a screenshot from my test project. I deleted the multi-reference field and then created three single reference fields that all link back to the “Food Types” collection I made.

On the page with the dummy menu I made in my own project I simply made a horizontal flex div to nest the tags. Then I made 3 tag divs and linked each one up to the 3 type collection fields I made.

If a menu item doesn’t have any tags it’ll simply show up blank. When multiple tags are selected on the collection item they appear side by side as shown under the “Hot Wings” item.

I know I changed up the answer from what I originally provided but we have to work around the limitations that currently exist with the multi-reference field.