Show bundles on your storefront
Add the Subrise bundle blocks to your theme, style them, and set the storefront defaults and text for dynamic bundles.
Subrise shows bundles on your storefront through theme blocks you add in Shopify's theme editor. A static bundle sells as a normal product even without them, but the blocks show what's in it and the subscribe option. A dynamic bundle needs the Full Page Bundle block to show at all.
The bundle blocks
| Block | Where it goes | What it shows |
|---|---|---|
| Product Bundle | Product templates | On a static bundle's product page: what's included, the price and saving, and the subscribe option. It finds bundle products by itself and stays hidden on other products. |
| Full Page Bundle | Page templates | The bundle builder for a dynamic bundle: the steps, the products to pick from, and a summary panel. |
| Subrise Bundles (app embed) | Theme settings > App embeds | Theme-wide bundle settings. See App embed. |
Add the Product Bundle block
- In your Shopify admin, go to Online Store > Themes and click Customize.
- Open the product template your bundle products use.
- Click Add block, open Apps, and choose Product Bundle.
- Click Save.
Add the Full Page Bundle block
Each dynamic bundle has its own Shopify page. The block goes on the page's template, so every bundle page on that template shows its own bundle.
The easiest way is from the bundle: open it in Subrise and click Set up in its checklist. The theme editor opens on the bundle's page. Then:
- Click Add section, open Apps, and choose Full Page Bundle.
- Click Save.
New dynamic bundle pages use the template set in Bundles > Settings > Page template for dynamic bundles. Add the block to that template once and every new bundle page carries it.
Warning
Don't add the block to your default page template, which your other pages share. If a bundle page uses the default template, create a new template for it from the template menu in the theme editor first.
Leave the block's Bundle ID setting empty. On a bundle's own page, the block always shows that page's bundle, even with a Bundle ID entered. A Bundle ID, such as BDL-x7k9m2 from the bundle's Details card, only applies on other pages that use the template.
Style the blocks
The two blocks have similar groups of settings in the theme editor.
Product Bundle:
- Width & spacing: width, spacing, padding, border width, corner radius, gallery image width, and the number of Builder grid columns.
- Colors: background, the Bundle summary panel, body text, headings, borders, accent, savings and sale price.
- Buttons & badge: button colors, corner radius, Full-width buttons, and badge colors.
- Display options: Show bundle badge, Show progress bar, Enable search field, Sticky builder sidebar, and for static bundles Show product gallery.
Full Page Bundle:
- Layout: content width, Show progress bar, Show bundle badge, Use sticky sidebar, Enable search field, and the number of Builder grid columns.
- Colors: background, the Bundle summary panel, body text, headings, borders, accent and savings.
- Buttons & badge: button colors, corner radius, Full-width buttons, and badge colors.
- Border: Border width and Corner radius.
The text customers see, such as button labels, comes from Subrise, not the theme editor. See Storefront text.
App embed
Turn on Subrise Bundles under Theme settings > App embeds for these theme-wide settings:
- Show bundle indicators on products
- Accent color
- Enable quick add interactions
- Show product images
Bundle settings in Subrise
Go to Bundles and open the Settings tab.
Storefront behavior
- Out-of-stock items: how they show in the dynamic bundle builder. Choose Hide out-of-stock items, Show out-of-stock items as unavailable, or Always show all items.
- Page template for dynamic bundles: the page template new dynamic bundle pages use. Pick another name if your theme already uses this one.
- Track bundle analytics: record views, add to cart and checkout events for the Analytics tab.
Storefront text
Set the labels in the bundle builder: Add to cart button, Search placeholder, Selection heading and Empty selection text.
Click Save in the save bar.