# Collection list: Flex carousel

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FaHXmbTQHHNMBBLWEWxwh%2FFox-BG%20Light%20(11).jpg?alt=media&#x26;token=1338c8ff-60d5-4404-8288-48ba6ff2a723" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FXJJOiBcjiZLTRS3jTOq8%2Fimage.png?alt=media&#x26;token=5da56171-3c1e-417f-a638-bdeb58ffe526" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Edge shadows" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fpo1hfN7C7Mfn1IZRwb8V%2Fimage.png?alt=media&#x26;token=b4917719-523d-45d4-9fe1-d2a80d68ef9b" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FnIAVE6E0sOm40PAU1Bzt%2Fimage.png?alt=media&#x26;token=9751e7c7-6705-4288-a891-128001ed1ce8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Columns" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FqI1Xy0oSs3vHBpeGhtcv%2Fimage.png?alt=media&#x26;token=188f9d9c-a3c5-4d7d-83a6-b261aa5fd487" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F5uSlT60XQhUKi6zMKEqZ%2Fimage.png?alt=media&#x26;token=a1eca6c9-a84c-4f8e-a297-10d88f188566" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2 columns" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fuk9VZyvOHlCwyZbqL8H1%2Fimage.png?alt=media&#x26;token=85e98a58-7be5-4252-b4e4-a8da3dad2bb9" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Block settings

#### Header

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FWsO8EHqK6Dm5jeBDrBy9%2Fimage.png?alt=media&#x26;token=869591f0-2645-4dec-a461-13b88aaccacd" 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](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#image-card)
{% endhint %}

#### Collection card

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