Classic List Collection Grid
Updated 21 days agoThe Classic List Collection Grid allows you to display collections in a clean, structured grid layout. It’s perfect for organizing your store into clearly defined sections, making it easier for users to explore different categories.
This layout keeps things simple and intuitive, helping users quickly find what they’re looking for.
Settings
Collection Title
This controls how the title appears for each collection item.
Text Style:
You can customize:
-
Font – Choose a font that matches your brand
-
Size/Weight – Adjust how bold or subtle the text appears
-
Line Height – Control spacing between lines
-
Letter Spacing – Fine tune spacing between characters
-
Text Color – Choose a readable color
-
Alignment – Position the text within the card
-
Capitalization – Set how the text appears
Icon:
-
Choose or Upload Icon – Add an icon alongside the title
-
Icon Color – Customize the icon color to match your design
Background:
-
Color – Set the background color behind the title
-
Radius – Adjust corner roundness
-
Padding – Control inner spacing
-
Relation – Define how the text and icon are arranged
Card Settings
This section controls how each collection card appears in the grid.
Layout Settings
-
Columns – Choose how many items appear in a row
-
Gap – Adjust spacing between each card
Image Attributes
-
Ratio – Set the shape of the image
-
Adjust Ratio – Fine tune the ratio for better fit
-
Image Scale – Choose whether the image fills or fits the container
Image Border
-
Color – Choose border color
-
Width – Adjust thickness
Card Padding
-
Radius – Adjust how rounded the card corners appear
-
Padding – Control spacing inside the card
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, you can:
For each item, you can:
-
Select Target Page – Choose where users are redirected on click
-
Select Collection Page – Link the item to a specific collection
-
Upload Image – Add a visual representation of the collection
-
Add Name – Set the display title for the collection
Benefits:
-
Creates a clear and intuitive navigation experience, helping users find products faster
-
Reduces confusion by organizing collections into a simple, predictable layout
-
Improves product discovery, especially for new users landing on your store
-
Helps in faster decision making
Related Articles
