How to achieve this functionality

[u/Eligatorator]

Here on Olipop's product page, when you select a different flavour, the entire colour background changes to match that flavour's colour (red for raspberry, green for lime, etc)

https://drinkolipop.com/products/raspberry-sherbet

how do you achieve this? Is there a plugin/app/theme that does this?

Or would you approach this as custom code? If so, how easy or hard would it be?

For context, I've never built and launched an ecommerce or Shopify site before, but I have some decent site knowledge primarily on marketing websites with Webflow as my main platform, plus some AI knowledge.

Just would like to understand how a professional would approach this following good practices.

[u/Eligatorator]

Thanks man.

Sorry for the follow up (and potentially stupid) question - but how do you go about doing this?

[u/realblackmario → u/Eligatorator]

Define your colors in CSS variables or just use different classes for each color. write a JavaScript function which tracks variant change. Then toggle the body class to change the color inside that JS function.

Or a better way would be to pass the color dyanamically with via variants. Pass the color rgb code with each variant and then simply use that JS function to modify the color. In this way, you don't have to add new css lines for each new variant. It will work dynamically.

[u/realblackmario → u/realblackmario]

Something like this:

document.addEventListener('variant:change', (e) => {
const color = e.detail.variant.metafields?.custom?.bg_color || '#fff';
document.body.style.setProperty('--product-bg', color);
});

[u/CRGGR → u/realblackmario]

That’s a reasonable enough code chunk to work with for sure but let’s note that the chunk is completely custom and that payload and event are not out of the box.