# Products bundle
_KQkqBDG5.jpg)
This design is available from ✨version 1.1.0 and above. ✨
See: [Changelog](/hyper-theme/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
* **Color scheme**: Choose a theme color preset. [Learn more →](https://docs.foxecom.com/hyper-theme/theme-settings/colors)
#### **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.
* **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](https://docs.foxecom.com/hyper-theme/faqs/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!
