Setup

Theme setup

BundleM8 adds the bundle form to your storefront through a theme app extension. You set it up in the theme editor, with no changes to your theme's code. It works with any Online Store 2.0 theme.

Theme setup has four steps:

  1. Create a bundle product template
  2. Turn on the BundleM8 Scripts app embed
  3. Add the Bundle Selection block
  4. Hide your theme's own price and buy buttons

Create a bundle product template

A separate product template for bundles lets you add the bundle form without changing your regular product pages. New bundles use the bundles template by default, so name your template bundles unless you've chosen a different name in App settings.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Find your theme and select Customize.
  3. From the page menu at the top of the editor, select Products → Create template.
  4. Name the template bundles and base it on your default product template.
  5. Select Create template.

Already have bundles?

The template is applied when a bundle is created. To move an existing bundle onto the template, open its product in Shopify and choose the template under Theme template.

Turn on the app embed

The BundleM8 Scripts app embed loads the script that powers the bundle form. The form won't appear without it.

  1. In the theme editor, select App embeds in the sidebar.
  2. Turn on BundleM8 Scripts.
  3. Select Save.

Default styling

BundleM8 Scripts has one setting, Use theme, which is on by default. It loads BundleM8's styling for the bundle form, including your colours from App settings.

Turn Use theme off only if you're going to style the form completely yourself. See Styling with CSS.

Add the Bundle Selection block

The Bundle Selection block displays the bundle form on the product page.

  1. In the theme editor, open your bundles template: from the page menu, select Products → bundles.
  2. In the product information section, select Add block, then Apps, then Bundle Selection. Depending on your theme, you can also add it as its own section.
  3. Drag the block to where you want the form to appear, usually where the price and buy buttons are.
  4. Select Save.

To preview the form, choose a bundle product from the preview menu at the top of the editor.

The block has settings for the form's behaviour and layout. The ones to check now are:

  • Product: leave this on the default, which uses the product the page is showing.
  • Enable Custom Form Handling: keep this on so the form has its own quantity selector, price total and add to cart button. See Custom form handling.

Every setting is described in Bundle Selection block.

Hide your theme's buy buttons

With custom form handling on, the bundle form has its own price, quantity selector and add to cart button. Hide your theme's versions on the bundles template so customers don't see two of each:

  1. In the theme editor, open the bundles template.
  2. In the product information section, select each of these blocks and hide it (select the eye icon) or remove it:
    • Price
    • Variant picker
    • Quantity selector
    • Buy buttons
  3. Select Save.

Block names vary between themes. Because this is done on the bundles template, your regular product pages keep their buy buttons.

Keep the block outside the product form

With custom form handling on, the Bundle Selection block can't sit inside your theme's own product form. If the form doesn't appear and your browser console shows "Bundle form cannot be embedded within another form", move the block out of the buy buttons area, or add it as a separate section.

Check it on your storefront

  1. Open a bundle product on your storefront. The product must be Active and available on the Online Store sales channel.
  2. Make a selection and add the bundle to your cart.
  3. Check the cart shows the bundle with its products, and that checkout shows the right price.

If something doesn't look right, see Troubleshooting.

Previous
Installing BundleM8
Next
App settings