> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-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/minimog-theme/theme-sections/gallery-images.md).

# Gallery images 🔥

<figure><img src="/files/5UHHLflJr3gSLUNAzYNO" alt=""><figcaption></figcaption></figure>

The **Gallery images** 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 a **Gallery images** section.

## How to add a Gallery images section to your Shopify store <a href="#how-to-add-an-image-gallery-section-to-your-shopify-store" id="how-to-add-an-image-gallery-section-to-your-shopify-store"></a>

{% hint style="info" %}
Steps

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

## How to edit a Gallery images section <a href="#how-to-edit-an-image-gallery-section" id="how-to-edit-an-image-gallery-section"></a>

### Section settings

#### Section header

Use the provided text fields to add a suitable **Heading**/**Subheading**/**Description**.&#x20;

* Leave any of the fields blank if you do not want to display them.&#x20;

Change the **Heading size** to Medium/Large and adjust the **Text alignment** (Left/Center)

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

You can also display a call-to-action button to redirect customers to your desired pages.&#x20;

Add a **Button label** and **Button link**, then choose a **Button style:**

* Primary button
* Secondary button
* White button
* Underline button

#### General

You can choose your **Container type** for the collection list as:

* Default;
* Full width;
* Use container box.

Select the **Color scheme** and **Header color scheme** for the section.

<figure><img src="/files/6RuxGdSn6Ap8wDRnWZB4" alt=""><figcaption></figcaption></figure>

#### Social media

Choose the social media **Icon** that you want to display:

* None
* Instagram
* Facebook
* Twitter

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

#### Settings

The **Layout** dropdown allows you to select the display style for your images:

* Grid
* Metro 1
* Metro 2

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

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

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

{% tab title="Metro 1" %}

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

{% tab title="Metro 2" %}

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

#### Grid settings

Use the slider to adjust the **Images per row** (between 4 and 12) for Image blocks.

You can also control the suitable spacing between the Image blocks by adjsuting **Column gap** and **Row gap** options. (0px - 50px)

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

#### Mobile settings

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

You can also control the suitable spacing between the Image blocks on mobile by adjusting the **Gap** option. (0px - 30px)

If you are not into the grid layout, you can use the carousel layout by selecting the **Use horizontal scrollbar** to make the image gallery swipeable.

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

### Block settings

You can add multiple **Image** blocks to the **Gallery images** section.

<figure><img src="/files/Xyiv64OvQTxnYMlPycEQ" 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/EKceMVJqvUwn1TxqI11f" alt=""><figcaption></figcaption></figure>