# Products list carousel

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

{% hint style="success" %}
Steps

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

## Section settings <a href="#products-list-carousel-setting" id="products-list-carousel-setting"></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.

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

**Layout:** You can choose among Default, Fluid container and Full width for the banner layout.

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

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

### **Product settings**

**Select Collection:** Choose a collection to display its products.

**Products to show:** Set how many products to display, with a range between 1 and 20.

**Items Per Row:** Choose how many products appear per row, selecting from 1 to 5.

**Row Items:** Determine the number of items within each row, with options from 1 to 5.

**Products Gap:** Adjust the space between columns to achieve the desired layout spacing.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/AIPAUkpUP9xJ5GsUTokP/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.

You can use the **View all** setting to display text on the right side of the default heading section. You can change the text and the path will automatically default to the selected collection.

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