# Products bundle
{% hint style="info" %}
This design is available from :sparkles:version 1.1.0 and above. :sparkles:
See: [changelog](https://docs.foxecom.com/hyper-theme/changelog "mention")
{% endhint %}
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
{% hint style="success" %}
**Steps:**
1. In the theme editor (**Customize**) > click **Add section**
2. Select **Products bundle.**
3. Make necessary changes.
4. **Save.**
{% endhint %}
## 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
{% hint style="info" %}
The Section header display above the products list.
{% endhint %}
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.
:writing\_hand: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")
* **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.
{% hint style="success" %}
The section show a **Add all to cart** button at the bottom of the bundled products list.
:white\_check\_mark: 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**.
\
\
{% endhint %}
### 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!
***
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.foxecom.com/hyper-theme/theme-sections/products-bundle.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.jpg?alt=media&token=48a9884c-b604-4b9a-8d28-fcc7e617dc6d)
.gif?alt=media&token=c149f8c6-9b0d-4c0f-8fb4-90bfd1a4b36a)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)