# Collection list

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F7gKASDn5d82EmkqJmf5G%2FFox-BG%20Light%20(10).jpg?alt=media&#x26;token=5f5a06d9-d4c2-4b81-af0c-d1f2aa6bb81b" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F6NK1LRf7888YwzeKCuvX%2FFox-BG%20Light%20(9).jpg?alt=media&#x26;token=1583e33d-349c-4ed6-a681-56673f2e6fb3" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F7gKASDn5d82EmkqJmf5G%2FFox-BG%20Light%20(10).jpg?alt=media&#x26;token=5f5a06d9-d4c2-4b81-af0c-d1f2aa6bb81b" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FVn7bJvvgUrohtEJUNiMQ%2Fimage.png?alt=media&#x26;token=ecb38541-25d8-4209-aac0-60b6de93c165" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Float" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FFdD4NwksyehYrzCgaGpP%2Fimage.png?alt=media&#x26;token=59d79f13-a88c-44b9-a5ac-3c92f9c30f5b" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FtIll19uJGSmtI4rI032W%2Fimage.png?alt=media&#x26;token=eed7d929-abc5-4a91-bfe1-d0cb4a4d0733" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fjqg9JQBP5EaNenHIJrog%2Fimage.png?alt=media&#x26;token=b2f2e327-3a57-4e56-bc91-ffbe5eae7b47" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FJRC64hEqI54duKuphH7D%2Fimage.png?alt=media&#x26;token=2430ae60-489c-47dd-8904-4e6e256d8377" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FZi2j7WFZ6U3MDllg1x9o%2Fimage.png?alt=media&#x26;token=1542aa89-35e5-46d3-adb0-05e444dfd18b" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FNaAjz7eDxjwkdjMsWV3w%2Fimage.png?alt=media&#x26;token=7fb8df68-ab1c-46c1-b84b-726265286400" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F6lq15FULX47j2Nybzxy4%2Fimage.png?alt=media&#x26;token=c0f6e8ee-6a3d-4d92-bc8b-783a780d65ab" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FGOsPM9XJtA3xEWufkafi%2Fimage.png?alt=media&#x26;token=3dad8622-c0e2-410f-b379-d08544a60206" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fkmcj0dWV8Ny4uHtBHI5x%2Fimage.png?alt=media&#x26;token=e80f03e1-4a37-414b-93db-f19dd6212df6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fs2qRak0zOUvcVkiI8TcP%2Fimage.png?alt=media&#x26;token=78f2b5f8-fefe-4ee7-8143-80ea73f4924d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fo43Sj49SUCr7Ha8VvUqj%2Fimage.png?alt=media&#x26;token=5b958f88-3a2d-4344-844b-099c92a75617" 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="../theme-blocks" %}
[theme-blocks](https://docs.foxecom.com/pebble-theme/theme-blocks)
{% endcontent-ref %}