Use the Gallery to animate your images in a horizontal loop. It gives the screen some movement and prevents it from being totally still. This can also help increase sales and customer engagement.
This section is suitable for showcasing products, lifestyle photography, brand imagery, social media content, or other visual collections.
Click the section name to see the section settings on the right-hand sidebar.
Customize how images are displayed in the gallery.
Make section full width: Expand the section to use the full available width.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Image ratio: Select the aspect ratio used for gallery images. In the example shown, Square is selected.
Number of images on desktop: Set the number of images displayed on desktop. The layout is automatically optimized for mobile devices.
Corner radius unit: Choose whether the image corner radius is measured in pixels or percent.
Corner radius images: Adjust the corner radius of gallery images.
Spacing between images: Adjust the spacing between gallery images on desktop.
Spacing between images (mobile): Adjust the spacing between gallery images on mobile devices.
Control what happens when customers interact with gallery images.
Action after when clicked image: Choose what happens when a customer clicks a gallery image. In the example shown, Open modal is selected.
Auto scroll: Enable automatic scrolling for gallery images on desktop. Auto-scroll only activates when the number of images exceeds the number that can be displayed on screen.
Speed: Adjust the auto-scroll speed on desktop.
Mobile auto-scroll: Enable automatic scrolling for gallery images on mobile devices.
Mobile speed: Adjust the auto-scroll speed on mobile devices.
Item width on mobile: Set the width of each gallery item on mobile devices. Set a value below 100% to reveal a preview of the next slide.
The Section header container allows you to add introductory content above the gallery.
Click Add block under Section header to add and organize child blocks as content.
In the example shown, the section header includes:
Sub text: Add a short introductory message or tagline
Heading: Add the main heading of the gallery
Other supported content blocks can be added through Add block depending on the available section header options.
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Click Add block below the Section header container to add images to the gallery. Each Image block represents one gallery item.
The available options include:
Image: Select the image displayed in the gallery. A 1000 × 1000 px JPG image is recommended in the example shown.
Link: Optionally add a destination URL for the image.
Open in new tab: Enable this option to open the assigned link in a new browser tab.
You can add multiple Image blocks and reorder them by dragging and dropping them in the Theme Editor.