Products bundle 🔥
Boost your average order value with bundled product offers that encourage bulk buying
Last updated
Boost your average order value with bundled product offers that encourage bulk buying
Last updated
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.
Steps:
In the theme editor (Customize) > click Add section
Select Products bundle.
Make necessary changes.
Save.
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.
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.
To change this button label, go to Actions > Edit default theme content.
Each bundled product is added as a block.
Product: Select a Shopify product.
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.
✅ 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.
👉 Yes. Each product is still clickable to access the product details page and purchase separately.
👉 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!
Color scheme: Choose a theme color preset.
Customers can pick the variant (e.g., size, color) before adding everything to their cart.
