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

# 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="249.81817626953125">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><li>Center</li><li>Right</li></ul></td></tr><tr><td>List product background</td><td><p>Select the background style used for products displayed in list view.</p><ul><li>Glass effect</li><li>Color scheme</li></ul></td></tr><tr><td>List product image height</td><td><p>Control the image ratio used when products are displayed in list view.</p><ul><li>Adapt</li><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Image height</td><td><p>Choose how product images are displayed within product cards.</p><p>Available options may include:</p><ul><li>Adapt to Image</li><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Price color</td><td><p>Choose the color used for displaying product prices throughout product cards.</p><p>This setting helps highlight pricing information and can be used to match your store branding or promotional campaigns.</p></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>Display the available product quantity directly on the 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>Enable to remove columns gap</td><td><p>Enable this option to remove the spacing between product card columns.</p><p></p><p>This creates a tighter, edge-to-edge product grid layout.</p><p></p><p>When disabled, standard spacing is maintained between products. </p><p></p><p><em><strong>Note:</strong> This settings only visible when <strong>'Show card border'</strong> settings is <strong>'Enabled'.</strong></em></p></td></tr><tr><td>Title font type</td><td><p>Choose the font style used for product titles.</p><ul><li>Heading font</li><li>Body font</li></ul></td></tr><tr><td>Action buttons position</td><td><p>Choose where the “Action” buttons appears:</p><ul><li>Over the image</li><li>Bottom</li></ul></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><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><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>Enable to increase color swatch size on desktop</strong> </p><p>Enable this settings to increase color swatch size on desktop device.</p><p></p><p><strong>Color swatch type</strong> </p><p>Choose how the variant options are displayed:</p><ul><li>Swatch</li><li>Variant image</li></ul><p>Variant image mode requires that all variants have an associated image. </p><p></p><p><strong>Swatch Variant Options</strong> </p><p>Use this settings to add swatch variant option name, that use for show the swatch 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><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><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><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><tr><td>Recently Added Badge</td><td><p>The Recently Added Badge helps highlight newly added products in your store, making them easier for customers to discover.</p><p></p><p><strong>Show badge on recent product</strong> </p><p>Enable this option to automatically display a <strong>Recently Added</strong> badge on newly published products. </p><p></p><p>When disabled, recently added products will be displayed without the badge. </p><p></p><p><strong>Note:</strong> The badge is automatically applied based on the product's publish date according to the theme's predefined criteria.</p></td></tr></tbody></table>

<figure><img src="/files/jMR3KdnBelV6fD1RAIK8" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/D9DE969ccp5wk1FMbWhV" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/oHafTLRLBzegJizkVmOv" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/wQeRxtPrTfi8aYg2iA1H" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/YUKaTOqBNKGySGV1DuTl" 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>Title font type</td><td><p>Select the font style used for collection card titles.</p><p>Available options may include:</p><ul><li>Body Font</li><li>Heading Font</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><tr><td>Color scheme</td><td><p>You can change the background and foreground color of a collection 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><p><strong>Note</strong>: This color scheme applied on collection card only when '<strong>Collection card style</strong>' is selected to '<strong>Card</strong>'.</p></td></tr></tbody></table>

<figure><img src="/files/O0DywHWRJ0TAO9x3muNU" 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>Title font type</td><td><p>Select the font style used for blog post titles.</p><p>Available options may include:</p><ul><li>Body Font</li><li>Heading Font</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><p><strong>Note</strong>: This color scheme applied on blog card only when '<strong>Blog card style</strong>' is selected to '<strong>Card</strong>'.</p></td></tr></tbody></table>

<figure><img src="/files/XWLBKOA005dWeDHeVpbA" alt=""><figcaption></figcaption></figure>