Hyper Theme
Hyper Theme
Theme Sections

Multiple product bundles 🔥

3 min read
image
image

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

The Multiple product bundles section helps you showcase several curated product sets, each with an "Add All to Cart" button to streamline the buying process. Perfect for upselling kits, routines, or seasonal sets, this section supports both visual storytelling and direct conversion.

What this section does

  • Add one introductory image card (optional).
  • Add multiple bundle blocks, each featuring up to 5 products.
  • Let customers add full bundles to cart in one click.
  • Display a sold-out warning if any product in a bundle is unavailable.

This section is for display purposes only. To apply actual discounts (e.g. "Buy all 3 and save 20%"), you need to set them up in Shopify Admin > Discounts.

See Shopify’s guide here → Create Discounts

How to add a Multiple product bundles section to your Shopify store

Steps:

  1. In the theme editor (Customize) > click Add section
  2. Select Multiple product bundles.
  3. Make necessary changes.
  4. Save.

How to edit a Multiple product bundles section

Section settings

image
  • Container: Full width or Fixed width layout
  • Color scheme: Choose color preset for the section. This will affect the background, text, and button colors.
image

image
  • Number of columns on desktop: 2–5 block columns on desktop.
  • Column gap: Adjust spacing between blocks.
image
  • Color scheme: Select a color preset used for the product cards.
  • Image ratio: Set the ratio of the product cards' images.

Block settings

This section is made up of two block types:

  1. Image card – Visual hook at the start of the section.
  2. Product bundles – Each block = one bundle of 2–5 products.
image

💡 Tip: Use this block to highlight a discount or announce a new routine.

Settings include:

  • Image upload: Use lifestyle or campaign visuals
  • Image overlay opacity: Add a semi-transparent layer over the image to improve text readability.
    • 0% = No overlay
    • 100% = Fully opaque (black cover)
  • Overlay text: Add heading/subheading over the image
  • CTA button: Link to a landing page, collection, or promotion
  • Overlay opacity: Adjust for better text readability
  • Content alignment: Control position on desktop and mobile
image

Each bundle slider showcases up to 5 products with title, pricing, variant selector (if available), and one-click “Add All To Cart” button.

Settings:

  • Heading: Title for the bundle.
  • Products: Select 2–5 products for each bundle.

📝 Note: The order of the products in the block reflects the order in the slider.

⚠️ Sold-Out notice:
If any product in the bundle is out of stock, the block will show a warning message.

image
Last updated

Multicolumn with icon

Previous Page

Press

Next Page

ON THIS PAGE

How to add a Multiple product bundles section to your Shopify storeHow to edit a Multiple product bundles sectionSection settingsBlock settings

Was this helpful?