Add-to-cart button best practices: size, colour, placement and text
How to make your add-to-cart button easy to find and easy to tap: placement above the fold, contrast, wording, sticky buttons on mobile and what to put around it.
Your add-to-cart button should be the most obvious thing on the product page: visible without scrolling on desktop and mobile, in a high-contrast colour nothing else on the page uses, large enough to tap easily, and labelled plainly ("Add to cart"). Put price, variant choices, delivery information and reviews right around it, so shoppers have what they need at the moment they decide.
- Visible without scrolling, on desktop and on a phone.
- One high-contrast colour, used only for the main action.
- Plain text: "Add to cart" or "Add to bag". Clever labels slow people down.
- Delivery time, returns and reviews belong next to the button.
Placement: above the fold
If a shopper has to scroll to find the button, some won't. On desktop, the button usually sits to the right of the product photos, under the title and price. On phones, the photos often fill the first screen and push the button down, which is the most common problem StorePeek finds on product pages.
- Keep the space between the price and the button small: no long description in between.
- On mobile, consider a sticky add-to-cart bar that appears once the main button scrolls out of view.
- Make sure no chat widget or cookie bar covers the button on small screens.
Colour and size
The button should stand out from everything around it. Pick one strong colour that contrasts with your background and use it only for the main action; if your banners, badges and links share that colour, the button stops standing out.
On phones, make it full width or close to it and at least as tall as a fingertip. A small outlined button is easy to miss and hard to tap.
Wording
"Add to cart", "Add to bag" or "Buy now" are understood instantly. Avoid vague or clever labels. If the product is out of stock, say so clearly on the button and offer a back-in-stock alert instead of a dead end.
Test it
Open your best-selling product on your phone. Can you see the button without scrolling? Is it obvious within a second? Run a free StorePeek check to have your homepage reviewed on desktop and mobile; Premium also checks a product page, add-to-cart button included.
Frequently asked questions
What colour should my add-to-cart button be?
There's no single best colour. What matters is contrast: a colour that stands out against your page and isn't used for anything else, so the eye goes straight to it.
Should I use a sticky add-to-cart button on mobile?
Often yes, especially for long product pages. A bar that appears once the main button scrolls away keeps the action within reach. Make sure it doesn't cover important content.
"Add to cart" or "Buy now"?
Both are clear. "Add to cart" suits stores where people buy several items; "Buy now" suits single-product stores or express checkout. Use one main label consistently.