How to add product add-ons to a Shopify product page

Add the block in the theme editor

On any Online Store 2.0 theme, add-on widgets are app blocks you position yourself — no Liquid, nothing to undo. This assumes you have already picked an app that charges add-ons properly rather than attaching notes; if that distinction is new, read product options vs add-ons first, because it decides which app you should have installed.

1. 01

   Create the add-on products first

   Each add-on should be a real product with its own SKU, price and stock. Set them to be hidden from your catalogue and search so they do not appear as standalone items in collections — they should only ever be reachable through the add-on block.

2. 02

   Assign add-ons to the products they belong to

   Attach each add-on to the specific products or collections it makes sense for. Site-wide add-ons are noise: an engraving option on a candle teaches shoppers to ignore the block everywhere else.

3. 03

   Open the product template and add the block

   Online Store → Themes → Customise, switch the page selector to Products → Default product, then "Add block" inside the product information section. Pick the add-on block from the app list.

4. 04

   Position it above the Add to cart button

   This is the one place add-ons differ from delivery dates. The decision has to be made before the buy button is pressed, so the block goes above it — below, and it is read after the moment it needed to influence.

5. 05

   Save, then test on a live product page

   Open the real storefront rather than the preview, add an add-on, and check it on a phone. Then complete a test order and confirm the add-on appears as its own charged line.

Where it goes, and why

• Directly above the Add to cart button — the strongest position, and the default choice. The offer is in the eyeline at the moment the decision is made.
• Between the variant picker and the buy button — good when the add-on relates to the variant chosen, since the two decisions read as one flow.
• In the cart or a slide-out drawer — works as a second chance, and it is the right place for order-level extras like insurance or delivery upgrade that do not belong to a single product.
• Below the product description — weak. By the time anyone reaches it they have either bought or gone.
• A post-purchase upsell page — a different mechanic entirely, and worth having, but it does not replace the product page block. Post-purchase converts on convenience; the product page converts on relevance.

Choosing and pricing the offers

• Keep the add-on well below the base product price. A rough rule is under a quarter: it should read as a small yes, not a second purchase decision.
• Offer two or three, not eight. Every extra option is a decision, and decisions on a product page cost conversions on the main item.
• Pick things that remove a future annoyance — the spare, the refill, the protective case, the gift wrap that saves an errand. Those convert far better than an unrelated product you would like to shift.
• Never pre-tick a paid extra. It is a dark pattern, it produces chargebacks, and in the UK and EU pre-selected additional payments fall foul of consumer protection rules.
• Price it as a real line item. If the add-on is not charged as its own line, it is invisible to your reporting and someone has to invoice it by hand.

If the extras you have in mind turn out to be several existing products at a combined price rather than accessories, that is a bundle, and the inventory question comes first — covered here.

Before you decide whether it worked

1. Complete a real test order with an add-on. Check it appears on the order, on the packing slip, and in your reporting as its own line with its own revenue.
2. Check inventory decrements. Add-ons that sell steadily will run out, and one with no stock tracking oversells in silence.
3. Run PageSpeed Insights on the product page before and after. This block sits above the buy button, so anything that renders late causes layout shift exactly where it hurts.
4. Check a product with no add-ons assigned. It should collapse cleanly rather than leave a gap or an empty heading.
5. Give it two full weeks and enough orders to mean something. Most add-on experiments are killed or declared a triumph on a sample size that supports neither conclusion — and watch overall conversion rate as well as AOV, since an add-on block that lifts AOV while suppressing the main purchase is a loss.

Frequently asked questions