Bundles

A set of products sold together at a percentage off. The product page shows the bundle with its members and savings; one click adds every member, and Shopify’s cart and checkout show them as a single bundle line. Needs: the Storesynk AI app on the Pro plan.

In the app

1. Open Discounts & Bundles, click Create, and pick Fixed bundle.
2. Add the included products, and per product set the quantity and, optionally, which variants are allowed.
3. Set the Discount percentage and the Bundle title shoppers see in cart and checkout.
4. Tick Show the bundle widget on all included products’ pages, add a description and media if you want a bundle product page, and set the active dates.
5. Set the status to Active and save.

Saving creates a bundle product in your admin that powers the merged cart line. It is created unpublished: open it and add it to your sales channel, or the merged line will not work. A shop can hold 100 bundles of up to 20 products each.

On your storefront

Drop the widget inside the product page’s <storesynk-product>. It hides itself on products with no live bundle.

<storesynk-bundle>
  <bundle-offer>
    <show-bundle-title></show-bundle-title>
    <show-bundle-percentage></show-bundle-percentage>

    <bundle-member-list>
      <storesynk-product>
        <product-link>
          <a>
            <show-image><img alt="" /></show-image>
            <show-title></show-title>
          </a>
        </product-link>
        <show-price></show-price>
        <show-member-quantity></show-member-quantity>
        <change-option group="1"><select><option>Choose</option></select></change-option>
        <change-option group="2"><select><option>Choose</option></select></change-option>
      </storesynk-product>
    </bundle-member-list>

    <show-bundle-original-total></show-bundle-original-total>
    <show-bundle-total></show-bundle-total>
    <p>You save <show-bundle-savings></show-bundle-savings></p>
    <add-bundle-to-cart><button type="button">Add bundle to cart</button></add-bundle-to-cart>
  </bundle-offer>
</storesynk-bundle>

• The first child of <storesynk-bundle> is the per-bundle template; the first child of <bundle-member-list> is the member card, a <storesynk-product> with no handle (the engine feeds it).
• Member option pickers list only the variants the merchant allowed. Use positional group numbers, since members are arbitrary products.
• <add-bundle-to-cart> sends every member in one cart update; the app’s cart transform merges them into the bundle line, and the cart drawer’s open-on-add fires as usual.
• A bundle renders only when complete. If its dates are closed or a member is unpublished, the whole offer drops out.

storesynk-bundle[ss-empty], storesynk-bundle[ss-loading] { display: none; }
show-bundle-percentage::after { content: " off"; }
show-member-quantity[ss-empty], show-bundle-original-total[ss-empty] { display: none; }
add-bundle-to-cart[ss-loading] button { opacity: .4; cursor: wait; }

States

Attribute	Set on	Meaning
ss-empty	storesynk-bundle, displayers	no live bundle, or nothing to show (quantity 1, no savings)
ss-loading	storesynk-bundle, add-bundle-to-cart	fetching or adding
ss-out-of-stock, ss-unavailable	member storesynk-product, add-bundle-to-cart	a selected member cannot be bought
ss-variants-truncated	member storesynk-product	more than 100 variants; the card falls back to the default variant

Related

• Bundles reference
• Bundles troubleshooting
• Cart drawer