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

# Collection list slider

<figure><img src="/files/6IRuzdHLe99NpUpDm0gn" alt=""><figcaption></figcaption></figure>

A Collection list slider displays a single-column carousel of selected collections, featuring a special large image for each collection to attract visitors' attention.

In this article, we will show you how to add a Collection list slider section.

## How to add a Collection list slider to your Shopify store

{% hint style="success" %}
**Steps:**

1. In the theme editor (**Customize**) > click **Add section.**
2. Select **Collection list slider.**
3. Make necessary changes.
4. **Save** the settings.
   {% endhint %}

## How to edit a Collection list

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

#### Large image

* **Image ratio**: Control the ratio of the large image on the left (Adapt to image/ Square/ etc.).

<figure><img src="/files/s3dKV6njxoOc0ziuKhEt" alt=""><figcaption></figcaption></figure>

#### Collection card

* **Image ratio**: Control the ratio of the collection image on the right (Adapt to image/ Square/ etc.).

<figure><img src="/files/eHyCWS5A7GKU2SxdFO00" alt=""><figcaption></figcaption></figure>

#### Carousel settings

* **Controls background**: Customize the background for the navigation controls

{% tabs %}
{% tab title="Dark" %}

<figure><img src="/files/jblmYEiQPSu6nYEXQsE1" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Light" %}

<figure><img src="/files/gz5uNxF6PRLyQjqT9lhi" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="None" %}

<figure><img src="/files/9F9ixWv0VL7NYefbpy7O" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Desktop controls position**: Adjust the placement of the controls on the desktop

<figure><img src="/files/itOxDkdaABlR0V0rvo2N" alt=""><figcaption></figcaption></figure>

* **Pagination type:** Set pagination type as Dots/ Counter

{% tabs %}
{% tab title="Dots" %}

<figure><img src="/files/WNhthND2mTVHmP1tsW06" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Counter" %}

<figure><img src="/files/85oxgRwaIWpe0LIBT8XE" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Block settings

You can add multiple **Collection** blocks and **1** **Badge** block to the **Collection list slider** section.

<figure><img src="/files/aFqCx2nxgZI3se8CFD5I" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Collection block" %}

<figure><img src="/files/KWE4Fk1glaCj3Y06cnmU" alt=""><figcaption></figcaption></figure>

Add an outstanding **Large image** for the block to draw customers' attention and make your website look more attractive.

Select a preferable or unique **Collection** that you want to show on the Collection list slide&#x72;**.**

* Choose an **Image** for the Collection card. Leave the **Image** field blank if you want to use the collection's image.
* Use the provided text field to add a different **Heading** for the Collection. Leave the field blank to use the collection's title.
  {% endtab %}

{% tab title="Badge block" %}

<figure><img src="/files/iDMULNvcLxrTE5JfK29e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The Badges block is only available in Zest **version 9.0.0 and above**. :sparkles:

See [Changelog](https://help.foxecom.com/changelog/zest).
{% endhint %}

Select a **Color scheme** for the Badges from the available list to match your store’s design.&#x20;

Enter the **Text** you want to display on the badge.

* Example: `"Loved by customers - Loved by customers"`

{% hint style="success" %}
Ensure only **one space** is used between words or characters for proper formatting.
{% endhint %}

Upload an **Image** to appear alongside the text.

<figure><img src="/files/ef58fFjLEt8Gp1AREoUQ" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}