# Card components

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

Use this setting to customize the "**Card components**".

* Product cards

<table><thead><tr><th width="218">Block</th><th>Description</th></tr></thead><tbody><tr><td>Text alignment</td><td><p>Choose how the text content (title, price) aligns within the product card:</p><ul><li>Left</li></ul><ul><li>Center</li><li>Right</li></ul></td></tr><tr><td>List product background</td><td><p>Choose how the List product background show within the product card:</p><ul><li>Glass effect</li></ul><ul><li>Color scheme</li></ul></td></tr><tr><td>List product image height</td><td><p>Customization of the "List product image height" is as follows:</p><ul><li>Adapt</li></ul><ul><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Image ratio</td><td><p>Set how the product image is displayed in product card:</p><ul><li>Adapt to image</li><li>Portrait</li></ul><ul><li>Square</li></ul></td></tr><tr><td>Show second image on hover</td><td>Toggle to show the second product image when the user hovers over the product card.</td></tr><tr><td>Show quantity</td><td>Toggle to show quantity button in product card.</td></tr><tr><td>Show product type</td><td>Enable this to show product type in product card.</td></tr><tr><td>Show vendor</td><td>Toggle to show the product vendor (brand name) below the product title.</td></tr><tr><td>Show product rating</td><td>Toggle to display product ratings (requires a product rating app).</td></tr><tr><td>Show card border</td><td>Toggle to show or hide a border around product cards. </td></tr><tr><td>Action buttons position</td><td><p>Choose where the “Action” buttons appears:</p><ul><li>Over the image</li></ul><ul><li>Bottom</li></ul></td></tr><tr><td>Enable quick view button</td><td>Toggle to enable a quick view button for products (desktop only).</td></tr><tr><td>Enable quick view button</td><td>Toggle to show or hide the “Quick view” button on product card.</td></tr><tr><td>Quick view button style</td><td><p>Choose the style of the quick view button:</p><ul><li>Outline</li></ul><ul><li>Solid</li></ul></td></tr><tr><td>Card color scheme</td><td><p>You can change the background and foreground color of a product card using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li><li>Scheme 7</li></ul></td></tr><tr><td>Add to cart button</td><td><p><strong>Quick add</strong> </p><p>Customization of the "add to card button" is as follows:</p><ul><li>None</li><li>Standard</li><li>Bulk</li></ul><p>Bulk is optimized for items purchased in higher quantities. Applicable when "Variants" is disabled.</p><p></p><p><strong>Add to cart button style</strong></p><p>Choose the style of the “Add to cart” button:</p><ul><li>Outline</li></ul><ul><li>Solid</li></ul></td></tr><tr><td>Swatches</td><td><p><strong>Show color swatch</strong><br>Toggle to display color swatches when variants are disabled and quick add is set to "Standard". </p><p></p><p><strong>Color swatch type</strong> </p><p>Choose how the variant options are displayed:</p><ul><li>Swatch</li></ul><ul><li>Variant image</li></ul><p>Variant image mode requires that all variants have an associated image. </p><p></p><p><strong>Swatch style</strong> </p><p>Customization of the "Swatch style" is as follows:</p><ul><li>Rounded</li><li>Oval</li></ul></td></tr><tr><td>Variants</td><td><p><strong>Show variants</strong><br>Toggle to display product variant selectors (like size or color options).<br><br><strong>Show variants label</strong><br>Toggle to show or hide the label for variants (like “Size” or “Color”).<br><br><strong>Type</strong><br>Choose how the variant options are displayed:</p><ul><li>Dropdown</li></ul><ul><li>Pills</li></ul><p><br><strong>Enable color swatch</strong><br>Toggle to enable color swatches for variants (requires “Pills” type to be selected).</p></td></tr><tr><td>Featured product</td><td><p><strong>Color swatch type</strong> </p><p>Choose how the variant options are displayed:</p><ul><li>Swatch</li></ul><ul><li>Variant image</li></ul><p>Variant image mode requires that all variants have an associated image. </p></td></tr><tr><td>Discount Badge</td><td><p><strong>Enable stylish badge</strong> </p><p>Turn this on to apply a more designed or decorative look to discount badges. </p><p></p><p><strong>Show discount as</strong> </p><p>Choose how the discount badge appears: </p><ul><li>Sale</li></ul><ul><li>Save amount</li><li>Save percentage</li><li>None </li></ul><p></p><p><strong>Background color</strong> </p><p>Use this to sets the discount badge’s background. </p><p></p><p><strong>Foreground color</strong> </p><p>Use this to sets the text color on the discount badge. </p></td></tr><tr><td>Soldout badge</td><td><p><strong>Background color</strong> </p><p>Use this to sets the soldout badge’s background. </p><p></p><p><strong>Foreground color</strong> </p><p>Use this to sets the text color on the soldout badge. </p></td></tr><tr><td>Custom badge</td><td><p><strong>Background color</strong> </p><p>Use this to set a background color of custom badge. </p><p></p><p><strong>Foreground color</strong> </p><p>Use this to set a foreground color of custom badge.</p></td></tr></tbody></table>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FxcSaMJOXWfF2o61hweDB%2Fproduct-card-setting.png?alt=media&#x26;token=acaa595d-41d5-42d7-9dcc-df42c9a50e5e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FkHOaus4mLQtFMdbmfk5l%2Fproduct-card-setting2.png?alt=media&#x26;token=5eb8c532-f326-46df-b658-074eaf0097ff" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FWQvgOpvm5czR2FdQVRto%2Fproduct-card-setting3.png?alt=media&#x26;token=6f4f8461-f3c8-421a-81ae-f0d12959df04" alt=""><figcaption></figcaption></figure>

* Collection cards

<table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Enable product counter</td><td>Toggle this on to show the total number of products available in each collection.</td></tr><tr><td>Style</td><td><p>Customization of the "Collection card style" is as follows:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of the "Text alignment" in collection card is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Image height</td><td><p>Customization of the "Collection card image height" is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul></td></tr></tbody></table>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FTBdJ4en39wEH8MYDU55e%2Fcollection-card-setting.png?alt=media&#x26;token=05c84d05-8573-4935-970a-e5555a6360d5" alt=""><figcaption></figcaption></figure>

* Blog cards&#x20;

  <table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Style</td><td><p>Customization of the "Blog card style" is as follows:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of the "Text alignment" in blog card is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Header blog style</td><td><p>Customization of the "Header blog style" is as follows:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Color scheme</td><td><p>You can change the background and foreground color of a blog card using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li><li>Scheme 7</li></ul></td></tr></tbody></table>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FLX48SAgwKz50EWV6B7Xy%2Fblog-card-setting.png?alt=media&#x26;token=e9e1d721-1804-4464-b54e-4a8e4a3c1dfd" alt=""><figcaption></figcaption></figure>
