> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/agile-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/agile-theme/theme-setting/product.md).

# Product

<figure><img src="/files/5SJMXHWFBFWv53anDXxf" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="150">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable quick shop</strong></td><td>To allow customers to preview detailed product information without visiting the product page</td></tr><tr><td><strong>Show secondary image when hover</strong></td><td>Display the second product image when hovering over the product image</td></tr><tr><td><strong>Show color swatches in card product</strong></td><td>Display color swatches on the product card</td></tr><tr><td><strong>Show vendor</strong></td><td>Display vendor on the product card</td></tr><tr><td><strong>Show rate</strong></td><td>Display the product's rating</td></tr><tr><td><strong>Show badges</strong></td><td>Display product badges such as discounts, out of stock, in stock, and more</td></tr><tr><td><strong>Product color</strong></td><td>Customize the color options for ratings.</td></tr><tr><td><strong>Product image ratio</strong></td><td><p></p><p>Determines the aspect ratio of the product card images.</p><ul><li>Adapt to image (Default)</li><li>Square ( 1:1)</li><li>Tall ( 3:4)</li></ul></td></tr><tr><td><strong>Product hover effect</strong></td><td><p></p><p>Select image hover effects for product cards.</p><ul><li>Zoom in</li><li>Fade in</li></ul></td></tr><tr><td><strong>Enable notify product re-stock</strong></td><td>Display the restock alert button</td></tr></tbody></table>