Advanced content grid

This section allows for a customizable grid layout with a variety of blocks, including images, videos, and text. It offers control over column and row spans, as well as customizable content positioning and styling options for each block. Perfect for showcasing product features, marketing messages, or visual storytelling.

Quick Start Guide

‍

Access the Theme Editor: Navigate to `Online Store > Themes > Customize`.
Add a Section: Click on `Add section` and select the desired section from the list of available sections.
Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
‍

If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.

General section settings

Within this section, you'll find common settings like containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.

Section-Specific Settings

Grid Gap on Desktop/Mobile: Adjust the space between grid items (in pixels).
Row Height on Desktop/Mobile: Set row heights for the grid.

Block Settings

Image with Text Overlay Block

Grid Layout: Control columns and rows for desktop/mobile.
Image Upload: Upload images for desktop and mobile.
Image Overlay Opacity: Adjust overlay transparency.
Subheading and Heading: Set with size options.
Rich Text: Add text, enable large text.
Content Position: Control positioning for desktop/mobile.
Button: Add button text, links, customize style (primary, outline, arrow, sticky).
Spacing: Adjust spacing for desktop/mobile.

Image with Text Below Block

Grid Layout: Customize column and row span for desktop and mobile.
Image Upload: Set images for both devices.
Text Content: Add subheadings, headings, rich text, with custom alignment.
Button: Configure button label, link, and style.

Image Block

Grid Layout: Adjust columns and rows for desktop/mobile.
Image: Upload image and add a link.

Text Block

Grid Layout: Configure columns and rows.
Subheading and Heading: Customize heading and subheading sizes.
Text: Add rich text with an option to enlarge.
Content Position: Adjust content alignment.
Button: Configure button label, link, and style.

Video Block

Grid Layout: Configure grid layout for desktop/mobile.
Video Upload: Embed YouTube/Vimeo videos.
Autoplay: Option to enable video autoplay.

Video with Text Overlay Block

Grid Layout: Adjust column and row span.
Video Overlay: Adjust overlay opacity.
Text Content: Set subheading, heading, and rich text.
Button: Configure button text, link, and style.

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!