Scroll to explore
Farrow & Ball product page, mobile screenshot: A product page header that repaints itself in the colour you've selected
(PRODUCT_PAGE_)
1 / 28
Best practice UXCRO

A product page header that repaints itself in the colour you've selected

Farrow & Ball Product page
View live example
01

What they do

The top of the page repaints itself in whatever colour you pick. Choose Nancy's Blushes and it turns pink, and the text flips from white to black so you can still read it.

02

Why it works

On a paint page the colour is the product. A photo of a tin is just a photo of the packaging. Filling the screen with the shade gives you the biggest sample a screen can show. The text flip is the bit most builds would skip, and it's what makes it work on every colour from Railings to Setting Plaster.

03

Makes sense when

Anything where the variant you pick is a look: paint, tiles, flooring, worktops, fabric. On Shopify it's a hex code in a metafield driving the background, plus a check on whether the text should be white or black. Skip it where a photo of the product in use sells better than the swatch.

Want this on your store?

I'll tell you which of these patterns will move organic revenue for your catalogue, and which to skip.

Book a discovery call