Bundle multiple select
Bundle multiple select shows a set of products. Shoppers add the ones they want, and a summary shows their progress toward savings tiers, for example 10% off 2 items and 20% off 3.
Before you start
The section only shows the savings. Create matching automatic discounts (for example "Buy 2, get 10% off") in Discounts in Shopify Admin so the price drops at checkout.
How to set it up
Step 1: Add the section
- In the theme editor, open the home page and click Add section in the Template area.
- Choose Bundle multiple select. Drag it to where you want it on the page.
Step 2: Choose the products
- Under Products, select a Collection (its first 12 products) or Manual products, and how many show on desktop and mobile.
Step 3: Set the tiers
- Under Bundle tiers, set Tier 1 quantity (1) and Tier 1 savings.
- Turn on tier 2 and tier 3 for bigger bundles.
Step 4: Style the summary
- Under Bundle summary, set the width, border, color scheme, progress line and the Add bundle label.
Settings reference
Bundle multiple select
| Products | |
|---|---|
| Collection | Displays the first 12 products from this collection. When selected, it replaces the manual product list below. |
| Manual products | Used when no collection is selected. |
| Products to show (desktop) | Slider. |
| Products to show (mobile) | Slider. |
| Maximum desktop columns | Columns reduce automatically when the available width becomes narrower. |
| Mobile columns | Options: 1, 2. |
| Column gap (desktop) | Slider. |
| Column gap (mobile) | Slider. |
| Bundle tiers | |
| Tier 1 quantity | Slider. |
| Tier 1 savings | Slider. |
| Enable tier 2 | Turns this on or off. |
| Tier 2 quantity | Slider. |
| Tier 2 savings | Slider. |
| Enable tier 3 | Turns this on or off. |
| Tier 3 quantity | Slider. |
| Tier 3 savings | Slider. |
| Product cards | |
| Use global settings | Turns this on or off. |
| Media ratio | Sets the shape of the media frame. Adapt keeps each image's original shape. Options: Adapt to image, Square, Landscape (4:3), Portrait (4:5), Portrait (3:4). |
| Image fit | Options: Cover, Contain. |
| Card corner radius | Slider. |
| Enable card background | Turns this on or off. |
| Card background color | |
| Show vendor | Turns this on or off. |
| Show product title | Turns this on or off. |
| Title lines | Options: Unlimited, 1 line, 2 lines, 3 lines. |
| Equal title height | Turns this on or off. |
| Show price | Turns this on or off. |
| Content alignment | |
| Hover effect | Options: None, Instant image, Fade image, Soft zoom, Curtain reveal, Media gallery. |
| Gallery indicator thickness | Slider. |
| Show indicator background | Turns this on or off. |
| Animate adding to bundle | Turns this on or off. |
| Bundle summary | |
| Summary width | Slider. |
| Summary corner radius | Slider. |
| Show summary border | Turns this on or off. |
| Summary border thickness | Slider. |
| Summary color scheme | Colors from Theme settings > Colors. |
| Progress line thickness | Slider. |
| Progress line color | |
| Heading | |
| Add bundle label | |
| Section heading | |
| Description | |
| Heading alignment (desktop) | |
| Heading alignment (mobile) | |
Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.