Products bundle

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

#How to edit a Products bundle section

#Section settings

#General

• Color scheme: Choose a theme color preset. Learn more →

#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

#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.

#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!