# Products carousel

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/Mhb1zWwxd9B8wVfrnbvI/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

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

## Section settings <a href="#products-carousel" id="products-carousel"></a>

### **Section header** and **general:**

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://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/6Cp1ciV8graZdel279KG/image.png" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose between Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Color schema:** You are allowed to change text color, background color, etc. with preset color.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/OiyoHTKenmGffzkClAzW/image.png" alt=""><figcaption></figcaption></figure>

### **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://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/qVOTWlodQSb9ZVMneWfB/image.png" alt=""><figcaption></figcaption></figure>

### **Carousel settings**

**Autoplay / Infinite Play:** Enable this setting for the carousel to automatically scroll through items indefinitely, providing a seamless browsing experience.

**Show Arrows** and **Dots:** Activate arrows for users to manually swipe through carousel items and dots for a visual indicator of their position within the carousel.

Direct Navigation via **Dot:** Utilize dots to allow users to jump directly to a specific tab or item in the carousel, enhancing navigation efficiency.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/Gnwyw1MWqN22vUnrVwJz/image.png" alt=""><figcaption></figcaption></figure>

Include a **View All** option that allows users to navigate to a dedicated page showcasing all available products.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/rg3vpKBLYglekTT6Qys9/image.png" alt=""><figcaption></figcaption></figure>

### Banner settings

**Show Banner Option:** Activating this will display the banner on desktop devices while ensuring it remains hidden on tablets and mobile for a tailored viewing experience.

**Type:** Specifies the type of media, such as an image or video, used for the banner, allowing for precise content selection.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/ugMigbEuXsTghmVv1z8S/image.png" alt=""><figcaption></figcaption></figure>

**Position:** Determine the banner's placement, opting for either the left or right side of the carousel for strategic visibility.

**Banner Width:** Define the width of the banner to ensure it fits seamlessly within your layout.

**Heading and Its Position:** Customize the banner's headline and adjust its positioning for optimal impact and coherence with the overall design.

**Banner Link:** Provide a direct link for the banner, facilitating easy access to further information or actions related to the banner's content.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/rkzePQlreHHP8NakQ3q2/image.png" alt=""><figcaption></figcaption></figure>

You have the flexibility to modify the label displayed on the button right here.

Additionally, you can determine the button's priority by selecting its type with the **Button Type** option.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/1B9CAM0PowZhp9zBZAZd/image.png" 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://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/rFSBKUuKwQw3iQX2XKat/image.png" alt=""><figcaption></figcaption></figure>