Layouts

The bundle form can show each group's options in three layouts. Choose one with Option layout on the Bundle Selection block.

List

List (radios and checkboxes) is the default. Each option is a radio button or checkbox with the product's name and price on one line.

The list layout is compact and works well for:

• Bundles with many options, where images would make the page very long.
• Products customers know by name, such as sizes or flavours.
• Narrow spaces, such as a sidebar.

Grid

Grid (squares) shows each option as a square tile with the product image, name and price. The tile's border highlights when it's selected, and a radio button or checkbox in the corner shows whether customers can choose one or several.

The grid layout works well for:

• Visual products, where the image helps customers choose.
• Smaller groups of options, typically up to a dozen.
• Condition groups with a few short choices.

Columns

Set the number of tiles per row separately for product groups and condition group branches, and for desktop, tablet and mobile screens. See Product columns and Condition columns.

The screen sizes match common breakpoints: desktop is 1280px and wider, tablet is 768px to 1279px, and mobile is narrower than 768px. Use the device preview buttons at the top of the theme editor to check each size.

Rows

Rows shows each option as a full-width row with a small image, the product's name and details, and its price on the right.

The rows layout works well for:

• Products with long names or extra details, such as SKUs.
• Showing images without the height of a grid.
• Mobile screens, where rows stay easy to tap and read.

Product images

The grid and row layouts show an image for each option. BundleM8 picks the image in this order:

1. The product metafield set in Image metafield, if you've set one and the product has a value.
2. The variant's image.
3. The product's featured image.

Options with no image show their text only.

Using an image metafield

Use a metafield when your product images don't work well as small tiles, for example lifestyle photos where the product is hard to see, or when you want the same style of image for every option.

1. In your Shopify admin, go to Settings → Custom data → Products.
2. Select Add definition.
3. Name it, for example "Bundle image". Shopify sets the namespace and key to custom.bundle_image.
4. Choose the type File and allow images. A list of files also works; BundleM8 uses the first one.
5. Save the definition.
6. Open each product, upload an image to the new metafield and save.
7. On the Bundle Selection block, enter the metafield's namespace and key in Image metafield, for example custom.bundle_image.

Products without a value in the metafield fall back to their variant or featured image.

Using different layouts for different bundles

Layout settings belong to the Bundle Selection block, so every bundle on the same product template uses the same layout. To give some bundles a different layout:

1. In the theme editor, create another product template, for example bundles-grid, with its own Bundle Selection block and layout.
2. In Shopify, open each bundle product that should use it and choose the template under Theme template.

Preview in the bundle editor

The bundle editor's Preview form always uses the list layout, because layouts are set in your theme. Use the theme editor to preview the grid and row layouts.