# Products bundle

![image](https://docs-assets.foxecom.app/sleek-theme/image_O5IVI8DU.png)

You can bundle multiple products or services together and sell them as a package deal.

The **Products bundle** section in Sleek theme provides a special hover effect that highlights your products and draws customers' attention.

## How to add a Products bundle section

<Hint type="success">

**Steps:**

1. In the theme editor (**Customize**) > click **Add section**
2. Select **Products bundle.**
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Products bundle section

### Section settings

#### General

Adjust the **Color scheme** for this section.

<Hint type="info">

In Shopify, the [Color scheme](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme) (a set of colors) of your store can be set within the [Theme settings](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings). It helps group elements and their respective colors, making your store visually appealing and cohesive. You can apply the color schemes to different sections throughout your online store with a color scheme picker.&#x20;

</Hint>

![image](https://docs-assets.foxecom.app/sleek-theme/image_fHtPE9Uw.png)

Select an appropriate **Image** that is relevant to all the products in the bundle or has the products' appearance in it. This will help you accurately position the hotspots.

#### Section header

Use the provided text fields to add a suitable **Heading**.

* Leave it blank if you do not want to display it

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

![image](https://docs-assets.foxecom.app/sleek-theme/image_o7TMmHzz.png)

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)

Use the provided text fields to add a suitable **Subheading** and **Description**.

* Leave them blank if you do not want to display them

![image](https://docs-assets.foxecom.app/sleek-theme/image_IyFoSsTr.png)

#### **Section padding**

You can modify the spacing above and below the section by adjusting the slider to change the values of the **Top padding** and **Bottom padding**.

![image](https://docs-assets.foxecom.app/sleek-theme/image_nSxDPfKG.png)

#### Section divider

This divider line provides a clear boundary between the current section and the above.

To activate the divider line, enable the ✅ **Show divider** checkbox.&#x20;

You can choose a suitable **Divider width** for it (Fixed width/ Full width).

![image](https://docs-assets.foxecom.app/sleek-theme/image_VhP6xFTU.png)

### Block settings

#### Product

When you hover over a specific product in the bundle, the corresponding hotspot will stand out among the other hotspots on the main image.

![image](https://docs-assets.foxecom.app/sleek-theme/image_3xoTqCox.png)

Choose a desirable/ active **Product** from your Shopify Products to bundle together.

#### Hotspot

When you hover over a particular hotspot on the main image, the product corresponding to it will stand out among the other blurred products.

![image](https://docs-assets.foxecom.app/sleek-theme/image_gH8kwYCI.png)

This setting allows you to select a Color scheme for the Hotspot.&#x20;

In addition, to tag hotspots on the background image, use the **Vertical** and **Horizontal position** to adjust the hotspot icon position.