Try Hyper free

Products bundle 🔥

Boost your average order value with bundled product offers that encourage bulk buying

This design is available from ✨version 1.1.0 and above. ✨

See: Changelog

The Products Bundle section allows you to display a featured product image with optional hotspot tags, alongside a list of bundled products customers can add to cart with one click.

  • Hotspots highlight products on image hover (desktop) or scroll to the product (mobile).

  • Customers can choose variants before adding the bundle to the cart.

  • Perfect for seasonal sets, starter kits, or curated collections.

How to add a Products bundle section to your Shopify store

Steps:

  1. In the theme editor (Customize) > click Add section

  2. Select Products bundle.

  3. Make necessary changes.

  4. Save.

How to edit a Products bundle section

Section settings

General

Image

  • Image: Upload a main visual for the bundle.

  • Desktop image position: Align the image to the Left or Right of the products list.

  • Image ratio: Choose Adapt to image or Full section height.

  • Show hotspot: Toggle ON to activate clickable product hotspots on the image.

    • On desktop, hovering over a hotspot highlights the corresponding product card, helping users quickly identify the item in the bundle.

    • On mobile, tapping a hotspot automatically scrolls to the relevant product card, ensuring smooth navigation in smaller viewports.

Section header

The Section header display above the products list.

See settings

  • Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.

  • Heading: Enter the primary title for your banner.

  • Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

✍️ Add Highlighted text to your Headings

  • Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.

Grid settings

  • Number of columns on desktop: Set how many product cards appear in a row (2–4).

  • Column gap: Adjust the horizontal spacing between cards.

Product cards

  • Image ratio: Choose a custom image ratio for the product cards in this section or use the global setting.

Mobile layout

  • Mobile image: Upload an optimized version for mobile.

  • Number of columns on mobile: Choose 1 or 2 product cards per row.

The section show a Add all to cart button at the bottom of the bundled products list.

✅ Customers can pick the variant (e.g., size, color) before adding everything to their cart.

  • To change this button label, go to Actions > Edit default theme content.

Block settings

Each bundled product is added as a block.

Product

  • Product: Select a Shopify product.

Hotspot (only if enabled)

  • Color scheme: Set the color preset for the hotspot marker. The hotspot's background color inherits the Background color 1 of the selected Color scheme.

  • Horizontal position / Vertical position: Drag or manually set hotspot placement (desktop view).

  • Mobile settings: Fine-tune hotspot position for mobile view separately.

Best practices

✅ Use high-quality hero images with good contrast for hotspots.

✅ Bundle 3–5 products for best visual balance.

✅ Use consistent background colors between image and product cards.

FAQs

Can customers buy individual items from the bundle?

👉 Yes. Each product is still clickable to access the product details page and purchase separately.

What happens if a product goes out of stock?

👉 The unavailable product will show "Sold out" but won't break the entire bundle layout. However, customers won't be able to add the bundled products as a whole. So make sure you keep track of the product inventory for timely updates!

PreviousPress 🔥NextPromotion banner

Last updated