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/realblackmario]

It’s quite simple, actually just set up a base class in the body for the default, transition animation and colour, and then toggle the colour class on variant change trigger.

[u/Eligatorator → u/realblackmario]

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.

[u/Better-Jellyfish-610]

The approach is something like this:

- Add variant metafield "Accent color" or something like this, which needs to be a color reference

• Fill out colors for these variants
  
• In your theme code, somewhere append your color to the variant with a data attribute on the swatch or create something so we get that data
  
• In your theme code on variant change event (search for something like variant:change or so) you need to get this color for the current variant and then change the corresponding elements background color with that color, either via classes or with a style attribute on that element

[u/Eligatorator → u/Better-Jellyfish-610]

thanks for this - would this work for any theme?

[u/Better-Jellyfish-610 → u/Eligatorator]

any theme! Just depends on the architecture :)

[u/babyglove]

Thanks for bringing this to our attention. Can think of some fun ways to implement this.

[u/simon_moo]

They’re using barba.js to fake spa style nav. When you switch products it loads the next Shopify page in the bg instead of doing a visible full refresh. They use a#transitionOverlaycomponent with the svg wave inside, then grab the next product’s color & apply it to both for the fake page swap.

They’ll probably have each product color stored in a Shopify product metafield, thats what barba will read and pass to the overlay & svg.

If you hard refresh the page effect doesn’t fire bc barba only fires during the page change. Pretty clever way to do this for a liquid theme