Use the Image grid section to showcase a gallery of images in a grid layout for visual storytelling, with the option to link each image to specific products, collections, or custom pages.
Adding the image grid section
- Log in to your Theme editor and navigate to the page you would like to display this section.
- You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
- From the list of available sections, find and select Image grid.
Section details
After adding the Image grid section, you will be presented with customization options and settings that you can adjust to match your store's style.
Content
- Heading: Adds a title at the top of the section.
- Heading size: Adjusts the font size of the heading text.
- Text alignment: Determines whether the text is left-aligned, centered, or right-aligned.
Layout
- Images per row: Sets how many image blocks can appear in each row.
- Image shape: Adjusts the size and shape of the image blocks.
- Grid spacing: Sets the spacing in pixels between each block.
- Full page width: Expands the section to the full width of the page when enabled.
- Add top padding: Adds extra spacing above the section.
- Add bottom padding: Adds extra spacing below the section.
- Show section divider: Adds a divider and extra spacing above the section.
Image overlay
- Text color: Sets the color of the text shown on the images.
- Overlay: Determines the color of the image overlay.
- Overlay opacity: Controls the opacity of the image overlay.
Image block settings
Each image block has the following customization options to add images, texts and links.
- Image: Select the image to display in the block. If no image is selected, the block will automatically use the image from the linked product or collection.
- Link: Add a link to direct customers to the selected page when the image block is clicked.
- Heading: Add text to display over the image.