Set one colour across the Pops product page

Updated 2 months ago

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.

In Shopify admin, open a product and add the trafik-plus.theme_color metafield to each variant you want to colour.
Set the metafield value to the colour you want the product page to use.
Repeat for every variant that should drive the page colour.
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.

FAQ

How do I set one colour across the Pops product page?

Add the trafik-plus.theme_color metafield to your product variants and set each variant's value to the colour you want the page to use. Pops reads that metafield and drives the page's theme colours into that hue.

Where do I add the theme_color metafield for Pops?

In Shopify admin, open a product and add the trafik-plus.theme_color metafield to each variant you want to colour, then save. The theme only reads metafields — it cannot create them — so the metafield must exist on your variants before the page can adopt the colour.

Does Pops apply the exact same colour to every element on the product page?

No. The effect is a hue family, not one flat colour. Pops converts the colour value to OKLCH, extracts its hue, and applies it as --global-hue, so each element keeps its own lightness, chroma, and opacity while all sit in the same colour range.

Why does the Pops product page colour change when I switch variants?

The hue is set per variant. When a customer selects a different variant, the page hue updates to match that variant's theme_color.

Does the single-colour effect recolor product swatches on the Pops product page?

No. Product swatches keep their own configured colour or image — they are not recolored by --global-hue.

Which elements does the Pops single-colour effect recolor?

Was this helpful?