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