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

# Products carousel

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-90618cf9600f21af37f348e1b73a815b9d2823c0%2Fimage%20(79).png?alt=media" 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:**

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

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-2469db40c173dae3582fffe8fcad36c5cf0c04fa%2Fimage%20(301).png?alt=media" alt=""><figcaption></figcaption></figure>

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

Adjust the text alignment (left/center/right) along with the font size.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-527355b2f5b15409bc701091d2674ee34d6efdff%2Fimage%20(302).png?alt=media" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-3a04d9d7635ac5dc83a8f6cf9de91255faf6f970%2Fimage%20(303).png?alt=media" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-0db2b4bd2210ace77c340206a4a4f916a8ee1f87%2Fimage%20(306).png?alt=media" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-dbdb56479f1b7f880fb045f4f867ad7bc89d09c3%2Fimage%20(307).png?alt=media" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-ffe12af2af5ba353a9228ba92a6ef015e3e3aba2%2Fimage%20(305).png?alt=media" alt=""><figcaption></figcaption></figure>

### **Mobile options**

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-c9f16cd95919b0c1ea915a7ddd7cca9be0317d4f%2Fimage%20(5).png?alt=media" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-be9d8df9d14940608d4ac4566682bb3134a65ce4%2Fimage%20(985).png?alt=media" alt=""><figcaption></figcaption></figure>