Collection Grid
Updated 1 month agoCollections grid displays multiple collections in a structured grid layout for easy browsing. You can use it on the homepage to help users quickly explore different product categories.
Grid Settings
Adjust how your collection items are displayed.
-
Columns - Choose whether the grid shows 2, 3, or 4 columns.
-
Gap (px) - Set the spacing between each grid item.
Header Title
-
Text - Enter the title you want to display above the grid.
-
Font - Select the font style that fits your brand.
-
Size/Weight - Adjust the font size and choose how bold or light the text appears.
-
Line Height - Control the spacing between lines in the title.
-
Letter Spacing - Increase or decrease the space between each character.
-
Text Color - Pick the color for your title text.
-
Alignment - Set the position of the title within the header.
-
Capitalization - Decide how the text should appear
Image Attribute
-
Ratio - Choose the image ratio that works best for your layout.
-
Adjust Ratio - Fine tune the ratio to fit your collection images.
-
Radius (px) - Set how rounded the image corners should be.
-
Image Scale - Decide if the image should fit within the frame or fill the entire area.
Layout Padding and Position
-
Padding - Control the spacing inside the layout to maintain a clean structure.
-
Vertical Position - Adjust how high or low the content appears within the block.
Background and Spacing
-
Color - Choose a background color for the grid section.
-
Radius - Adjust how rounded the section corners appear.
-
Padding - Set inner spacing within the grid block.
-
Margin - Control the outer spacing around the entire section.
Border
-
Color - Pick a border color that matches your design.
-
Width - Adjust the thickness of the border.
-
Sides - Choose which sides of the section should have a border.
When you switch to the content tab, you can choose which collections you want to showcase. You can also add or remove collections as needed.
You can customize each collection by:
-
Choosing any image you want to upload in the given format for the collection display.
-
Select the target page in which you want to redirect
-
Select the collections which you want to show here
-
Adding an overlay to improve contrast and make the text easier to read.
Collection Title
-
Text - Enter the title you want shown for that collection.
-
Font - Select the font style that matches your brand.
-
Size/Weight - Control how large the title appears and how bold or light it should be.
-
Line Height - Adjust the spacing between lines if your title has more than one line.
-
Letter Spacing - Increase or reduce the space between individual characters.
-
Text Color - Pick a color that stands out on your image or overlay.
-
Alignment - Choose the position of the title within the collection block.
-
Capitalization - Set whether your text appears in uppercase, lowercase, or a natural sentence case.
Benefits:
-
Improves product discovery
-
Helps users find what they want faster leading to lower bounce rate
-
Organizes store visually thus giving a better browsing experience
Related Articles
