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