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

# Products carousel

A guide to display product list under slider format

{% embed url="<https://youtu.be/2rIJEFKYU04>" %}

{% hint style="success" %}
Steps

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

## Products carousel

**1. 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/5WlAIkq5Keo641r70Byr/blobs/xPk8ufCLDGS7JdLFmY3M/image.png" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose between Container, Wrapped container, 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/5WlAIkq5Keo641r70Byr/blobs/d4KLZubDoMLXQ8m2Luoy/image.png" alt=""><figcaption></figcaption></figure>

#### 2. 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/5WlAIkq5Keo641r70Byr/blobs/wSgu49PQDxUA4klB3lk9/image.png" alt=""><figcaption></figcaption></figure>

#### 3. Carousel settings

You have the flexibility to enable **Autoplay** for automatic carousel scrolling and **Infinity** for continuous looping. Additionally, you can navigate through pagination or use **Show arrows** and **Dots** for navigation.

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/5WlAIkq5Keo641r70Byr/blobs/UiFgs1HkI5hT0BnoIFms/image.png" alt=""><figcaption></figcaption></figure>

#### 4. Banner settings

Choose to add a small image or video that will be on the left or right side of the product.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/FOFRe5K1rcOnRMzExZGm/banner-setting.jpg" alt=""><figcaption></figcaption></figure>

#### 5. Section padding

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

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/Uyj4k2EiNamFFeQb6Qv7/image.png" alt=""><figcaption></figcaption></figure>