Gallery carousel

This section was added in v1.5.0 on Oct 27, 2022. See our Changelog and theme update guide to learn more.

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

Set up section

---

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

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

Click the section to edit the general section styles: Padding | Top divider | Animation

Add gallery images

---

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

STEPS

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

   

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

   Click the Eye icon to hide or unhide a block.

7. Click Save.

Click section to find settings

Setting	Description
Image	Upload and select an image for the gallery block. There are no required dimensions. We recommend square (1:1) images for the best fit.
Image focal point	Select the area of the image that will always appear centered within the block to avoid cropping.
Title	Enter text to display a gallery image title overlayed or below the image.
Caption	Enter text to display below the title.

Change gallery image style

---

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

STEPS

In your theme editor (Customize):

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

   
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.

   
3. Set the Image caption style to Overlay the image or position it Beneath the image.

   
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 when matching colors to make sure your text is clear and readable for everyone.
6. Click Save.

Click section to find settings

Setting	Description
Image aspect ratio	Crop the shape of your images to Square (1:1), Landscape (3:2), or Portrait (2:3). Choose Natural to display the original image shape.
Image caption style	Choose to Overlay the caption over the image or display the title Beneath the image.
Image caption size	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.
Overlay text background style	Select the color behind the heading and caption to Solid or Gradient when set to the Overlay style.
Overlay text	Select the color of the title and caption when set to the Overlay style.
Overlay text background	Select the color behind the text when set to the Overlay style.

Change gallery layout

---

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

Click section to find settings

Setting	Description
Number of columns on desktop	Select the number of image blocks to show per row for desktop. Either 1, 2, 3, or 4.
Number of columns on mobile	Select the number of image blocks to show per row for mobile screens. Either 1 or 2.
Loop carousel	Allow visitors to return to the first image by clicking or swiping through the last image.

Section header

---

The Section header appears above the section. Add a Heading, Subheading, and optional Button.

STEPS: Add headings and text

In your theme editor (Customize):

1. Click the Gallery carousel section to open the settings.

2. Enter Heading text to display as a title at the top of the banner.

   we recommend one to three words.

   Delete the text in this field to remove the heading.

3. Enter Subheading text to display beneath the heading.

   We recommend two to three short sentences.

   Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide ↗.

4. Click Save.

STEPS: Add button

In your theme editor (Customize):

1. Click the Featured collection grid section to open the settings.

2. Select or paste a URL for the Button link.

3. Enter text for the Button label.

   The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

4. Click Save.

Click section to find settings

Setting	Description
Heading	Enter text to display a section title above the collection list.
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance.
Subheading	Enter text to display a section subheading below the heading.
Button link	Select or paste a URL for the button.
Button label	Enter text to display a button label. Leave this field blank to remove the button.

---

Related links

Grid section Multi-column section Featured collection slider Collection list slider