> 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.md).

# Collection list

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

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 style="success" %}
Steps

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

:writing\_hand: *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" %}

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

{% tab title="Content inside with overlay" %}

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

{% tab title="Content middle" %}

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

{% tab title="Content inside with button" %}

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

{% tab title="Content outside with image rounded" %}

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

{% tab title="Content outside with icon" %}

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

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

{% tabs %}
{% tab title="Show Product count " %}

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

{% tab title="Show product count same line with collection name" %}

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

#### 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.

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

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

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

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).