Image Grid
Updated 1 month agoIt displays multiple images in a grid layout, each linking to different collections or pages. Use it when you want to showcase multiple categories or themes visually in a structured way.
Under the “Settings” tab,
Grid Settings
Control how your grid is displayed.
-
Columns – Choose between 2, 3, or 4 columns depending on how dense you want the layout
-
Gap – Adjust the spacing between each grid item
Header Title
Use the eye icon to enable or disable the header.
This acts as the main title for your image grid section.
Customization Options:
-
Text – Add a title like “Explore Categories” or “Shop by Style”
-
Font – Choose a font that matches your brand
-
Size/Weight – Adjust how bold or subtle the title appears
-
Line Height – Control spacing between lines
-
Letter Spacing – Fine tune spacing between characters
-
Text Color – Choose a color that stands out clearly
-
Alignment – Position the text (left, center, or right)
-
Capitalization – Set how the text appears
Feature Title
Use the eye icon to enable or disable titles for each grid item.
This is the label shown on each image card.
Text Style Options:
-
Font – Choose the style of the text
-
Size/Weight – Adjust how prominent the title appears
-
Line Height – Control spacing between lines
-
Letter Spacing – Adjust spacing between characters
-
Text Color – Set a readable color
-
Alignment – Position the text within the card
-
Capitalization – Choose how the text appears
Background:
-
Padding – Adjust spacing around the title for better readability
Card Settings
Image Attributes
-
Ratio – Set the shape of the image
-
Adjust Ratio – Fine tune the ratio for better fit
-
Radius – Adjust how rounded the corners appear
-
Image Scale – Choose whether the image fills or fits the container
Card Background
-
Color – Set the background color for each card
-
Radius – Adjust corner roundness
-
Padding – Control inner spacing
Card Border
-
Color – Choose border color
-
Width – Adjust thickness
Background and Spacing
Background:
-
Color – Set the section background color
-
Radius – Adjust corner roundness
-
Padding – Control spacing inside the section
-
Margin – Manage spacing outside the section
Border:
-
Color – Choose border color
-
Width – Adjust thickness
-
Sides – Select which sides should display the border
Under the “Content” tab:
In the content tab, you can add and manage individual grid items.
For each item, you can:
-
Enable or Disable Button – Show or hide the button if needed
-
Upload Image – Add an image to represent the item
-
Select Target Page – Choose where users are redirected on click
-
Select Collection – Link the item to a specific collection
-
Add Name – Set the display title for the item
Benefits:
-
Improves visual navigation
-
Helps users scan multiple options quickly
-
Supports category-based exploration
-
Enhances overall store aesthetics and organization
Related Articles
