The Gallery section allows you to display a clean horizontal showcase of product imagery, lifestyle photos, or campaign visuals. This section supports both standard grid layouts and continuous scrolling marquee effects (scrolling image/image marquee). Accompanied by optional header titles and subheadings, it provides an engaging visual presentation to highlight featured items and guide customers to related product pages.
Click on Gallery in the left sidebar to access the general section settings in the right sidebar.
Adjust the layout spacing and marquee display options for gallery images:
Enable scrolling image / marquee: Toggle this option to enable continuous horizontal scrolling (image marquee effect) across the gallery.
Spacing between images: Adjust the horizontal gap between images on desktop screens (in pixels, e.g., 8px).
Spacing between images (mobile): Adjust the horizontal gap between images on mobile screens (in pixels, e.g., 10px).
Customize the color scheme, width, and image spacing behavior:
Color scheme: Select a color scheme for the section. Click Edit scheme to customize existing color options.
Width: Choose between Page (contained width layout) or Full (edge-to-edge full width).
Use spacing between images: Toggle to enable or disable outer side margins based on the image spacing parameter.
Adjust section padding to control top and bottom spacing across devices:
Top: Set the top padding for desktop view (in pixels, e.g., 60px).
Bottom: Set the bottom padding for desktop view (in pixels, e.g., 60px).
Mobile padding:
Top: Set the top padding for mobile view (in pixels, e.g., 40px).
Bottom: Set the bottom padding for mobile view (in pixels, e.g., 40px).
Theme Settings: Access global theme-level settings relevant to section displays.
Custom CSS: Add custom CSS code to apply customized styling to the gallery.
Click on Section header under Gallery in the left sidebar to configure desktop and mobile text alignments and spacing.
Alignment: Select the text alignment for desktop view (Left, Center, or Right).
Space bottom: Adjust the spacing below the section header on desktop view (in pixels, e.g., 40px).
Width: Set the container width for the header text (Auto or Custom).
Alignment: Select the text alignment for mobile view (Left, Center, or Right).
Space bottom: Adjust the spacing below the section header on mobile view (in pixels, e.g., 24px).
Click Add block under Section header to insert elements such as Heading, Subheading, Text, or Spacer.
Subheading: Add a short introductory tagline above the main title
Heading: Enter the main headline to highlight your message or promotion
Text: Add a descriptive paragraph or supporting summary
Group button & Button: Insert call-to-action buttons or redirect visitors to other pages.
Click Add block under the main Gallery section to insert Image blocks. Each Image block represents an individual visual card within the gallery sequence or marquee loop.
When configuring an Image block, the right sidebar includes the following settings:
Image: Select or upload the image to display in the gallery slot.
Link: Attach a destination URL or product link when customers click on the image.
Open link in new tab: Enable this toggle to open the specified link in a separate browser tab.