# Image gallery

![image](https://docs-assets.foxecom.app/sleek-theme/instagram%20(1)_V6Sp3gmc.png)

The Image gallery section visually showcases products, portfolios, or photoshoots like a gallery effectively. 

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 type="success">

Steps

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

</Hint>

## How to edit an Image gallery section

### Section settings

#### 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

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

#### Highlight text

<Hint type="info">

See: [How to apply Highlight text to the section heading and block headings?](page://881208ae-2f89-43e8-af10-fa298a8100d2#highlight-text)

</Hint>

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.

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

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.

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

For example:

<div>![image](https://docs-assets.foxecom.app/sleek-theme/image_uaWNrLbm.png) ![image](https://docs-assets.foxecom.app/sleek-theme/Screenshot_14_4ZWGEggu.png)</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

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

**Image**

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

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

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

**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.

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

### **Block settings**

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

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

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.

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