Collection Products
Updated 1 month agoCollection products showcase products from a selected collection in a grid or slider format. You can use it to highlight featured, trending, or category-specific products.
Content Settings
-
Select Collection - Choose which collection you want to display in this section.
-
Number of Items - Set how many products should appear from the selected collection.
-
Layout - Choose how the products are shown. You can display them in a slider or a grid.
Header
-
Text - Add the header title for the product section.
-
Font - Choose the font style that matches your design.
-
Size/Weight - Control how large the title appears and how bold it looks.
-
Line Height - Adjust the spacing between lines in the title.
-
Letter Spacing - Set the space between each character.
-
Text Color - Choose the title color.
-
Capitalization - Choose uppercase, lowercase, or sentence case.
Button - You can enable or disable the button using the eye icon.
-
Text - Enter the label you want on the button.
-
Font - Choose the font style for the button text.
-
Size/Weight - Adjust the size and boldness of the text.
-
Line Height - Control the spacing between lines if needed.
-
Letter Spacing - Adjust the spacing between characters.
-
Text Color - Choose the color of the button text.
-
Decoration - Choose whether you want the text to be bold, italicized, underlined, or or have a line
-
Capitalization - Choose how the text appears.
Border - Adjust the border color and width.
Icon - Choose or upload an icon for the button and set its color.
Advanced Settings
-
Background Color - Set a background color for the button area.
-
Radius - Adjust how rounded the corners should be.
-
Padding - Control the inner spacing of the section.
Product Card Settings
Image Attributes
-
Ratio - Choose the image ratio for product images.
-
Adjust Ratio - Fine tune the ratio based on your layout.
-
Radius - Set the roundness of image corners.
-
Image Scale - Choose whether the image should fill the space or fit within it.
Border
Set the border color and width for each product card.
Title
-
Font - Choose the font style for the product title.
-
Size/Weight - Adjust size and boldness.
-
Line Height - Control vertical spacing between lines.
-
Letter Spacing - Manage character spacing.
-
Text Color - Choose the title color.
-
Alignment - Set the title position.
-
Capitalization - Choose the text style.
Vendor
Customize the vendor text similar to the title settings.
-
Font - Choose the vendor text font.
-
Size/Weight - Control size and thickness.
-
Line Height - Adjust spacing.
-
Letter Spacing - Control spacing between letters.
-
Text Color - Set the vendor text color.
-
Alignment - Choose a position.
-
Capitalization - Select the preferred style.
Price
-
Font - Choose the price font.
-
Size/Weight - Adjust size and weight.
-
Line Height - Modify spacing.
-
Letter Spacing - Adjust character spacing.
-
Text Color - Pick the price color.
-
Alignment - Choose a position.
-
Capitalization - Choose style for how the numbers and symbols appear.
Compare Price
-
Font - Choose font style.
-
Size/Weight - Adjust weight and size.
-
Line Height - Control spacing.
-
Letter Spacing - Adjust character spacing.
-
Text Color - Choose color for compare price.
-
Capitalization - Set how the text appears.
Action Button
Enable or disable the action button using the eye icon.
Card Background
-
Radius - Adjust the corner roundness for product cards.
-
Padding - Control the spacing inside the card.
Card Border
-
Color - Choose the card border color.
-
Width - Set how thick or thin the border appears.
Background and Spacing
-
Color - Choose a background color for the entire section.
-
Radius - Adjust corner rounding.
-
Padding - Set inner spacing.
-
Margin - Control the spacing around the outside of the section.
Border
-
Color - Pick the border color.
-
Width - Adjust thickness.
-
Sides - Choose which sides of the section will have a border.
Benefits:
-
Promotes high-performing or strategic products
-
Increases average order value by showcasing more items
-
Keeps users engaged thus more time spent in app
Related Articles
