# Image cards: Flex carousel

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FR4eECq0nTTwzXKEq5efH%2FFox-BG%20Light%20-%202025-11-24T172608.541.jpg?alt=media&#x26;token=2ec89b39-1ba4-4ed5-beaa-451c9ab162f3" alt=""><figcaption></figcaption></figure>

Showcase products, collections, or image-based storytelling using a flexible, swipe-ready carousel layout.

## How to add an Image cards: Flex carousel section to your Shopify store

{% hint style="success" %}

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

## How to edit the section Image cards: Flex carousel

### Section settings

#### **Carousel settings**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Overflow content</strong></td><td>Control whether items slightly peek outside the container (<code>visible</code>) or use edge shadows (<code>edge-shadows</code>).</td></tr><tr><td><strong>Slides per view</strong></td><td>Choose <code>auto</code> (free-size cards) or fixed <code>columns</code>.</td></tr><tr><td><strong>Columns</strong></td><td>Number of desktop columns (2–4). Visible only if using fixed columns.</td></tr><tr><td><strong>Column gap</strong></td><td>Horizontal space between cards on desktop.</td></tr></tbody></table>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FHtWm3XxdJD9WTipZYwnf%2Fimage.png?alt=media&#x26;token=bb0cdc33-cf35-4583-8c58-cfe0086178b9" 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%2FSGpcyJd2fyZTU0sIIIeR%2Fimage.png?alt=media&#x26;token=6fb4e7a3-6fea-44a9-a703-e60e0df8baf7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### **Carousel controls**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Control type</strong></td><td>Choose navigation style: none, standard arrows, or floating arrows.</td></tr></tbody></table>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FJjJ4o6gZluoq9HZQ8y8E%2Fimage.png?alt=media&#x26;token=3c749e81-c1ed-48d7-b556-c1eb88f47933" 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%2FmPkBGlEQL90GnLCu2VN9%2Fimage.png?alt=media&#x26;token=c5c90c61-f14b-4ab5-be0a-1b2e671d6f88" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Block settings

Beside the static **Header** block. The carousel supports 3 block types:

* [Image card](https://docs.foxecom.com/pebble-theme/theme-blocks/basic#image-card)
* [Collection card](https://docs.foxecom.com/pebble-theme/theme-blocks/collection#collection-card)
* Collection item (custom card)

<details>

<summary>See Collection item block settings</summary>

Display a compact, clickable collection pill with an image and title.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FcZCYZoHljweKnXwer2NB%2Fimage.png?alt=media&#x26;token=0ecabba4-6e3a-4831-884d-065d99cabfec" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Collection</strong></td><td>Select a collection to link to. If set, the entire block becomes a clickable link.</td></tr><tr><td><strong>Image</strong></td><td>Upload a custom image. If left blank, Pebble auto-pulls: collection image → first product image.</td></tr><tr><td><strong>Aspect ratio</strong></td><td>Controls image shape.</td></tr><tr><td><strong>Collection title</strong></td><td>Optional custom title. If blank, the collection’s real name is used.</td></tr></tbody></table>

</details>