# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/collection-list-slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.