# Media gallery

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

A clean media gallery section that showcases images and videos in a structured layout, helping highlight products, categories, or brand visuals in an engaging way.

## How to add a Media gallery section to your Shopify store

<Hint type="success">

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Media gallery** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to customize a Media gallery section

### Section settings

#### Layout

<Table widths="199.9547119140625,auto">

| Setting | Description |
| --- | --- |
| **Container** | Choose the layout width of the section (full width or fixed width). |
| **Type** | Select how media items are displayed (grid or carousel). |
| **Columns** | Set the number of columns shown in the grid layout. |
| **Horizontal gap** | Adjust the spacing between items horizontally. |
| **Vertical gap** | Adjust the spacing between items vertically. |

</Table>

<Tabs>
<Tab title="Grid">

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

</Tab>

<Tab title="Carousel">

![image](https://docs-assets.foxecom.app/pebble-theme/image_Cd0nfuWD.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(32)_lQPVsb5w.jpg)

</Tab>

<Tab title="1 column">

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

</Tab>

<Tab title="2 columns">

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

</Tab>
</Tabs>

<Hint type="info">

Check out other section settings: [Common settings available in most sections](https://docs.foxecom.com/pebble-theme/theme-sections/overview#common-settings-available-in-most-sections)

</Hint>

### Block settings

The Media gallery section includes two blocks: a **Header** block and multiple **Gallery item** blocks for displaying media content.

<Tabs>
<Tab title="Header">

![image](https://docs-assets.foxecom.app/pebble-theme/image_l2mN0iP6.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](https://docs.foxecom.com/pebble-theme/theme-blocks/basic)

</Hint>

</Tab>

<Tab title="Gallery item">

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

A gallery item block that displays an image or video with a customizable title, helping organize and highlight content within the media gallery.

<Table widths="148.2213134765625,auto">

| Setting | Description |
| --- | --- |
| **Type** | Select the media type to display (image or video). |
| **Image** | Upload or choose the image shown in the gallery item. |
| **Heading** | Add a title or label displayed with the gallery item. |
| **Preset** | Choose the text style for the heading. |
| **Corner radius** | Adjust the roundness of the gallery item corners. |

</Table>

<Hint type="warning">

Gallery item images don’t have a ratio setting; they’ll default to a **1:1 (square) ratio**. For the best results, we recommend uploading **square images**.

</Hint>

</Tab>
</Tabs>