One Colour for the Action You Want

Open your own product page on your phone and count the things asking to be tapped. Add to cart. Buy it now in wallet purple. A notify-me bar. A discount popup with its own button, and a chat bubble sitting on top of the lot.

On a surprising number of the Shopify stores we audit, most of these share one colour, usually the brand accent, because somewhere along the way every clickable element got painted with it. The result is a page where nothing leads.

"Colour should answer before words. A customer shouldn't need to read the labels to know what the page wants them to do."

Button hierarchy is one of the least glamorous levers on a storefront. It's also one of the cheapest, because it lives in theme settings rather than code, and a change there applies site-wide.

Why one colour carries the page

The convention is simple. The primary action gets a solid fill in a colour reserved for it alone. Secondary actions get an outline. Everything else is a text link. Your theme almost certainly shipped this way; Shopify's Dawn, for example, has a solid primary button and an outline secondary style built in, and most modern themes follow the same two-tier pattern.

And the cost of breaking it is highest on the pages already asking for several decisions at once. A cart page carries checkout, continue shopping, one or two express wallet buttons, a discount field and sometimes a gift-note toggle. When all of those carry equal visual weight, the button that makes you money is competing on even terms with the button that leaves the page.

How stores end up here

It's rarely a decision anyone made. A rebrand lands and the new accent colour gets applied to everything clickable, because that's what "on brand" looked like in the style guide. An app installs with its own hard-styled button that ignores your theme settings entirely. Dynamic checkout puts a wallet-branded button hard against add to cart, so even a disciplined page carries two heavyweights above the fold. Then the next agency inherits the site, matches new sections to the loudest existing style, and the pattern compounds.

"Three handovers later the page is shouting in unison. It's almost never one bad call. It's an accumulation of reasonable ones."

The fix is smaller than it looks

Pick the one action on each template that moves money forward. On the product page that's add to cart. On the cart it's checkout. On a collection page it's the product card itself. Reserve your fill colour for that action and demote everything else a tier, secondary actions to outline, the rest to text links.

Two cautions while you're in there. Keep contrast in mind: WCAG's non-text contrast rule (1.4.11) asks for at least 3:1 between a control and the colours next to it, and outline buttons fail this more often than solid ones do. And make the change in your theme's colour schemes rather than as per-section overrides, or the old pattern creeps back with the next section anyone adds.

A word on wallet buttons: you can't restyle them, that's the point of them. What you can do is decide deliberately where they appear rather than accepting them everywhere by default, and let your one primary colour do its job on the templates that matter most.

Measure it yourself, about 5 minutes

1. Take four screenshots on your phone. Homepage, a collection page, your best-selling product page, the cart.
2. Convert them to grayscale, then squint. On each page, one element should still come forward. If nothing does, or if the thing that comes forward is a popup, you've found your problem.
3. Count how many elements on the product page use your accent colour. The number you're after is one.

At beCommerce, we check button hierarchy as part of every conversion and theme review. If you want a hand finding where yours breaks down, book your free audit →.