# Cards

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

Use this setting to customize the "**Product cards**" Styles, Image Padding, Text alignment, Color scheme, Border, and Shadow.

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image ratio</td><td><p>Choose how the product image ratio is displayed: </p><p></p><ul><li>Adapt to image</li><li>Square</li><li>Portrait</li></ul></td></tr><tr><td>Add to cart button style on desktop</td><td><p></p><p>Choose the style of the “Add to cart” button on desktop:</p><p></p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Add to cart button width on desktop</td><td>Choose whether the “Add to cart” button width is default or full width on desktop.</td></tr><tr><td>Display buttons inline</td><td>Toggle to display buttons inline with other elements in the product card.</td></tr><tr><td>Show product type</td><td>Enable this checkbox to display the product’s "Product type."</td></tr><tr><td>Show second image on hover</td><td>Toggle to display the second product image when a user hovers over the product card.</td></tr><tr><td>Enable quick view button</td><td>Toggle to enable the quick view feature for products.</td></tr><tr><td>Quick view position on desktop</td><td><p>Choose the position of the quick view button on desktop: </p><p></p><ul><li>Top right</li><li>Bottom left</li><li>Bottom right</li><li>Bottom full width</li></ul></td></tr><tr><td>Quick view icon</td><td><p>Choose which icon to display for the quick view button:</p><p></p><ul><li>First icon</li><li>Second icon</li></ul></td></tr><tr><td>Show quick view on hover</td><td>Enable to display the quick view button only when the user hovers over the product card.</td></tr><tr><td>Show vendor</td><td>Toggle to show the product vendor (brand) in the product card.</td></tr><tr><td>Show product rating</td><td>Enable to display the product rating (requires a product rating app)</td></tr><tr><td>Move the price below variant</td><td>Enable to move the product price below the variant selector for a cleaner layout.</td></tr><tr><td>Show variants</td><td>Enable to display the product variants (e.g., sizes, colors) in the product card.</td></tr><tr><td>Disable sold out variant</td><td>Toggle to disable the sold-out variant from the product card, applicable when type is set to pills.</td></tr><tr><td>Variants Type</td><td><p>Choose variant style types in product card:</p><p></p><ul><li>Dropdown </li><li>Pills</li></ul></td></tr><tr><td>Show dropdown label</td><td>Toggle to display the dropdown label when the variant style is set to dropdown.</td></tr><tr><td>Enable color swatches</td><td>Toggle to enable color swatches in product card (requires type to be set to Pills)</td></tr><tr><td>Style</td><td><p>Choose the product card style:</p><p></p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Image padding</td><td>Set the image padding around product images in pixels.</td></tr><tr><td>Text alignment</td><td><p>Customization of "Text alignment" within the product card is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>Choose the color scheme for the product card..</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Border</td><td><p><strong>Thickness:</strong> Set the border thickness of the product card in pixels.</p><p><strong>Opacity:</strong> Adjust the opacity of the product card border.</p><p></p><p></p><p><strong>Corner radius:</strong> Set the corner radius of the product card border (in pixels), giving it rounded edges.</p></td></tr><tr><td>Shadow</td><td><p><strong>Opacity:</strong> Adjust the opacity of the product card shadow.</p><p></p><p><strong>Horizontal offset:</strong> Set the horizontal offset (in pixels) for the shadow of the product card, creating a shadow effect to the left or right.</p><p></p><p><strong>Vertical offset:</strong> Set the vertical offset (in pixels) for the shadow of the product card, creating a shadow effect above or below.</p><p></p><p><strong>Blur:</strong> Set the blur radius (in pixels) for the product card shadow, creating a soft, blurred shadow.</p></td></tr></tbody></table>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FgqycGdrSxL8dipUybuHF%2Fcards-settings.png?alt=media&#x26;token=b775ebac-74ce-41b5-9041-dce971471f75" alt=""><figcaption></figcaption></figure>
