# Collection list: Flex carousel

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

Highlight your best-selling and seasonal collections with an easy-to-scroll carousel for faster shopping.

## How to add a Collection list: Flex carousel section to your Shopify store

{% hint style="success" %}

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

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

### Section settings

* **Container:** Defines whether the section spans the full page width or stays within a fixed content width.
* **Carousel settings**
  * **Overflow content:** Controls how off-screen items appear, either fully visible or with edge shadows.
  * **Slides per view:** Sets how many collection cards are shown at once, either automatically or by a fixed column count.
  * **Horizontal gap:** Adjusts the spacing between collection cards inside the carousel.

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

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

{% tab title="Edge shadows" %}

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

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

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

{% tab title="Columns" %}

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

* **Mobile layout**
  * **Columns:** Choose  1 or 2 columns on mobile.
  * **Horizontal gap (mobile):** Controls the horizontal spacing between cards on mobile devices.

{% tabs %}
{% tab title="1 column" %}

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

{% tab title="2 columns" %}

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

### Block settings

#### Header

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

<details>

<summary>📦 Nested dynamic blocks</summary>

The **Header** block supports 4 nested block types:

<table><thead><tr><th width="219.5386962890625">Dynamic blocks</th><th>Purpose</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Primary title text used to introduce the section or key content.</td></tr><tr><td><strong>Subheading</strong></td><td>Secondary text that provides additional context or supports the main heading.</td></tr><tr><td><strong>Text</strong></td><td>Regular body text used for descriptions, details, or any supplementary information within the block.</td></tr><tr><td><strong>Button</strong></td><td>A call-to-action element that users can click to open another page.</td></tr></tbody></table>

</details>

#### Collection item

* **Collection:** Selects the collection.
* **Image:** Allows you to upload a custom image; leave it blank to use the collection’s default image.
* **Aspect ratio:** Sets the shape of the image or adapts automatically based on the uploaded image.
* **Title:** Lets you enter a custom title; leave it blank to use the collection’s name.
* **Width:** Sets the display width of the collection item on desktop.
* **Width mobile:** Sets the display width of the collection item on mobile devices.

#### Image card

{% hint style="success" %}
📝 Learn more about Image card block: [Image card](/pebble-theme/theme-blocks/basic.md#image-card)
{% endhint %}

#### Collection card

{% hint style="success" %}
&#x20;📝 Learn more about Collection card block: [Collection card](/pebble-theme/theme-blocks/collection.md#collection-card)
{% endhint %}


---

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