# 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.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FGt12IUxAUO95VBvWwQ68%2Fimage.png?alt=media&#x26;token=f4d1dc2a-21de-442c-9411-d7ded47def78" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Choose to align text and content to the left or center of the product card.</td></tr><tr><td><strong>Enable quick view</strong></td><td>When enabled, customers can quickly preview product details in a popup without leaving the current page.</td></tr><tr><td><strong>Enable color swatches</strong></td><td>Display product variant options in product card.</td></tr><tr><td><strong>Enable quick add</strong></td><td>Allow customers to preview product details in a popup without leaving the current page.</td></tr><tr><td><strong>Maximum swatches to show</strong></td><td>Limit how many color swatches are shown per product.</td></tr><tr><td><strong>Tags</strong></td><td><p>Display product tags (e.g., “Hydrates”, “Brighten”) on product cards in:</p><ul><li><strong>All screens</strong></li><li><strong>Desktop only</strong></li><li><strong>Hidden</strong></li></ul></td></tr><tr><td><strong>Vendor</strong></td><td><p>Display vendor on the product cards in:</p><ul><li><strong>All screens</strong></li><li><strong>Desktop only</strong></li><li><strong>Hidden</strong></li></ul></td></tr><tr><td><strong>Show rate</strong></td><td>Display the product's rating</td></tr><tr><td><strong>Show secondary image</strong> </td><td>Display the second product image when hovering over the product image</td></tr><tr><td><strong>Image ratio</strong></td><td><p>Determines the aspect ratio of the product card images.</p><ul><li><strong>Adapt to image ( Default )</strong></li><li><strong>Square ( 1:1 )</strong></li><li><strong>Portrait ( 3:4 )</strong></li><li><strong>Landscape ( 4:3 )</strong></li></ul></td></tr><tr><td><strong>Hover effect</strong></td><td>Choose an effect (e.g., Zoom) that applies when users hover over interactive cards such as products, banners, collections, or blog previews.</td></tr><tr><td><strong>Play video on hover</strong></td><td>When hovering on a video, the video will play.</td></tr><tr><td><strong>Show quick add button on mobile</strong></td><td>Display an <strong>"Add to Cart"</strong> button directly on product cards for faster shopping on mobile.</td></tr></tbody></table>