# Bundle products

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fdd5qxlNYGalNWbCRpInu%2Fimage.png?alt=media&#x26;token=6dae8120-664f-444c-b155-ad7d90759c8a" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Bundle products**
3. **Save**
   {% endhint %}

## Section settings

### Section header and General

**Section width:** You can choose among Container, Wrapped container, Full width for the banner layout.

**Color scheme:** Set text color and background color with preset scheme

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FDDguwWdwMGQlfkOqGfe3%2Fimage.png?alt=media&#x26;token=f4b90854-0237-4e11-9bc4-ba142e06e137" alt=""><figcaption></figcaption></figure>

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the background color and container type.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FbLcs902ngHoZUF3cZxsn%2Fimage.png?alt=media&#x26;token=c11a3c1e-9e98-40c7-8cce-db80ed51affd" alt=""><figcaption></figcaption></figure>

### Settings

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FbxCnfDNH0ndSxk4ySYfI%2Fimage.png?alt=media&#x26;token=f0a55831-26c9-4cea-b17d-ae1a51ab50aa" alt=""><figcaption></figcaption></figure>

**Image**: Upload or select an image to display, ensuring it fits your design and layout preferences.

**Desktop image width:** Set the width of the image for desktop view to ensure optimal display and layout consistency.

**Desktop Image Position:** Choose whether the image appears on the left or right side of the section when viewed on a desktop.

**Desktop Content Position:** Set the position of the content on desktop to be aligned at the top, middle, or bottom of the section for optimal layout design.

**Image ratio:** Select a preset ratio for the images.

**Custom ratio**: Define a custom ratio instead.

**Column gap:** You are allowed to change both of them for mobile devices.

**Show vendor:** Determine whether to display the vendor information.

### Section padding

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fdfot984kAAMSToUyVNvo%2Fimage.png?alt=media&#x26;token=55a189b9-3cc0-4727-add3-b362d94c83b8" alt=""><figcaption></figcaption></figure>

## Block setting

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FcccjlazB7QG8JyjE3tWn%2Fimage.png?alt=media&#x26;token=b8ca0437-63c8-41ca-856f-ecb27c876000" alt=""><figcaption></figcaption></figure>

**Select product:** Choose a specific product to display in this section, highlighting featured or recommended items.

**Vertical Position - Horizontal Position:** Adjust the vertical and horizontal alignment of the element to position it precisely within the layout.