Bundle Product Showcase

What this section does

The Bundle product showcase section creates a curated multi-product bundle on the homepage. It combines a left-side product collage with a right-side bundle panel where customers can review options and add the full set to cart.

How to set it up

1. Go to Online Store -> Themes.
2. Click Customize.
3. Open the Home page template.
4. In the left sidebar, select Bundle product showcase.
5. Add or edit Product blocks, then save.

Editor areas overview

1. Left sidebar:
   • Shows the selected section and its Product blocks.
   • Add Product adds a product block (up to 3).
   • Drag blocks to reorder bundle items.
2. Center preview:
   • Shows the left collage and the right bundle list.
   • Displays product rows, prices, variant selectors, and the final bundle CTA.
3. Right settings panel:
   • Section-level controls such as Background color, Accent color, Left image, and content labels.
   • Fallback controls for image and collection behavior.

Key section settings explained

1. Background color: section background behind collage and bundle panel.
2. Accent color: accent tone used by visual details in this section.
3. Left image: manual image fallback when product media is unavailable.
4. Fallback image asset filename: asset-level fallback if no collage image can be generated.
5. Image alt text: accessibility text for the left media area.
6. Eyebrow: small label above the main heading.
7. Heading: section headline on the bundle panel.
8. Fallback collection: auto-fill source when fewer than 3 product blocks are assigned.
9. Button label: text for the bundle add-to-cart CTA.

Product block settings

Each Product block includes one key field:

1. Product: selects the product to include in the bundle.

Important behavior:

1. This section supports up to 3 product blocks.
2. If fewer than 3 products are selected, remaining slots can be filled from Fallback collection.
3. Duplicate products are filtered out automatically.

Common tasks

Build a fixed 3-product bundle

1. Add three Product blocks.
2. Assign one product in each block.
3. Reorder blocks to control display order.
4. Save.

Use collection fallback for auto-fill

1. Add one or two Product blocks.
2. Set Fallback collection.
3. Verify the section fills remaining slots automatically.
4. Save.

Override the collage fallback image

1. Set Left image with your preferred visual.
2. Optionally set Fallback image asset filename for asset-based fallback behavior.
3. Confirm alt text in Image alt text.
4. Save.

Tips

1. Keep all bundle items in a similar style/price tier to improve conversion clarity.
2. Use short headings so the bundle panel remains clean on tablet widths.
3. Check variant availability for each product before publishing.
4. Preview on mobile to confirm row spacing and thumb readability.

FAQs

Why are products showing that I did not add manually?

When fewer than three blocks are configured, the section fills missing slots from Fallback collection.

Why can’t I add more than three products?

The section is intentionally limited to three product blocks for layout and bundle focus.

Why is the left image not the one I uploaded?

If product collage media is available, the section can prioritize product imagery. Use explicit product media and check fallback image settings for consistent output.

Related guides

• Product Tabs Documentation
• Deals Highlight Carousel Documentation
• Home Fullwidth Slider Documentation
• Theme Documentation

Publish checklist

1. Confirm selected products and order.
2. Validate fallback collection behavior.
3. Check variant selectors and price display.
4. Verify CTA label and test add-to-cart flow.
5. Save and publish.

Need help?

If you still need help, contact support via the Contact page.