> For the complete documentation index, see [llms.txt](https://moodboard-creations.gitbook.io/agnes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://moodboard-creations.gitbook.io/agnes/sections/bundle-products.md).

# Bundle products

### What It Does

The Bundle products section lets customers add bundled products to the cart, with or without a discount.\ <br>

<figure><img src="/files/ATcIGWhd8Oj7GaNLcnme" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}

#### How to Add It

1. In the Shopify theme editor, click **Add section**.
2. Search for **"Bundle products"**.
3. Click the section to add it to your page.
4. Adjust the settings described below.
   {% endhint %}

***

### Settings

#### **Slide image (desktop)**

Upload an image for the slider.

#### **Slide image (mobile)**

Upload an image for the slider.

#### **Image height (desktop)**

If 'Adapt to image' is selected, the tallest image will determine the height. Choose from: Medium, Large.

#### **Image height (mobile)**

If 'Adapt to image' is selected, the tallest image will determine the height. Choose from: Medium, Large.

#### **Overlay opacity**

Controls the transparency level of slide images.

**Content**

#### **Heading**

The title text displayed in the content element.

#### **Saving percentage**

Controls the Saving percentage.

{% hint style="info" %}
To have the bundle discount applied at checkout, please follow the steps in the [documentation](https://www.moodboard-creations.com/user-guides/agnes/how-to-set-up-bundle-products-discount).
{% endhint %}

#### **Bundle information text**

The additional text content for the content element.

**Hotspot product**

#### **Show product image**

When enabled, displays the product image in the hotspot. Disable to hide it.

#### **Show price**

When enabled, displays the price. Disable to hide it.

#### **Show 'More details' button**

When enabled, displays 'More details' button. Disable to hide it.

#### **Button color scheme**

The button appears in the hotspot product popup. Choose from: Primary, Secondary.

#### **Hotspot icon color**

Sets the color for hotspot icons.

#### **Enable inner card color**

Enable the inner card color on the hotspot product popup. Disable to hide it.

**Product list**

#### **Layout type (desktop)**

Controls the Layout type (desktop). Choose from: Image on the left, Image on the right.

#### **Padding**

Adjusts the spacing around the content.

#### **Border width**

Sets the thickness of the border.

#### **Border radius**

Rounds the corners of this element.

#### **Shadow**

Adds a shadow effect for visual depth.

#### **Input color scheme**

Controls the Input color scheme. Choose from: Primary, Secondary.

#### **Button color scheme**

Controls the Button color scheme. Choose from: Primary, Secondary.

#### **Enable inner card color**

When enabled, an inner card color is applied to product list items. Disable it to hide the effect.

**Appearance**

#### **Color scheme**

Applies a predefined color scheme to this element.

{% hint style="info" %}
Color schemes are sets of coordinated colors you define under **Theme settings > Colors**. Choosing a scheme applies its background, text, and accent colors.
{% endhint %}

**Spacing**

#### **Maximum padding top**

Adjusts the space above the content.

#### **Maximum padding bottom**

Adjusts the space below the content.

***

### Supported Blocks

#### Product

See the child document for full settings: [Product](/agnes/sections/bundle-products/product.md)

***

### Frequently Asked Questions

[Setting Up Bundle Product Discounts](/agnes/frequently-asked-questions/setting-up-bundle-product-discounts.md)