Skip to content
Book a call
Handbook / The add-to-cart button

The add-to-cart button

The add-to-cart button and the line right under it.

5 patterns

Why it matters on a supplement pageEvery buyer sees the button. Put the price on it and a short promise under it. Their last question is answered before the click.

★★★★★(2,184)Product name
1 month · Save 38%$49
PURCHASE FOR $49
Or try once
ONE-TIME PURCHASE $79
HSA/FSA eligible
01 / 05

Price in the button

The chosen price sits in the button ('Purchase for $49'). Buying once is a quieter outline button below.

Use it when

Almost every page. Buyers don't have to scroll back to check the price.

Watch out

The price must update every time the buyer changes an option.

For a fast path to buyFor value for money
★★★★★(2,184)Product name
Add to cart
✓ 60-day money-back guarantee✓ Ships today, free over $50
02 / 05

Reassurance right under the button

One or two short lines under the button: the guarantee and the shipping promise.

Use it when

Every page. It answers 'what if?' just before the click.

Watch out

Two lines at most, or it turns into a wall of text.

For a fast path to buyFor safety, and a way out
★★★★★(2,184)Product name
Subscribe & save$27
–1+
Add to cart · $27
03 / 05

Quantity stepper beside the button

A small − 1 + counter beside the button. The price updates with the quantity.

Use it when

Products people buy several of at once.

Watch out

For supplements, supply cards are usually clearer than a plain counter.

For a fast path to buyFor value for money
Mango · 30ctscrolls with you
Add · $34.99
04 / 05

Sticky add-to-cart bar

When the button scrolls away, a bar stays on screen with the chosen option, the price and the button.

Use it when

Long pages on phone. The button stays one tap away while shoppers read.

Watch out

The bar must show the option and price the buyer picked, not reset them.

For a fast path to buy
★★★★★(2,184)Product name
Subscribe & save$27
Add to cart · $27
Combine favorites. Save more.Build a mixed box of any 3
Bundle & save up to 26%
05 / 05

Upgrade card below the button

A small card under the button offers a bigger or mixed order ("Combine favorites. Save more.").

Use it when

Brands with a range or bigger bundles. The first choice stays simple; the upgrade comes after.

Watch out

Keep it below the button. Above it, the upgrade competes with the main choice.

For value for moneyFor a fast path to buy

Not sure which one fits your page?

Book a free call. I’ll bring one idea made for your product page and the test to run.

Book a free call