Skip to main content
The Product add-on block offers a single, specific product you choose as an add-on inside the cart, promoting one known product (a warranty, a sample, a best-seller) as a quick add directly in the cart.
Unlike Upsells, which surfaces products chosen by a strategy, the Product add-on always shows the exact product you pick.
Product add-on block offering an additional product for the shopper to include with their cart

​
Behavior

  • If no live variant resolves — the product is unset, archived, or out of stock — the block renders nothing rather than a dead button.
  • The control reflects whether this block’s own add-on line is in the cart, so switching it off removes the line it added (and won’t affect the same product added elsewhere).
  • A compare-at price strikes through when there’s a genuine markdown; the ”% off” label is hidden if the discount rounds below 1%.
  • The add-on image falls back to the product’s featured image when the chosen variant has none.

​
Settings

Title, Price label, and Description all support the same four tokens: {{product_title}}, {{price}}, {{compare_at_price}}, and {{savings}}.

​
Placement and limits

  • Region: body or bottom.
  • Maximum: 3 per cart state — the filled cart and the empty cart each get their own allowance.
  • State: both filled and empty cart.
  • Not added by default. Not locked — you can remove or hide it.

​
Custom template

Supports a custom template from its Code tab, which replaces this block’s built-in markup with your JSX. These are the props it receives.

​
Content

​
State and actions

format decides which handler applies: handleAdd for button, handleToggle for checkbox and toggle. A null variantId means there’s nothing to add, so gate your control on it rather than calling a handler that can’t succeed.

​
Design

Style this block with its Design section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank.

​
Text

The Text section in Design lets you control the typography of three elements. Use the Text element picker to switch between them. Title — the product name. Also supports a custom font family. Bold and text color are set in the Rich Text Editor above (in the Settings tab), not here. Price — the price line. Bold and text color are set in the Rich Text Editor above. Description — the supporting copy. Bold and text color are set in the Rich Text Editor above.
Clicking a text element directly in the cart preview highlights it and opens its controls in the panel automatically.
What are design settings? Learn more here: Design settings.