# Collection list

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

Use the **Collection list** section to display a grid of your featured collections. It’s perfect for helping shoppers browse by product category

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

<Hint type="success">

Steps

1. In the theme editor (**Customize**), click **Add section.**
2. Locate **Collection list.**
3. Make necessary changes.
4. Save.

</Hint>

✍ *To know more about creating and editing collections, refer to* [*this tutorial.*](https://youtu.be/M0DoTpdYPWU?si=2HG_s3zi2zJDZmG3)

## How to edit a Collection list

### Section settings

#### Collection card

* **Style**: Control how the collection cards display.

<Tabs>
<Tab title="Standard">

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

</Tab>

<Tab title="Content inside with overlay">

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

</Tab>

<Tab title="Content middle">

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

</Tab>

<Tab title="Content inside with button">

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

</Tab>

<Tab title="Content outside with image rounded">

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

</Tab>

<Tab title="Content outside with icon">

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

</Tab>
</Tabs>

* **Show product count**: Show the number of products included in the collection.

<Tabs>
<Tab title="Show Product count ">

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

</Tab>

<Tab title="Show product count same line with collection name">

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

</Tab>
</Tabs>

#### Grid settings

* **Number of columns on desktop**: Display from 2 to 12 collection cards per row.
* **Column gap** / **Row gap**: Adjust spacing between cards.

#### Carousel

* **Enable carousel on desktop**: When enabled, the section turns into a horizontal scroll if your collections exceed the number of columns.
* **Show pagination**: Displays dots below the carousel.
* **Show navigation**: Displays arrows to navigate between slides.

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

#### Mobile layout

* **Enable swipe on mobile**: Allows horizontal scrolling.
* **Number of columns on mobile**: Choose between 1 or 2 columns for mobile view.

### Block settings

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

Each collection is added as a block in this section. You can customize:

* **Collection**: Select which Shopify collection to display.
* **Image**: Optional custom image override for the collection card.
* **Collection title**: Add a custom name (or leave blank to use the collection’s default title).