The storefront block
Discounts apply at checkout whether or not anything is on your product page. The theme app block is how a buyer finds out the offer exists before they get there.
The three blocks
The app’s theme extension ships three blocks. All three can only be added to product templates.
- Bundle promo (both cards): the original combined block, showing whichever of the two mechanics applies to the product being viewed. The app’s setup guide adds this one.
- Bundle it: the pair bundle card on its own.
- Complete the set: the complete set card on its own.
Use the two focused blocks when you want to place or style the pair card and the set card separately. Any of the three counts as installed for the setup guide on the app’s home page.
Adding one
From the app’s home page, the setup guide step Add the Bundle promo block to your theme opens the theme editor on your live product template with the combined block already staged in the main product section. Position it and save.
You can also add a block the usual way: Online Store, Themes, Customize, open a product template, add a block to the product section and pick it from the app section of the list.
A block on a product with nothing configured renders a placeholder card in the theme editor, so you can see where it landed. That placeholder is never shown on the storefront.
What a buyer sees
The set card shows the set’s name as “Complete the name”, the reward as a “Save 25%” or “Save $10” badge, an optional banner image, a progress bar with “2 of 3 collected”, and tiles for the items still missing. Once the cart holds everything, it reads “Set complete. Discount applied at checkout.”
The pair card shows “Buy it with add-on”, the saving badge, a hint telling the buyer what to add, and the add-on’s tile. Once both products are in the cart it reads “Bundle complete. Discount applied at checkout.”
Both cards update as the cart changes, without a page reload.
The Add all to cart button adds every item the set still needs in one click. Items the set names as a specific variant are always added. A whole-product item with several variants is skipped, because the app will not choose a size or a colour on the buyer’s behalf, and its tile keeps a Choose options link to the product page instead.
Settings
Shared by all three blocks:
| Setting | What it does |
|---|---|
| Color scheme | “Match the section” takes the colours of the section the block sits in, or pick one of your theme’s own schemes. |
| Heading size | H2, H3 or H4. |
| Show progress | The progress bar and the collected count. |
| Show missing products | The tiles for the items not yet in the cart. |
| Top padding, Bottom padding | 0 to 100 pixels. |
Bundle promo (both cards) adds Show banner image, which hides the set’s banner image even when one is set.
Complete the set adds:
| Setting | What it does |
|---|---|
| Show banner image | As above. |
| Show add to cart on product tiles | Turn off to rely on the larger button alone. Tiles still link to their product pages. |
| Add all to cart button | Hidden, or above the heading, beside the heading, above the products, or below them. |
| Add all to cart label | The button’s text. |
| Show price and savings on the Add all button | Shows what the items it will add cost, with the full price struck through when the set has a reward. |
Bundle it adds:
| Setting | What it does |
|---|---|
| Layout | “Card with details” or “Button only”. |
| Button label | Used by the Button only layout. A product’s custom.bundle_text metafield overrides it. |
| Show add to cart on product tiles | As above. |
| Add both to cart button | Where the button sits, with the same five positions. Ignored in the Button only layout, where the button is the block. |
What a theme needs
- Online Store 2.0, with JSON templates and a product section that accepts app blocks. Most current themes qualify. A theme that cannot take app blocks still gets the discount at checkout; it just cannot show the cards.
- Standard cart rendering. Themes that render line prices from Shopify’s own values and list line level discount allocations show the pair discount in the cart and cart drawer with no theme edits. That is the default in Dawn and themes derived from it.
- Colour scheme variables for the “Match the section” option to resolve. Themes in the Dawn family expose these. On a theme that does not, choose one of the numbered schemes or leave the block on your section’s own colours.
The block’s script runs on the product page only, reads the cart through Shopify’s own cart endpoints, and makes no requests to anything outside your store.