Setup
App settings
The Settings page in BundleM8 holds settings that apply across all of your bundles. Select Save at the top of the page after making changes.
Default theme template
Settings → Bundle settings → Default theme template
The theme template that new bundle products are created with. Enter the template's suffix: bundles uses a template called product.bundles.json in your theme. The default is bundles.
This lets every new bundle open on a product page that already has the Bundle Selection block, without you assigning the template by hand. Changing this setting only affects bundles created afterwards. To change an existing bundle's template, edit its product in Shopify.
Create the template first
If no template with this name exists in your theme, Shopify uses your default product template instead, and the bundle form won't appear. See Create a bundle product template.
Appearance
Settings → Appearance
These colours style the bundle form on every product page in your store. They apply when the Use theme setting on the BundleM8 Scripts app embed is on, which it is by default.
| Setting | Where it's used |
|---|---|
| Primary color | The add to cart button, selected radio buttons and checkboxes, the border of selected options in grid and row layouts, and keyboard focus outlines |
| Text on primary color | Text and tick marks on the primary colour, such as the add to cart button's label |
| Border color | Option borders, radio button and checkbox outlines, and the quantity selector |
| Error color | Messages shown when a selection isn't valid |
| Disabled color | Checkboxes that can't be changed: fixed products included in the bundle, and unavailable products |
| Corner roundness | How rounded the corners of buttons, checkboxes, option tiles and images are: None, Small, Medium or Large |
Select Reset to defaults to go back to BundleM8's original colours. Your changes aren't saved until you select Save.
Your theme's own fonts and text colours are used for everything else, so the form matches the rest of your product page.
Colour contrast
Low-contrast colours make the bundle form hard to use, especially for shoppers with low vision. BundleM8 checks your colours against the WCAG accessibility guidelines and shows a warning when one is hard to see:
| Check | Aim for |
|---|---|
| Text on primary color against the primary color | At least 4.5:1 |
| Primary color against a white page | At least 3:1 |
| Error color against a white page | At least 4.5:1 |
Contrast is checked against a white page background because BundleM8 can't see your theme's colours. If your product pages have a dark background, use your own judgement.
Suggested colours
When a colour fails a check, the warning suggests a replacement. Suggestions keep the same hue and only make the colour lighter or darker, so it still matches your brand. If no shade of your primary colour works with your current text colour, the suggestion also switches the text to white or black.
Select Apply suggested colors to fill in the suggestions, check them in the colour fields, then select Save.
Going further
To change more than these settings, use CSS in your theme. See Styling with CSS. Layout options, such as grid and row layouts and product images, are set on the Bundle Selection block. See Layouts.