# Gallery images

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FD610V8nJZqBcmXFLfuxB%2FFox-BG%20Light%20(37).jpg?alt=media&#x26;token=414649cc-99ef-4985-a77a-46ad337cdf34" 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](https://docs.foxecom.com/zest-theme/changelog "mention")
{% 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-global-sections/general-settings#highlight-text">#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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F1SEA8TmDtemlaozhaI6r%2Fimage.png?alt=media&#x26;token=82a8e91c-81bb-427a-966e-fcf8c4ab3448" alt=""><figcaption></figcaption></figure></div><ul><li><strong>Metro</strong> layout:</li></ul><div><figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FeG6rdZUw1DIx9bGk0H6Z%2Fimage.png?alt=media&#x26;token=749a80e8-a782-4f3e-8de1-6b9d382ee62f" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FH9XCficsGOHa5au9n9Db%2Fimage.png?alt=media&#x26;token=bea72c0a-bd06-493c-898b-4b157730714c" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FAiZe8puFVfEPZTl6aqkG%2Fimage.png?alt=media&#x26;token=087b5ff3-1777-4dce-b760-93b78bd582ac" 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>