Can I Make CMS Category Affect BG Color?

I’m building a site with a flavor list. The client wants the flavors made with beer to be red, wine to be blue, and so on. The problem is, their product list is fairly long and I can’t figure out how to set up my collection list so that the Option dropdown also affects BG color without needing to manually set a color for each product. I’d like to set it up so that when the client selects “Beer” in the CMS dropdown, the div block turns red. Is this possible? Thanks in advance!

Share link: https://preview.webflow.com/preview/voodoojams2?preview=62169d56a47516f130c4144a23cf375c

Hi @Bitperfect

I think I understand your question - and I think you could get this working with categories.

So…where you have the ‘jam type’ in each product, that would actually be a reference field to a category collection instead.

In this new category collection you could also set a ‘colour’ field associated with it.

A good simple example to look at structure wise would be this Webflow classic:
https://preview.webflow.com/preview/template-escape?preview=8ad0688bc99728a3109aa9845c8ede0c

(Escape - Blog HTML5 Responsive Website Template)

If you click on the ‘category tags’ on each tile and then the settings - you can see it pulls in from a BG colour in the CMS. Take a look at the CMS and you will see Photography for example has a purple ‘colour’ field.

Any posts that are photography based, have a reference field to the ‘photography’ category.

Hope that helps - pretty good for a friday evening with tired eyes :grinning:

1 Like

That’s great! Thanks for the help!

No problem - while i’m here i’ll also mention another tip - if the client wanted to have control of the order that the items appear - beyond the ‘sort order’ options, you can also add a ‘number’ field and sort by those rather than most recent etc…

1 Like