> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/gallery-images.md).

# Gallery images

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

Inspire your customers by showcasing compelling images like a gallery, giving them a better understanding of the items, and browsing your products more easily.

{% hint style="info" %}
This section is available on ✨ **Zest version 7.0.0 onwards**. See our [Changelog](/zest-theme/changelog.md)
{% endhint %}

## How to add a Gallery images section to your Shopify store

{% hint style="success" %}
**Steps**

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

## How to edit the Gallery images section

### Section settings

These control how the entire gallery behaves and looks.

<table><thead><tr><th width="220">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Add a title for the section.<br><a data-mention href="/pages/ZxFdF1oKUnZZwOCogQFE#highlight-text">/pages/ZxFdF1oKUnZZwOCogQFE#highlight-text</a></td></tr><tr><td><strong>Subheading</strong></td><td>Optional short text shown above the heading — ideal for labels like “Tag us” or “As seen on”</td></tr><tr><td><strong>Description</strong></td><td>Add a short message.</td></tr><tr><td><strong>Button label &#x26; link</strong></td><td>Add a CTA button (e.g., “Follow us”) and link it to your social page or campaign. Leave blank to hide the button.</td></tr><tr><td><strong>Button style</strong></td><td>Choose the button style to match your brand look.</td></tr><tr><td><strong>Image ratio</strong></td><td>Controls how images are cropped: choose <strong>Adapt to image</strong> (keep original ratio) or a fixed shape.</td></tr><tr><td><strong>Images per row</strong></td><td>Set how many images show per row on desktop (2 to 12).</td></tr><tr><td><strong>Column gap</strong></td><td>Adjust spacing between the images (when the <strong>Layout</strong> is <strong>Grid</strong>).</td></tr><tr><td><strong>Layout</strong></td><td><p>Choose between:</p><ul><li><strong>Grid</strong> layout:</li></ul><div><figure><img src="/files/ZRCEAOEIrDjlVMZhssSA" alt=""><figcaption></figcaption></figure></div><ul><li><strong>Metro</strong> layout:</li></ul><div><figure><img src="/files/U9bqoS2PU3SJasocHlkn" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Color scheme</strong></td><td>Pick a background/text color preset that matches your theme.</td></tr><tr><td><strong>Enable carousel on desktop</strong></td><td><p>Optional — turns the grid into a swipeable carousel if there are more images than columns.</p><div><figure><img src="/files/UHrY3T4fZN0QotUmaqE4" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Show navigation / pagination</strong></td><td>Toggle arrows or page dots for the carousel view.</td></tr><tr><td><strong>Enable swipe on mobile</strong></td><td><p>Allow users to swipe through images horizontally on mobile.</p><div><figure><img src="/files/DYn4FgB68532ZER7vCas" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Number of columns on mobile</strong></td><td>Choose 1 or 2 columns layout for smaller screens.</td></tr></tbody></table>

### Block settings

Each **Image block** lets you upload an individual image to the gallery.

<table><thead><tr><th width="220">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload your image. JPG or WEBP formats work best.</td></tr><tr><td><strong>Text (optional)</strong></td><td>Add short label text on the image when hovering.</td></tr><tr><td><strong>Text size</strong></td><td>Choose between Small, Medium, or Large to adjust text visibility.</td></tr><tr><td><strong>Link</strong></td><td>Link the image to a product, collection, or social post. Leave blank if you don’t want it clickable.</td></tr></tbody></table>