# Collection list slider

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(23)_6IRuzdHL.jpg)

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 type="success">

**Steps:**

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

</Hint>

## How to edit a Collection list

### Section settings

#### Large image

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

![image](https://docs-assets.foxecom.app/zest-theme/image_s3dKV6nj.png)

#### Collection card

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

![image](https://docs-assets.foxecom.app/zest-theme/image_eHyCWS5A.png)

#### Carousel settings

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

<Tabs>
<Tab title="Dark">

![image](https://docs-assets.foxecom.app/zest-theme/image_jblmYEiQ.png)

</Tab>

<Tab title="Light">

![image](https://docs-assets.foxecom.app/zest-theme/image_gz5uNxF6.png)

</Tab>

<Tab title="None">

![image](https://docs-assets.foxecom.app/zest-theme/image_9F9ixWv0.png)

</Tab>
</Tabs>

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

![image](https://docs-assets.foxecom.app/zest-theme/Untitled%20design%20(22)_itOxDkda.gif)

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

<Tabs>
<Tab title="Dots">

![image](https://docs-assets.foxecom.app/zest-theme/image_WNhthND2.png)

</Tab>

<Tab title="Counter">

![image](https://docs-assets.foxecom.app/zest-theme/image_85oxgRwa.png)

</Tab>
</Tabs>

### Block settings

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

![image](https://docs-assets.foxecom.app/zest-theme/image_aFqCx2nx.png)

<Tabs>
<Tab title="Collection block">

![image](https://docs-assets.foxecom.app/zest-theme/image_KWE4Fk1g.png)

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.

</Tab>

<Tab title="Badge block">

![image](https://docs-assets.foxecom.app/zest-theme/Animation%202_iDMULNvc.gif)

<Hint type="info">

The Badges block is only available in Zest **version 9.0.0 and above**. ✨

See [Changelog](https://help.foxecom.com/changelog/zest).

</Hint>

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 type="success">

Ensure only **one space** is used between words or characters for proper formatting.

</Hint>

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

![image](https://docs-assets.foxecom.app/zest-theme/image_ef58fFjL.png)

</Tab>
</Tabs>