Product cards
In e-commerce, a Product card typically refers to a visual element displaying essential information about a product, including an image, title, price, and a brief description.
.png)
| Setting | Description |
|---|---|
| Alignment | Choose to align text and content to the left or center of the product card. |
| Enable quick view | When enabled, customers can quickly preview product details in a popup without leaving the current page. |
| Enable color swatches | Display product variant options in product card. |
| Enable quick add | Allow customers to preview product details in a popup without leaving the current page. |
| Maximum swatches to show | Limit how many color swatches are shown per product. |
| Tags | Display product tags (e.g., "Hydrates", "Brighten") on product cards in:
|
| Vendor | Display vendor on the product cards in:
|
| Show rate | Display the product's rating |
| Show secondary image | Display the second product image when hovering over the product image |
| Image ratio | Determines the aspect ratio of the product card images.
|
| Hover effect | Choose an effect (e.g., Zoom) that applies when users hover over interactive cards such as products, banners, collections, or blog previews. |
| Play video on hover | When hovering on a video, the video will play. |
| Show quick add button on mobile | Display an "Add to Cart" button directly on product cards for faster shopping on mobile. |
No comments yet