# Collection list

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

Display multiple collections in a customizable grid or carousel to help customers easily explore your store’s product categories.

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

{% hint style="success" %}

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

## How to customize a Collection list section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

{% tabs %}
{% tab title="Collection list: Grid" %}

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

{% tab title="Collection list: Carousel" %}

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

### Section settings

* **Collection:** Selects collections display in this section.
* **Layout:**
  * **Container:** Chooses whether the section spans the full page width or stays within a fixed content width.
  * **Type:** Sets the layout style to either a grid or a carousel.
  * **Columns:** Determines how many products appear per row in grid mode.
  * **Horizontal gap:** Controls the spacing between products from left to right.
  * **Vertical gap:** Controls the spacing between product rows from top to bottom.
* **Control type:** Selects the carousel navigation style, such as default arrows or a floating control **(only available when using the carousel layout)**.

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

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

{% tab title="Float" %}

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

* **Mobile layout:**
  * **Enable swipe on mobile:** Allows horizontal swiping to navigate products on mobile.
  * **Mobile columns:** Sets how many products appear per row on mobile devices.
  * **Horizontal gap (mobile):** Controls left-to-right spacing between products on mobile.
  * **Vertical gap (mobile):** Controls top-to-bottom spacing between product rows on mobile.

### Block settings

#### Collection card

* **Aspect ratio:** Sets the shape of the collection image.

{% tabs %}
{% tab title="Use global settings" %}

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

* Go to **Theme settings > Collection cards and set the aspect ratio** there to use it as a global setting.
  {% endtab %}

{% tab title="Auto" %}

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

* The image ratio adapts to the original size of the uploaded image.
  {% endtab %}

{% tab title="Square (1/1)" %}

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

{% tab title="Portrait (4/5)" %}

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

{% tab title="Portrait (3/4)" %}

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

{% tab title="Landscape (16/9)" %}

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

{% tab title="Landscape (4/3)" %}

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

* **Alignment:** Controls the horizontal alignment of the collection title.

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

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

{% tab title="Center" %}

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

{% tab title="Right" %}

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

* **Show product count:** Toggles whether the number of products in the collection is displayed.

#### Nested dynamic blocks

You can add multiple dynamic blocks within this section. Learn more about each block type here.

{% content-ref url="/pages/kDPTtLq1SGRul34JEndy" %}
[Theme blocks](/pebble-theme/theme-blocks/overview.md)
{% endcontent-ref %}


---

# 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/pebble-theme/theme-sections/collection-list.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.