Product cards
Product cards display key details for each item in your store, such as the product image, title, price, and product badges. They appear throughout your site in featured collections, collection templates, and search results. Customizing the layout and style of product cards helps you showcase your offerings in a way that fits your brand and improves the browsing experience.
Settings
| Setting | Description |
|---|---|
| Aspect ratio | Control the aspect ratio of product card images accross the theme. |
| Show secondary image on hover | Display the second image on hover letting users see more of your product at a glance. |
| Show quick buy | Display a quick buy icon that allows users to purchase products without visiting the product page. |
| Show vendor | Display the associated vendor within your product card details. |
Product rating
Product ratings display customer feedback as star icons on your product cards, giving shoppers a quick visual indicator of quality and satisfaction.
Products must have ratings for card ratings to be visible.
| Setting | Description |
|---|---|
| Show product rating | Enable showing the product ratings. |
| Star color | Control the color of the star shown for the product rating. |
| Custom star color | Use a custom star color outside of your theme colors. |
| Rating display | Choose to show the rating as star icons or a rating number with a single star icon. |
| Show total rating | Choose to show the total number of reviews the rating is based on. |
Badges
Badge settings apply accross all product card badges. The theme currently support 'Sale' and 'Sold out' badges.
| Setting | Description |
|---|---|
| Badge font | Choose between your theme’s body or heading font. |
Sale badge
The sale badge appears when a product is on sale.
| Setting | Description |
|---|---|
| Show sale bade | Enable showing the sale badge. |
| Sale badge position | Chose where the sale badge is located, within the product image or below in the product details. |
| Sale badge color | Control the color of the sale badge. |
| Custom sale badge | Use a custom sale badge background color outside of your theme colors. |
| Custom sale badge text | Use a custom sale badge text color to pair with your custom backgrond color. |
Sold out badge
The sold out badge appears when a product is unavailable.
| Setting | Description |
|---|---|
| Show sold out bade | Enable showing the sold out badge. |
| Sold out badge position | Chose where the sold out badge is located, within the product image or below in the product details. |