# Video cards: Flex carousel

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(3)_1mdWxma5.jpg)

The **Video cards: Flex carousel** section showcases customer stories through interactive video-based cards, helping create a more engaging and immersive brand experience.

## How to add a Video cards**: Flex carousel** to your Shopify store

<Hint type="success">

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

</Hint>

## How to customize a Video card&#x73;**: Flex carousel** section

### Section settings

<Table widths="189.80377197265625,auto">

| Setting | Description |
| --- | --- |
| **Layout** | Defines whether the section spans the full page width or stays within a fixed content width. |
| **Overflow content** | Controls how content outside the visible area of the slider/container is displayed (Visible/Edge shadows). |
| **Slide per view** | • Defines how the number of visible slides is calculated.<br/>• **Auto:** Automatically adjusts the number of visible slides based on the container width and slide size.<br/>• **Column:** Uses a fixed number of columns set in the **Columns** setting. |
| **Columns** *(Columns only)* | Set the number of columns shown in the column layout. |
| **Horizontal gap** *(Columns only)* | Adjust the spacing between items horizontally. |

</Table>

<Tabs>
<Tab title="Overflow content: Visible">

![image](https://docs-assets.foxecom.app/pebble-theme/image_J2FjkEBm.png)

</Tab>

<Tab title="Overflow content: Egde shadows">

![image](https://docs-assets.foxecom.app/pebble-theme/image_o0MuZnZR.png)

</Tab>
</Tabs>

<Tabs>
<Tab title="Control type: None">

![image](https://docs-assets.foxecom.app/pebble-theme/image_3P51m1NF.png)

</Tab>

<Tab title="Control type: Standard">

![image](https://docs-assets.foxecom.app/pebble-theme/image_tUjx9zOz.png)

</Tab>

<Tab title="Control type: Float">

![image](https://docs-assets.foxecom.app/pebble-theme/image_jKdKnvwU.png)

</Tab>
</Tabs>

#### Mobile layout

<Table widths="199.9547119140625,auto">

| Setting | Description |
| --- | --- |
| **Enable swipe on mobile** | Allow users to swipe through items on mobile devices. |
| **Custom column width** | Enable custom sizing for columns instead of equal widths. |
| **Mobile columns** | Choose the number of columns displayed on mobile devices. |
| **Mobile horizontal gap** | Adjust spacing between items horizontally on mobile. |

</Table>

<Tabs>
<Tab title="Enable swipe on mobile">

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(7)_opF4P1rR.jpg)

</Tab>

<Tab title="1 column">

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(8)_lcRvRdqV.jpg)

</Tab>

<Tab title="2 columns">

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(9)_LyjRiayh.jpg)

</Tab>
</Tabs>

<Hint type="info">

Check out other section settings: [Common settings available in most sections](page://625cd9e1-7d1f-49ba-9df4-c57c5aafffa9#common-settings-available-in-most-sections)

</Hint>

### Block settings

The Video cards: Flex carousel section includes two blocks: a **Header** block and multiple **Video cards** blocks for displaying media content.

<Hint type="info">

In this section, you can also add other blocks such as:

* [Basic](page://0c49f0ee-0490-40c8-ad62-d9db25ad3673#image-card)
* [Collection item](page://f4441d7f-e5e6-431f-995e-04ee08374de2#collection-item)
* [Collection card](page://78bfb930-7ae1-4f41-80fe-7d624e777516#collection-card)

</Hint>

<Tabs>
<Tab title="Header">

![image](https://docs-assets.foxecom.app/pebble-theme/image_s3CddtTp.png)

Use the **Header** block to create and customize the section’s heading and introductory content.

<Table widths="214.1806640625,auto">

| Setting | Description |
| --- | --- |
| **Alignment** | Set the header alignment: left, center, or right. |
| **Devices** | Switch between desktop and mobile padding settings. |
| **Bottom** | Adjust the spacing below the header. |

</Table>

<Hint type="info" title="📦 Nested dynamic blocks">

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
* **Image** – Display an image or icon
* **Button** – Add a call-to-action

</Hint>

<Hint type="success">

📝 Learn more: [Basic](page://0c49f0ee-0490-40c8-ad62-d9db25ad3673)

</Hint>

</Tab>

<Tab title="Video cards">

![image](https://docs-assets.foxecom.app/pebble-theme/image_AN2IyLfI.png)

Displays a customizable video card with video media, cover image, sizing and appearance settings, plus an optional info area with avatar, title, bio, typography, and color customization.

<Hint type="success">

📝 Learn more: [Basic](page://0c49f0ee-0490-40c8-ad62-d9db25ad3673#video-card)

</Hint>

</Tab>
</Tabs>