# Product carousel

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F1VkqNgBjG3vcKhtzbFIl%2Fimage.png?alt=media&#x26;token=66c7efba-c720-467f-9800-00a791b8169f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

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

## General settings

| Setting                | Description                                                                                                                           |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| Section width          | You can choose among Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video. |
| Color scheme           | You are allowed to change text color, background color, etc. with preset color.                                                       |
| Heading, description   | Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.       |
| Header size, alignment | Adjust the text alignment (left/center/right) along with the font size.                                                               |

## Products settings

Specify the quantity of products to display, the number of products per row, and the gap between two adjacent products.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FlKp5J33n9wh0gw07azrd%2Fimage.png?alt=media&#x26;token=e758bf28-4937-4a28-9c10-88f9fa2ac2f3" alt=""><figcaption></figcaption></figure>

## Banner settings

**Show banner**: Choose to display the banner on desktop; it will automatically be hidden on tablets and mobile devices.

**Sticky banner**: Make the banner sticky, allowing it to remain visible as the user scrolls.

**Width**: Set the width of the banner.

**Position**: Determine the position of the banner on the page.

**Banner link**: Assign a link for the banner that users can click to be directed to a specific page.

**Banner type**: Select the type of banner, choosing between an image or a video.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FQTwrWF4PQkgjwqZlnL5W%2Fimage.png?alt=media&#x26;token=52cde6a1-9da9-48a4-b746-145ba08775ab" alt=""><figcaption></figcaption></figure>

After choosing banner type, the appropriate media source will be utilized:

* **Image**: Choose an image to display as the banner.
* **Video URL**: Input a video URL to display a video on the banner.
* **Local Video**: Takes higher priority over the Video URL if both are provided.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FKgRsvXoWZsvN2HVaCcFt%2Fimage.png?alt=media&#x26;token=9cd42ca7-557e-4ba7-bd54-0fb15a2a17d6" alt=""><figcaption></figcaption></figure>

## Carousel settings

**Show Next/Back:** Display arrows to navigate to the next or previous item.

**Pagination:** Choose from different types of pagination options.

**Setup period time:** Configure the time interval for changing slides.

**Reveal next slide:** Allow a part of the next slide to be visible while the previous one is still displayed.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FHQgchO6FDqbpJlkDgaxX%2Fimage.png?alt=media&#x26;token=24f8b8d1-a4ea-4da0-82f2-8c32a74db06b" alt=""><figcaption></figcaption></figure>

## Mobile options

&#x20;Specify the number of items displayed per row on mobile devices for an optimal viewing experience.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fn2GL3sMRCJ6HAAkm37JZ%2Fimage.png?alt=media&#x26;token=d27cc36d-b5d7-46d6-a160-90661f1720b5" alt=""><figcaption></figcaption></figure>

## 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%2FyMkCAUtXUDqKorIneifE%2Fimage.png?alt=media&#x26;token=14d86f92-747d-4d0e-a7ce-157dd30f99ae" alt=""><figcaption></figcaption></figure>