# Image gallery

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

The Image gallery section visually showcases products, portfolios, or photoshoots like a gallery effectively.&#x20;

This feature allows you to present multiple images in a visually appealing manner, enhancing user engagement and increasing the likelihood of conversions by providing potential customers with a clearer view of what is being offered.

In this article, we will show you how to add an Image gallery section.

## How to add an Image gallery section to your Shopify store

{% hint style="success" %}
Steps

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

## How to edit an Image gallery section

### Section settings&#x20;

#### Section header

Change the **Layout** of the section header to your preferred direction: Vertical/ Horizontal.

Use the provided text fields to add a suitable **Heading**.

* Leave it blank if you do not want to display it

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

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

#### Highlight text

{% hint style="info" %}
See: [How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text)
{% endhint %}

Use the provided text fields to add a suitable **Subheading** and **Description**.

* Leave them blank if you do not want to display them.

You can also change the **Description size** to Small/ Base size/ Large to make the content look balanced on your website.

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

Additionally, this section setting lets you add the call-to-action button to redirect customers to your desired page or social media page.

Provide a **Button label** and **Button link** for this button, then choose a **Button style** (Primary button/ Secondary button/ Underline button/ Bordered icon button).

Select a suitable **Social media** icon for this button (Instagram/ Facebook/ Twitter)

* Choose **None** to display the normal button without an icon.

<figure><img src="/files/4jPFK9ruT0DTXaTMk14q" alt=""><figcaption></figcaption></figure>

For example:

<div><figure><img src="/files/uaWNrLbmk6ra3KTpbyhc" alt=""><figcaption></figcaption></figure> <figure><img src="/files/4ZWGEggup37W6sTq3sax" alt=""><figcaption></figcaption></figure></div>

#### Grid settings

Use the slider to adjust the **Number of columns on desktop** (between 2 and 6) for image blocks.

You can also control the suitable spacing between the Image blocks by selecting **Column gap** and **Row gap** options.

* **Column gap**: Extra large/ Large/Medium/Small/ Extra small/ None
* **Row gap**: Extra large/ Large/Medium/Small/ Extra small/ None/ Same as the column gap

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

**Image**

Select the **Image ratio** for images in the gallery as:

* Adapt to image
* Square (1:1)
* Portrait (3:4)
* Landscape (4:3)

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

**Mobile layout**

You can adjust the grid layout on mobile by changing the value of the **Number of columns on mobile** to 1 column or 2 columns.

If you are not into the grid layout, you can use the carousel layout by selecting the **Enable swipe on mobile** to make the image gallery swipeable.

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

### **Block settings**

You can add multiple **Image** blocks to the **Image gallery** section.

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

Click *Select image* to select a suitable **Image** for the block to display in the section.

Moreover, you can optionally add the specific **Link** for that image block.

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfdAc0w1W_mzr8IUoBfQfUXj51w5Asfs4GjvIvjaRGnx1D9js526ajw_a3OcZZCg1NNjjf48Ifk0q81oGtrmaqzEG2v_-LjGyxM6QBmkvrdAhAtcFf8l78iW2By4zB8zCNtwdRg5eUcTxdYQB2MwocbbQTv?key=abvPa_ihod6jQdlYgZiCdg" alt=""><figcaption><p><a href="https://foxecom.com/products/foxify-shopify-app?utm_source=HelpCenter&#x26;utm_medium=banner&#x26;utm_campaign=customer+success">Try Foxify free now</a></p></figcaption></figure>


---

# 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/sleek-theme/theme-sections/image-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.