# Media gallery

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

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 style="success" %}

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

## How to customize a Media gallery section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

### Section settings

#### Layout

<table><thead><tr><th width="199.9547119140625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Container</strong></td><td>Choose the layout width of the section (full width or fixed width).</td></tr><tr><td><strong>Type</strong></td><td>Select how media items are displayed (grid or carousel).</td></tr><tr><td><strong>Columns</strong></td><td>Set the number of columns shown in the grid layout.</td></tr><tr><td><strong>Horizontal gap</strong></td><td>Adjust the spacing between items horizontally.</td></tr><tr><td><strong>Vertical gap</strong></td><td>Adjust the spacing between items vertically.</td></tr></tbody></table>

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

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

{% tab title="Carousel" %}

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

#### Mobile layout

<table><thead><tr><th width="199.9547119140625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable swipe on mobile</strong></td><td>Allow users to swipe through items on mobile devices.</td></tr><tr><td><strong>Custom column width</strong></td><td>Enable custom sizing for columns instead of equal widths.</td></tr><tr><td><strong>Mobile columns</strong></td><td>Choose the number of columns displayed on mobile devices.</td></tr><tr><td><strong>Mobile horizontal gap</strong></td><td>Adjust spacing between items horizontally on mobile.</td></tr></tbody></table>

{% tabs %}
{% tab title="Enable swipe on mobile" %}

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

{% tab title="1 column" %}

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

{% tab title="2 columns" %}

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

{% hint style="info" %}
Check out other section settings: [Overview](/pebble-theme/theme-sections/overview.md#common-settings-available-in-most-sections)
{% endhint %}

### 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" %}

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

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

<table><thead><tr><th width="214.1806640625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Set the header alignment: left, center, or right.</td></tr><tr><td><strong>Devices</strong></td><td>Switch between desktop and mobile padding settings.</td></tr><tr><td><strong>Bottom</strong></td><td>Adjust the spacing below the header.</td></tr></tbody></table>

{% hint style="info" %}

#### 📦 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
  {% endhint %}

{% hint style="success" %}
📝 Learn more: [Basic](/pebble-theme/theme-blocks/basic.md)
{% endhint %}
{% endtab %}

{% tab title="Gallery item" %}

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

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

<table><thead><tr><th width="148.2213134765625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Type</strong></td><td>Select the media type to display (image or video).</td></tr><tr><td><strong>Image</strong></td><td>Upload or choose the image shown in the gallery item.</td></tr><tr><td><strong>Heading</strong></td><td>Add a title or label displayed with the gallery item.</td></tr><tr><td><strong>Preset</strong></td><td>Choose the text style for the heading.</td></tr><tr><td><strong>Corner radius</strong></td><td>Adjust the roundness of the gallery item corners.</td></tr></tbody></table>

{% hint style="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**.
{% endhint %}
{% endtab %}
{% endtabs %}


---

# 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/media-gallery.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.