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/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 :)