Storefront
Bundle Selection block
The Bundle Selection block displays the bundle form on your product pages. Its settings control how the form behaves and looks. Settings apply to the block they're set on, so bundles using different product templates can have different settings.
To find these settings, open the theme editor, go to your bundles template and select the Bundle Selection block. See Theme setup if you haven't added the block yet.
Product
The product whose bundle the block shows. By default it uses the product the page is showing, which is what you want on a product template.
Choose a specific bundle product to show its bundle on another page, such as your home page or a landing page.
Enable Custom Form Handling
On by default. The block adds its own form, with a quantity selector, price total and Add to cart button, and checks the customer's selection before adding the bundle to the cart.
Turn it off to use your theme's own product form and add to cart button instead. The block then attaches the customer's selection to your theme's form. Use this if your theme's buy buttons do something you want to keep, such as opening a cart drawer.
Using your theme's form
With custom form handling off:
- Your theme's product form must be on the same page. The block finds it using the product's ID.
- Your theme's add to cart button doesn't check the group rules, so customers could add a bundle with fewer or more selections than your groups require.
- The block's quantity selector, price total and add to cart button aren't shown.
Show quantity input
Shown when Enable Custom Form Handling is on. On by default.
When it's on, the form shows a quantity selector so customers can add several of the same bundle at once. Turn it off to hide the selector. Bundles are then always added with a quantity of 1.
Use cart attributes
Off by default. When it's on, each product in the bundle is also added to the cart item as a line item property, such as "M8 Blend, Ground: x 1".
Most current themes show the products inside a bundle in the cart automatically. Turn this on if yours doesn't, so customers can see what's in their bundle in the cart. Up to 20 products are listed. If the bundle has more, the rest are summarised as "includes: 5 more products".
Show product SKUs
Off by default. Shows each product's SKU under its name in the form, for example "SKU: CM8-ETH-250".
Show selection hints
Off by default. Shows each group's selection rules under its title, so customers know what to choose before they start. For example:
| Group settings | Hint |
|---|---|
| Minimum and maximum 3 | Choose 3. |
| Minimum 2, maximum 4 | Choose 2 to 4. |
| Minimum 1, no maximum | Choose at least 1. |
| Minimum 0, maximum 3 | Choose up to 3. |
Groups without rules worth stating, such as an optional single choice, don't show a hint. Screen readers announce the hints even when this setting is off.
Layout settings
Option layout
How each group's options are displayed:
- List (radios and checkboxes): the default. A compact list of radio buttons and checkboxes.
- Grid (squares): square tiles with product images, in columns.
- Rows: full-width rows with a small image, the product details and the price.
See Layouts for examples and guidance.
Product columns (desktop, tablet, mobile)
Shown for the grid layout. The number of tiles per row in product groups at each screen size:
| Setting | Screen width | Range | Default |
|---|---|---|---|
| Product columns (desktop) | 1280px and wider | 2 to 5 | 3 |
| Product columns (tablet) | 768px to 1279px | 2 to 4 | 3 |
| Product columns (mobile) | Narrower than 768px | 1 to 3 | 2 |
Condition columns (desktop, tablet, mobile)
Shown for the grid layout. The number of tiles per row for condition group branches, at the same screen sizes. Branches are usually short labels, so you might show more of them per row than products.
| Setting | Range | Default |
|---|---|---|
| Condition columns (desktop) | 1 to 5 | 3 |
| Condition columns (tablet) | 1 to 4 | 3 |
| Condition columns (mobile) | 1 to 3 | 2 |
Image metafield
Shown for the grid and row layouts. Optional. The product metafield to use for each option's image, entered as namespace.key, for example custom.bundle_image. See Product images.
Advanced
Metadata only
Off by default. When it's on, the block doesn't display a form. It only adds the bundle's data to the page, for developers building their own bundle form with the JavaScript API.
BundleM8 Scripts app embed
The BundleM8 Scripts app embed is under App embeds in the theme editor. It must be on for the Bundle Selection block to work.
Use theme
On by default. Loads BundleM8's styling for the bundle form, including your colours from App settings. Turn it off to style the form completely yourself. See Styling with CSS.