The Bundle Products section in the Be Yours theme allows you to display a curated group of products together in one section. Customers can view the products, choose variants when available, and add the full set to the cart using the Add set to cart button.
This section is useful for creating bundle-style selling, complete-the-look offers, gift sets, starter kits, routines, product pairings, and editorial shopping experiences.
STEPS:
1. Understanding the Bundle Products Section
The Bundle Products section has two main areas:
| Area | Description |
|---|---|
| Main image with hotspots | Displays a large image and product hotspots. Each hotspot is connected to a product block. |
| Product list | Displays the selected products, product images, titles, prices, variant selectors, quick buy buttons, and the Add set to cart button. |
Each product block controls:
- The product shown in the list.
- The hotspot position on the main image.
- The hotspot color.
- Whether quick view is enabled.
- Whether quick buy is enabled.
- Whether the vendor is displayed.
When customers click Add set to cart, the section adds the selected variant from each product block to the cart.
2. Adding the Bundle Products Section
To add the Bundle Products section:
- From your Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the template where you want to add the section.
- Click Add section.
- Select Bundle Products.
- Add a main image.
- Add product blocks.
- Position each product hotspot on the image.
- Click Save.
The Bundle Products section can be used on many template types, including:
| Template type |
|---|
| Home page |
| Product pages |
| Collection pages |
| Pages |
| Blog and article pages |
| Cart page |
| Search page |
| 404 page |
3. Recommended Product Setup
Before adding products to this section, make sure each product is ready in Shopify admin.
Recommended product setup:
| Product requirement | Why it matters |
|---|---|
| Product is active | Inactive products may not be available to customers. |
| Product is available on the Online Store sales channel | Products must be available online to display and sell correctly. |
| Product has a featured image | The section displays a small product image in the product list. |
| Product has available variants | Sold-out products cannot be added to the cart. |
| Product price is configured | The section displays each product price. |
If a product has multiple variants, the section displays a variant dropdown so customers can choose the variant before adding the set to cart.
4. Section Settings
The section settings control the main image, layout, text content, alignment, highlighting, and spacing.
Image
| Setting | Description |
|---|---|
| Image | Select the main image used for the bundle display. Product hotspots appear on this image. |
Recommended image use:
- Use a lifestyle image showing all bundle products together.
- Use a high-quality image with enough space for hotspots.
- Avoid placing important details too close to the image edges.
Layout
| Setting | Description |
|---|---|
| Layout | Choose whether the image appears first or the text/product list appears first. |
Available layout options:
| Option | Description |
|---|---|
| Image first | Displays the image on the left and bundle content on the right. |
| Text first | Displays bundle content on the left and the image on the right. |
Text box position
| Setting | Description |
|---|---|
| Text box position | Controls the vertical position of the text and product list. |
Available options:
| Option | Description |
|---|---|
| Top | Aligns the content to the top. |
| Middle | Aligns the content to the middle. |
| Bottom | Aligns the content to the bottom. |
Text alignment
| Setting | Description |
|---|---|
| Text alignment | Aligns the content on desktop. |
| Mobile text alignment | Aligns the content on mobile. |
Available options:
- Left
- Center
- Right
Width and divider
| Setting | Description |
|---|---|
| Full width | Makes the section span the full browser width. |
| Show divider | Adds a divider line above the section. |
5. Heading and Subheading Settings
The Bundle Products section includes a subheading and heading area.
Subheading
| Setting | Description |
|---|---|
| Subheading | Adds smaller text above the main heading. |
| Subheading size | Controls the visual size of the subheading. |
Default example:
Bundle & Save
Heading
| Setting | Description |
|---|---|
| Heading | Adds the main title for the section. |
| Heading size | Controls the visual size of the heading. |
| Heading tag | Controls the HTML tag used for the heading. |
Default example:
Build Your Own Basket
Heading tag options include:
| Heading tag |
|---|
h1 |
h2 |
h3 |
h4 |
h5 |
h6 |
div |
span |
p |
Use the heading tag carefully for SEO and page structure. In most cases, h2 is a good choice for sections below the main page heading.
6. Highlight Settings
The Bundle Products section supports highlighted text for the subheading and heading.
| Setting | Description |
|---|---|
| Enable highlight | Enables the theme highlight effect for selected text. |
| Highlight style | Controls the style of the highlight effect. |
| Highlight color | Sets the highlight color. |
Available highlight styles include:
| Style |
|---|
| Marker |
| Circle |
| Underline |
| Bold underline |
| Modern underline |
| Sketch underline |
| Squiggle |
| Heavy squiggle |
| Solid color |
To use the highlight effect, enter the heading or subheading using the highlight format supported by the theme.
Example:
Build Your _Own_ Basket
Then enable Highlight and choose a highlight style.
7. Padding Settings
Padding controls the vertical spacing above and below the section.
| Setting | Description |
|---|---|
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
Both padding settings can be adjusted from 0px to 100px.
Recommended setup:
| Page type | Suggested padding |
|---|---|
| Homepage section | 36px to 72px |
| Product page section | 24px to 48px |
| Landing page hero area | 0px to 36px |
8. Adding Product Blocks
Each Product block represents one product in the bundle.
To add a product block:
- Open the Bundle Products section in the Theme Editor.
- Click Add block.
- Select Product.
- Choose a product.
- Configure image ratio, vendor display, quick buy, and quick view.
- Set the hotspot color.
- Adjust the horizontal and vertical hotspot position.
- Repeat for each product you want to include.
- Click Save.
The section supports up to 6 product blocks.
Recommended number of products:
| Bundle type | Recommended number |
|---|---|
| Simple bundle | 2–3 products |
| Routine or kit | 3–5 products |
| Full gift set | 4–6 products |
9. Product Block Settings
Each Product block has its own product display and hotspot settings.
Product
| Setting | Description |
|---|---|
| Product | Select the product to display in the bundle. |
The selected product appears in the product list and is connected to a hotspot on the main image.
Image ratio
| Setting | Description |
|---|---|
| Image ratio | Controls the small product image ratio in the product list. |
Available image ratio options:
| Option | Description |
|---|---|
| Adapt | Uses the product image's original ratio. |
| Square | Displays the product image as a square. |
| Portrait | Displays the product image in portrait ratio. |
| Landscape | Displays the product image in landscape ratio. |
| Wide | Displays the product image in a wide ratio. |
Show vendor
| Setting | Description |
|---|---|
| Show vendor | Displays the product vendor above the product title. |
Show quick buy
| Setting | Description |
|---|---|
| Show quick buy | Displays a small add-to-cart button for that individual product. |
The quick buy button lets customers add one product from the bundle without using the full Add set to cart button.
Enable quick view
| Setting | Description |
|---|---|
| Enable quick view | Opens a quick view drawer when customers interact with the hotspot. |
When quick view is enabled and the theme's global quick view setting is also enabled, the hotspot opens a quick view instead of linking directly to the product page.
10. Hotspot Settings
Each product block includes hotspot settings.
The hotspot appears on the main image and connects the image area to the product in the bundle.
| Setting | Description |
|---|---|
| Color | Sets the hotspot color. |
| Horizontal position | Controls the hotspot position from left to right. |
| Vertical position | Controls the hotspot position from top to bottom. |
Position values use percentages.
| Position setting | Range |
|---|---|
| Horizontal position | 5% to 95% |
| Vertical position | 5% to 95% |
Example:
| Product | Horizontal | Vertical |
|---|---|---|
| Product 1 | 30% | 40% |
| Product 2 | 70% | 45% |
| Product 3 | 45% | 65% |
Tips:
- Place each hotspot close to the matching product in the image.
- Avoid placing hotspots too close to the edge.
- Use a hotspot color that contrasts with the image.
- Preview on desktop and mobile after positioning hotspots.
11. How Variant Selection Works
If a selected product has variants, the section displays a dropdown for that product.
Customers can choose the variant before adding the full set to cart.
When a variant is selected:
- The selected variant ID is updated.
- The displayed product price is updated.
- The sold-out state is updated if the selected variant is unavailable.
- The quick buy button uses the selected variant.
If a product has only one default variant, the section uses that variant automatically.
Important:
The Add set to cart button adds the currently selected variant from each product block.
12. Add Set to Cart Behavior
The Add set to cart button appears when at least one valid product block has been added.
When customers click the button, the section adds the selected variant from each product block to the cart.
Default behavior:
| Behavior | Description |
|---|---|
| Quantity | Adds quantity 1 for each selected variant. |
| Product selection | Adds all product block variants currently selected in the section. |
| Cart drawer enabled | Updates the cart drawer by Ajax. |
| Cart drawer disabled or cart page | Uses the standard cart add behavior. |
Example:
| Bundle products | Added to cart |
|---|---|
| Cleanser, Toner, Moisturizer | 1 Cleanser + 1 Toner + 1 Moisturizer |
| Shirt, Pants, Shoes | 1 Shirt + 1 Pants + 1 Shoes |
If any selected variant cannot be added, the section can show an error message.
13. Quick Buy vs Add Set to Cart
The Bundle Products section can show two purchase methods.
| Method | Purpose |
|---|---|
| Quick buy | Adds a single product from the bundle. |
| Add set to cart | Adds all selected products in the bundle. |
Recommended use:
| Store goal | Recommended setting |
|---|---|
| Encourage customers to buy the full set | Disable quick buy and rely on Add set to cart. |
| Let customers choose individual items too | Enable quick buy on product blocks. |
| Use the bundle as an editorial shopping guide | Enable quick view and product links. |
14. Recommended Use Cases
You can use the Bundle Products section for:
- Gift sets.
- Complete-the-look outfits.
- Skincare routines.
- Haircare routines.
- Home decor sets.
- Starter kits.
- Travel kits.
- Product pairings.
- Subscription starter bundles.
- Seasonal bundles.
Example bundle structures:
| Bundle type | Example products |
|---|---|
| Skincare routine | Cleanser, serum, moisturizer |
| Fashion look | Top, pants, shoes, bag |
| Home decor set | Vase, candle, tray |
| Gift set | Main product, accessory, gift bag |
| Fitness set | Mat, bottle, towel |
15. Recommended Setup
For most stores, we recommend:
| Setting | Recommended value |
|---|---|
| Main image | Lifestyle image showing the bundle products together |
| Layout | Image first |
| Text box position | Top or Middle |
| Text alignment | Left |
| Mobile text alignment | Left or Center |
| Full width | Optional |
| Product blocks | 2–4 products |
| Image ratio | Adapt or Square |
| Show vendor | Optional |
| Show quick buy | Optional |
| Enable quick view | Enabled if quick view is used globally |
| Hotspot color | High-contrast color |
Recommended content:
| Field | Example |
|---|---|
| Subheading | Bundle & Save |
| Heading | Build Your Own Basket |
| Product block 1 | Main product |
| Product block 2 | Add-on product |
| Product block 3 | Complementary product |
16. Notes and Limitations
Please note the following behavior:
- The section supports up to 6 product blocks.
- The section adds selected variants from product blocks to the cart with quantity
1. - It does not automatically apply a discount.
- Discounts must be configured separately in Shopify, with discount codes, automatic discounts, Shopify Functions, or a compatible app.
- The section does not create a single combined product. It adds each selected product as a separate cart line.
- If a product is unavailable, it cannot be added to the cart.
- If a selected variant is sold out, the section may show an error when adding the set.
- Quick view only works when the product is selected and quick view is enabled.
- Hotspot placement depends on the selected main image, so it should be checked on desktop and mobile.
- The section uses the product featured image in the product list.
- The section can be used on most templates, including product, page, collection, cart, blog, and homepage templates.
Troubleshooting
If the Bundle Products section does not display or work correctly, please check the following:
- Make sure the Bundle Products section has been added to the correct template.
- Make sure a main image has been selected.
- Make sure at least one Product block has been added.
- Make sure each Product block has a valid product selected.
- Make sure the selected products are active and available on the Online Store sales channel.
- Make sure each selected product has an available variant.
- If the Add set to cart button does not appear, make sure at least one Product block contains a selected product.
- If the wrong variant is added, check the variant dropdown selection before clicking Add set to cart.
- If quick buy does not appear, make sure Show quick buy is enabled in the Product block.
- If quick view does not open, make sure Enable quick view is enabled in the Product block and the global quick view setting is enabled.
- If hotspots appear in the wrong place, adjust the Horizontal position and Vertical position settings.
- If the hotspot is hard to see, choose a stronger hotspot color.
- If the product image looks cropped, change the Product block Image ratio setting.
- If customers expect a bundle discount, create a Shopify discount or use a compatible bundle/discount app.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System.
Share:
Product Breadcrumbs Guide