Set one colour across the Pops product page

Make the Pops product page use a single colour by setting the trafik-plus.theme_color metafield on your product variants. The theme reads that metafield and drives the --global-hue CSS variable, which shifts the page's theme colours into that hue. The effect is a hue family, not one flat colour: each element keeps its own lightness, chroma, and opacity, so backgrounds, text, borders, and buttons all sit in the same colour range.

How the single-colour effect works

Pops reads the theme_color metafield in the trafik-plus namespace from each product variant, converts the colour value to OKLCH, and extracts its hue channel. That hue is applied to the page as --global-hue, and the theme's colour variables substitute it for their own hue while keeping their original lightness, chroma, and alpha. The hue is set per variant, and the page updates to the selected variant's hue whenever a customer switches variants.

Set the metafield on your variants

The theme only reads metafields — it cannot create them — so the trafik-plus.theme_color metafield must exist on your variants before the page can adopt the colour.

1. In Shopify admin, open a product and add the trafik-plus.theme_color metafield to each variant you want to colour.

2. Set the metafield value to the colour you want the product page to use.

3. Repeat for every variant that should drive the page colour.

4. Save, then open the product page to see the theme colours adopt that hue.

Each variant can carry its own theme_color. When a customer selects a different variant, the page hue updates to match that variant's colour.

What the hue affects

--global-hue recolors the theme-driven elements on the product page: buttons, text, backgrounds, borders, headings, cards, inputs, gradients, regular and sale prices, product ratings, and the selected media thumbnail border. Variant option pills and the dropdown control follow the same hue-aware button and text colours.

What it does not change

Product swatches keep their own configured colour or image — they are not recolored by --global-hue. The effect is also a shared hue, not a single identical colour: every element retains its own lightness, chroma, and opacity, so the page reads as one colour family rather than one flat fill.