Change Background When Flavor Selected.

Store Design

Topic summary

A user wants to implement dynamic background color changes on product pages when customers select different flavor variants, similar to functionality seen on Poppi and Olipop websites.

Responses provided:

  • One commenter notes the example sites use separate product pages for each flavor (visible in URL changes), not variant-based background switching on a single page
  • Another shares sample Liquid/JavaScript code demonstrating the core logic needed to modify theme files for this customization
  • A third points out this is an advanced, theme-dependent customization and offers paid development services

Status: The discussion remains open with no definitive solution implemented. The user has received both technical guidance and clarification that the reference examples work differently than initially assumed.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hey team,

I’m looking at creating something like the following pages where when you select a flavour, the background changes to mirror the colour of the flavour and/or packaging.

  1. Poppi - Select a different flavour
  2. Olipop - Select a different Flavour
2

@Willvanschaik Hey, thanks for posting here.
look at url bar.
these are products with different product settings.
let me know for yu need further help about it

3

Hello @Willvanschaik ,

To achieve the design as explained, you will need to make modifications to your Liquid and JavaScript files. Below, I’m sharing a code to guide you through the process.


## Classic Grape

### Our Flavors

Note: Focus only on the core logic and include only the essential code required.

4

Hi @Willvanschaik :waving_hand: that’s an advanced customization whose implementation can drastically vary by theme.

To get this customization then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.