> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/theme-settings/product-cards.md).

# 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="/files/Kxz8P9t8Uz6Arsi0zJkS" 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>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>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>Show secondary image</strong></td><td>Display the second product image when hovering over the product image</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>