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
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.
Editing templates change all pages that use that template. For unique pages, use new templates or dynamic metafields
Add gallery images
Add multiple gallery images with captions and re-order their position in the carousel.
STEPS
In your theme editor (Customize):
Click an Image with caption block to open the settings.
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.
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.
Enter Title text to display overlayed the gallery image.
Enter Caption text to display under the title.
Use the formatting buttons to add bold, italic, and linked text.
(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.
Click Save.
Click section to find settings
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):
Click on the Gallery carousel and scroll down to the Image settings.
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.
Set the Image caption style to Overlay the image or position it Beneath the image.
Select an Image caption size: either Small, Regular, or Large.
(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.
Click Save.
Click section to find settings
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 color scheme
Select the color scheme to apply the background and text colors.
Gallery layout
Change the number of columns of gallery images, and choose to loop the carousel.
Click section to find settings
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.
Related links
Grid section Multi-column section Featured collection slider Collection list slider
Last updated