Product card

#1. Layout and image

#Card style

There are 3 styles to select from:

Style 1Style 2Style 3

#Content alignment

The product card's content can be set as center-aligned, left-aligned, or right-aligned and show border.

#Image

Set the suitable Aspect ratio for your image card. There are 4 options:

• Adapt to image
• 1:1 (square image)
• 3:4
• 4:3
• 16:9

Enable if you want Show video as featured image and Show second image on hover

#2. Variant options

Enable or disable showing variants in product items and how they display on the front store.

#3. Content and Badges

Control what to show on the product card.

#Content

• Add to cart button: let customers add items to the cart without leaving the current page.
• Quickview button: let customers preview product basic information without going to the product page.

• Wishlist button: let customers add their favorite products to the list.
• Compare button: let customers add products to the comparison page to check the differences and similarities among stores' products.

• Countdown: display time when there is an event for the product to release/discount.
• Actions when clicking the Select options button: It either pops up the Select options dialogue or goes directly to the product page.

#Badges

• Sale badge: hide or show the sale badge in % discount or text.

Sale badge as TextSale badge as %

• Sold-out badge: display badge to let customers know which products are out of stock.

The sale badge and sold-out badge labels can be edited in Actions > Edit default theme content.

• Reviews badge: display ratings from the customers (A review application is required).
• Custom badges: display/hide other badges rather than sale and sold-out badges. To display custom badges, you need to add tags to your products, see Product tags.

#Product titles

• Show vendor: display vendor/brand names under the product title.
• Capitalize product name.
• Product title line limit: control the maximum line of the product titles as No limit/1 lines/2 lines/3 lines.

#Product prices

Show lowest prices: display the lowest prices of each product as 'From ...'