Volume discounts

Quantity breaks on a product, a collection, or the whole catalog. The product page shows the tiers as selectable rows; checkout applies the discount automatically. Needs: the Storesynk AI app on the Pro plan. Works on any Shopify plan.

In the app

1. Open Discounts & Bundles, click Create, and pick Volume discount.
2. Choose what it applies to: all products, specific products, or collections.
3. Add up to six tiers: quantity, discount percentage, and the title, label, and badge the widget shows. Mark one as selected by default, and allow “buy extra” on a tier to show it as open-ended (“Buy 3+”).
4. Set the widget title, the checkout discount label, dates, purchase type, and which other discounts it may combine with.
5. Mark it Active and save.

Tier titles and labels may contain {quantity} and {discount}; the storefront fills them in. Limits: 100 volume discounts, 100 products or 25 collections per discount.

On your storefront

Place the widget inside the product page’s <storesynk-product>, near the price. Only one live discount renders per product.

<storesynk-volume-discount>
  <div>
    <show-volume-discount-title></show-volume-discount-title>

    <volume-tier-list>
      <volume-tier>
        <show-tier-title></show-tier-title>
        <show-tier-badge></show-tier-badge>
        <show-tier-label></show-tier-label>
        <show-tier-original-price></show-tier-original-price>
        <show-tier-price></show-tier-price>
        <show-tier-each-price></show-tier-each-price>
      </volume-tier>
    </volume-tier-list>

    <add-volume-to-cart><button type="button">Add to cart</button></add-volume-to-cart>
  </div>
</storesynk-volume-discount>

• The first child of the widget is the per-discount template; the first child of <volume-tier-list> is the tier row, which is itself the selectable radio. Do not add your own role or tabindex.
• Tier prices follow the page’s selected variant, so the widget sits alongside the product’s <change-option> pickers.
• <add-volume-to-cart> adds the selected tier’s quantity of the current variant. An open-ended tier adds exactly its quantity; the shopper edits the rest in the cart.
• Prices are advisory. The app’s discount function applies the real percentage at checkout.

storesynk-volume-discount[ss-empty], storesynk-volume-discount[ss-loading] { display: none; }
volume-tier { display: block; border: 1px solid #ddd; border-radius: 10px; padding: 12px; cursor: pointer; }
volume-tier[ss-active] { border-color: #111; }
show-tier-badge[ss-empty], show-tier-label[ss-empty], show-tier-original-price[ss-empty] { display: none; }

States

Attribute	Set on	Meaning
ss-empty, ss-loading	storesynk-volume-discount	no live discount, or fetching
ss-active	volume-tier	the selected tier
ss-empty	tier displayers	the tier has no badge, label, or savings
ss-loading, ss-out-of-stock, ss-unavailable	add-volume-to-cart	adding, or the variant cannot be bought

Related

• Volume discounts reference
• Volume discounts troubleshooting