Gallery

The section allows you to showcase a collection of images in a clean, visually appealing grid or carousel layout.

It’s designed to highlight photography, brand visuals, events, or lifestyle imagery that supports your store’s narrative and aesthetic.

This section is ideal for visual storytelling — presenting your brand identity, product use cases, or creative process in an engaging and organized way. Each image can be styled consistently and may include optional links, captions, or hover effects, depending on your theme’s settings.

On the storefront, the Gallery enhances visual appeal and helps customers connect emotionally with your brand. It works well for lookbooks, campaign showcases, behind-the-scenes images, or artistic content that complements product presentation.

In essence, the Gallery section transforms visual content into part of your story, creating an immersive experience that reinforces your brand’s style and message.

Location: Sections -> Templates -> Storytelling: Gallery

---

Gallery – Options Overview

Option	Values / Description
Heading
Subheading	Adds an introductory line of text displayed above the main heading.
Heading	Sets the main title of the section displayed above the gallery.
Gallery	Defines the section name or label used internally.
Description	Adds additional descriptive text beneath the heading to explain the gallery content.
Heading alignment	Left, Center – Aligns the heading and description text within the section.
Secondary button 1
Icon 1	Example: info – Adds a small icon next to the button name for visual context.
Name	Sets the label or name displayed on the first secondary button.
Link	Defines the destination URL for the first secondary button.
Secondary button 2
Icon	Example: info – Adds an icon for the second button.
Name	Sets the label displayed on the second secondary button.
Link	Defines the link URL for the second secondary button.
Layout
Top spacing	None, Small, Medium, Normal – Adjusts the vertical space above the gallery section.
Width	Default, Boxed, Wide, Fullwidth – Controls the section’s width. The Wide option applies to screens 1440px and larger.
Number of columns	2–8 – Sets how many image columns appear per row on desktop.
Number of columns on tablet	2–8 – Defines how many columns appear on tablet devices.
Mobile grid	One item per row, Two items per row, Three items per row – Determines the image layout for mobile screens.
Images
Image hover effect	Adds an interactive visual animation when hovering over an image.
Basic theme settings	Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, Shine – Controls the animation style applied on image hover.
Image ratio	Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9) – Sets the aspect ratio of images within the gallery.
Enable zoom	Activates image zoom functionality for a closer view on click or hover.
Dividing line
Show	Displays or hides a line divider to separate the section visually.
Background
Background	Hide, Color, Gradient, Image – Defines the section’s background style.
Colors
Base	Sets the primary color theme of the section.
Accent	Defines accent or highlight colors for active elements.
Lines	Adjusts the line color for dividers or grid elements.
Lines hover	Sets the line color on hover.
Zoom icon
Background	Defines the background color for the zoom icon overlay.
Icon	Sets the color of the zoom icon itself.
Link buttons
Show background	Toggles whether the button background is visible.
Background	Sets the button’s default background color.
Background gradient	Adds a gradient to the button’s background.
Border	Defines the border color of the button.
Text	Sets the text color of the button.
Icon	Defines the color of the icon inside the button.
Show background on hover	Enables a different background color when the button is hovered.
Background hover	Sets the background color for the button hover state.
Background gradient hover	Adds a gradient background on hover.
Border hover	Sets the hover color for the button border.
Text hover	Changes the text color on hover.
Icon hover	Adjusts the icon color when hovered.
Enable shadow	Adds a shadow behind the button for visual depth.
Shadow	Defines the default button shadow style.
Shadow hover	Sets the hover shadow style for interactive feedback.

Image – subsection overview

Each Image subsection represents a single gallery item. You can add as many image blocks as needed to build your gallery. Each block allows you to upload an image, maintaining the chosen aspect ratio and animation effects defined in the main section settings.