Oval Collections Grid
Updated 21 days agoThe Oval Collections Grid lets you showcase collections in a visually distinct layout using rounded or oval-shaped images. This style adds a softer, more modern look to your app while still keeping navigation simple and intuitive.
Under the “Settings” tab,
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:
-
Padding – Adjust spacing around the title area
-
Relation – Define how the text and icon are arranged
Card Settings
This section controls how each collection card appears.
Layout Settings
-
Columns – Choose how many items appear in a row
-
Gap – Adjust spacing between each item
Image Attributes
-
Ratio – Set the shape of the image
-
Adjust Ratio – Fine tune the ratio for the oval layout
-
Image Scale – Choose whether the image fills or fits the container
Image Border
-
Color – Choose border color
-
Width – Adjust thickness
Card Padding
-
Color – Set the background color behind the card
-
Radius – Adjust corner roundness
-
Padding – Control spacing inside the card
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,
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 visually unique shopping experience, helping your brand stand out
-
Adds a modern, premium feel to your app design
-
Makes browsing feel more engaging and less “catalog-like”
-
Helps build stronger brand identity through design consistency
-
Encourages users to explore more because the layout feels less rigid and more inviting
Related Articles
