# Gallery

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/ira/readme/theme-retirement).
{% endhint %}

The **Gallery** section displays a grid of images and captions in an Instagram feed-like way. It's great for curating your actual social media posts while having total control over how they're presented..

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/ira/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/ira/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/ira/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Gallery.**
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## Add gallery items

Add as many **Gallery** items as you like, each one made to look like an image-focused social media post.

**Note**: On mobile devices, the gallery displays one image at a time with clickable arrows that customers can click through.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click an **Image** block to open the settings.

   > Click **(+) Add image** to add more gallery items.
2. Under **Image**, click **Select image** to upload and select your image file.

   > There are no required image dimensions but a **Square (1:1)** orientation is ideal. We recommend all images have the same width or height (or aspect ratio).
3. Add a caption in the **Text** field to display below the image.

   > We recommend keeping this to a short, one or two sentence caption.
4. Select or paste a URL in the **Link** field.

   > The gallery item will be clickable and take customers to the link destination.

   > Make sure you copy the full URL, including **`https://`** at the start. For example: **`https://instagram.com/abc123`**.
5. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

   > Click **Remove block** in the block settings to delete a block.

   > Click the **Eye icon** to hide or unhide a block..
6. Click **Save**.

</details>

## **Section style**

In the section settings, change the colors and control the height of the carousel image when they appear on mobile.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Gallery** section to open the section settings.
2. Change the **Heading** text to display as the section title.
3. To display a link, paste or select a **Link** and change the **Link text**.

   > If you want to link to an external page, make sure you copy the full URL, including **`https://`** at the start. For example: **`https://instagram.com/abc123`**.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-e0604bc9fa3ba825466ec787324c9e69f9a8f481%2Fgallery-link.jpeg?alt=media)
4. To make your images a uniform shape and size, select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of your image.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
5. Set the amount of **Images per row** using the slider.
6. Click **Save**.

</details>

<br>

***

> **Related links**
>
> [Mosaic grid (2 columns)](https://help.fluorescent.co/ira/sections/theme-sections/mosaic-grid-2-columns)\
> [Mosaic grid (3 columns)](https://help.fluorescent.co/ira/sections/theme-sections/mosaic-grid-3-columns)\
> [Slideshow](https://help.fluorescent.co/ira/sections/theme-sections/slideshow)
