Popular Products

Updated 21 days ago

The Popular Products section helps you showcase your best-performing or most trending items in one place. It’s ideal for highlighting products that are already getting attention, making it easier for users to discover what others are buying.

Content Settings

This controls how products are displayed in the section.

  • Number of Items – Decide how many products you want to show

  • Layout – Choose how the products are arranged (grid or slider)

Title

Use the eye icon to enable or disable the section title.

This helps users understand what the section represents.

Customization Options:

  • Text – Add a title like “Popular Products” or “Trending Now”

  • 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 readable color

  • Capitalization – Set how the text appears

Product Card Settings

This section controls how each product appears.

Image Attributes

  • Ratio – Set the shape of the product image

  • Adjust Ratio – Fine tune the ratio

  • Radius – Adjust how rounded the image corners appear

  • Image Scale – Choose whether the image fills or fits the container

Image Border

  • Color – Choose border color

  • Width – Adjust thickness

 Title 

  • Font – Choose the font style

  • Size/Weight – Adjust size and boldness

  • Line Height – Control spacing

  • Letter Spacing – Adjust spacing between characters

  • Text Color – Choose a readable color

  • Alignment – Position the text

  • Capitalization – Set how the text appears

Vendor

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Price

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Compare Price

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Capitalization

Action Button

This controls how the main action button appears on each product card.

In text style you can customize:

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Default State

  • Text – Button label

  • Text Color

  • Background Color

  • Border Color

  • Left Icon / Right Icon – Choose or upload icons and set their color

Sold Out State

  • Text

  • Text Color

  • Background Color

  • Border Color

  • Left Icon / Right Icon – Customize icons and colors

Advanced Settings

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the button

  • Relation – Define spacing between text and icons

  • Border Width – Adjust thickness

Card Background

  • Radius – Adjust corner roundness

  • Padding – Control inner spacing 

Card Border

  • Color – Choose border color

  • Width – Adjust thickness

Background and Spacing

This controls the overall layout of the section.

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 

Benefits:

  • Leverages social proof to influence buying decisions

  • Increases conversion rates with proven products

  • Improves product discovery for first-time users

  • Helps drive faster purchase decisions

  • Keeps users engaged with relevant, high-interest products

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read