Product add-ons

A list of optional extras under the buy box (“add a lens cloth, add a case”). Ticked rows go to the cart with the main product as separate lines, discounted if you set one. Needs: the Storesynk AI app on the Pro plan.

In the app

1. Open Discounts & Bundles, click Create, and pick Product add-ons.
2. Choose which product pages show the widget: all products, specific products, or collections.
3. Add the add-on rows: product, quantity per tick, whether it is preselected, and optionally the allowed variants.
4. Pick a discount: none, a percentage, free gift, or free shipping.
5. Set the widget title and optional subtitle, the dates, and mark it Active.

Limits: 25 offers per shop, 10 add-ons per offer. When several offers match a product, the most specific wins (products, then collections, then all).

On your storefront

Place the widget inside the product page’s <storesynk-product>, in the same product as the page’s <add-to-cart>. There is no separate add button: the page’s own add-to-cart sends the host line plus one line per ticked add-on.

<storesynk-addons>
  <div>
    <show-addons-title></show-addons-title>
    <show-addons-subtitle></show-addons-subtitle>

    <addon-list>
      <storesynk-product>
        <select-addon><input type="checkbox" aria-label="Add to order" /></select-addon>
        <show-image><img alt="" /></show-image>
        <show-title></show-title>
        <show-addon-original-price></show-addon-original-price>
        <show-addon-price></show-addon-price>
        <change-option group="1"><select><option>Choose</option></select></change-option>
      </storesynk-product>
    </addon-list>
  </div>
</storesynk-addons>

• The first child of <storesynk-addons> is the offer template; the first child of <addon-list> is the row card, a <storesynk-product> with no handle.
• <select-addon> wraps a native checkbox (recommended, with an aria-label or <label>). Preselected rows start ticked. Ticking is blocked while the row’s variant cannot be bought.
• Prices are advisory. The app’s discount function applies the real discount at checkout, and forfeits it if the cart no longer matches the offer.

storesynk-addons[ss-empty], storesynk-addons[ss-loading] { display: none; }
addon-list storesynk-product[ss-selected] { border-color: #111; }
show-addon-original-price { text-decoration: line-through; color: #999; }
select-addon[ss-out-of-stock] input, select-addon[ss-unavailable] input { opacity: .4; }

States

Attribute	Set on	Meaning
ss-empty, ss-loading	storesynk-addons	no live offer, or fetching
ss-selected	row storesynk-product	the row is ticked
ss-out-of-stock, ss-unavailable	select-addon	the row’s variant cannot be bought
ss-variants-truncated	row storesynk-product	too many variants; the row uses its default variant

Related

• Product add-ons reference
• Product add-ons troubleshooting
• Add to cart and buy now