> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/gallery-carousel.md).

# Gallery carousel

{% hint style="warning" %}
This section was added in v1.5.0 on Oct 27, 2022. See our [Changelog](/stiletto/readme/changelog.md) and [theme update guide](/stiletto/general/theme-updates.md) to learn more.
{% endhint %}

The **Gallery carousel** section displays a single-row carousel of images with captions. Customers can click or horizontally scroll through the gallery of images.

<img src="/files/cCT71Nc4fAaM2Eb1WDuw" alt="" width="563">

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Gallery carousel**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add gallery images</h2>

***

Add multiple gallery images with captions and re-order their position in the carousel.

<details>

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

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

1. Click an **Image with caption** block to open the settings.
2. Click **Select image** to upload and select a gallery image.

   > We recommend square (1:1) images for the best fit. There are no required dimensions.
3. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](/stiletto/general/image-guide/theme-image-settings.md#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
4. Enter **Title** text to display overlayed the gallery image.
5. Enter **Caption** text to display under the title.

   > Use the formatting buttons to add bold, italic, and linked text.
6. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](/files/tOHF9cG7TWZSPV5YgAH3)

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

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

</details>

<sub>Click section to find settings</sub>

<table><thead><tr><th width="187">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Upload and select an image for the gallery block. There are no required dimensions. We recommend square (1:1) images for the best fit.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the area of the image that will always appear centered within the block to avoid cropping.</td></tr><tr><td><mark style="color:blue;">Title</mark></td><td>Enter text to display a gallery image title overlayed or below the image.</td></tr><tr><td><mark style="color:blue;">Caption</mark></td><td>Enter text to display below the title.</td></tr></tbody></table>

### <mark style="color:$primary;">Change gallery image style</mark>

Customize the shape of the collection images, and the position, style, and colors of the titles.

<details>

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

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

1. Click on the **Gallery carousel** and scroll down to the **Image** settings.

   ![](/files/gJWWkVnLAXcfgYLogZ1O)
2. To make all gallery images a uniform shape and size, select an **Image aspect ratio** to crop all images to **Square**, **Landscape**, or **Portrait**.

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

   ![](/files/RFmWGT0O4EPQmXP8F5si)
3. Set the **Image caption style** to **Overlay** the image or position it **Beneath** the image.

   ![](/files/PqYHJqQbrTX0TxPLZPfV)
4. Select an **Image caption size**: either **Small**, **Regular**, or **Large**.
5. (*If **Overlay** title style selected*) Set the **Background style** to a **Solid** color or a **Gradient**.

   > Use the color selectors to change the **Overlay title background** and **Overlay title** color.

   We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
6. Click **Save**.

</details>

<sub>Click section to find settings</sub>

<table><thead><tr><th width="226">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Crop the shape of your images to <strong>Square (1:1)</strong>, <strong>Landscape (3:2)</strong>, or <strong>Portrait (2:3)</strong>. Choose <strong>Natural</strong> to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Image caption style</mark></td><td>Choose to Overlay the caption over the image or display the title Beneath the image.</td></tr><tr><td><mark style="color:blue;">Image caption size</mark></td><td>Set the caption text size to Small, Regular, or Large. Choose to Overlay the caption over the image or display the title Beneath the image.</td></tr><tr><td><mark style="color:blue;">Overlay text background style</mark></td><td>Select the color behind the heading and caption to Solid or Gradient when set to the Overlay style.</td></tr><tr><td><mark style="color:blue;">Overlay color scheme</mark></td><td>Select the color scheme to apply the background and text colors.</td></tr></tbody></table>

<h2 align="center">Gallery layout</h2>

***

Change the **number of columns** of gallery images, and choose to **loop** the carousel.

<sub>Click section to find settings</sub>

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select the number of image blocks to show per row for desktop. Either <strong>1</strong>, <strong>2</strong>, <strong>3</strong>, or <strong>4</strong>.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Select the number of image blocks to show per row for mobile screens. Either <strong>1</strong> or <strong>2</strong>.</td></tr><tr><td><mark style="color:blue;">Loop carousel</mark></td><td>Allow visitors to return to the first image by clicking or swiping through the last image.</td></tr></tbody></table>

***

> **Related links**
>
> [Grid section](/stiletto/sections/theme-sections/grid.md)\
> [Multi-column section](/stiletto/sections/theme-sections/multi-column.md)\
> [Featured collection slider](/stiletto/sections/theme-sections/featured-collection-slider.md)\
> [Collection list slider](/stiletto/sections/theme-sections/collection-list-slider.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://help.fluorescent.co/stiletto/sections/theme-sections/gallery-carousel.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.