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

# Product cards

**Product Cards** allow you to customize the style of product cards in the theme.

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme Settings ->** **Product Cards.**

<table><thead><tr><th width="256">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout style</td><td><p>Select the style of the card layout:</p><ul><li> <strong>Default</strong></li><li><strong>Advanced default</strong></li><li><strong>Standard</strong></li><li><strong>Standard (Plus)</strong></li><li><strong>Standard (Card)</strong></li><li><strong>Card</strong></li><li><strong>Advanced card</strong></li></ul></td></tr><tr><td>Input option name to show swatch style</td><td>Fill in the field with the same name of product option to show product swatch.</td></tr><tr><td>Image ratio</td><td><p>Select image ratio from the dropdown menu:</p><ul><li><strong>Adapt to image</strong>.</li><li><strong>Portrait</strong>.</li><li><strong>Square</strong>.</li></ul></td></tr><tr><td>Image height (%)</td><td>Fill in the desired ratio of the width and height of the product card media in <strong>%</strong></td></tr><tr><td>Image fit</td><td><p>Select the product card image crop type:</p><ul><li><strong>Full Width Or Height (No Crop):</strong> The image will scale to cover up the full area of set product card image with retained ratio</li><li><strong>Full Width Or Height (With Crop):</strong> The image will scale to scale up until the width or height reached the width or height of the set product card image with retained ratio</li></ul></td></tr><tr><td>Use custom color</td><td>Select this checkbox to use custom color for card</td></tr><tr><td>Background for information</td><td>Set the background color for card</td></tr></tbody></table>

#### **Quick add button**

<table><thead><tr><th width="254">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text size</td><td><p>The size of the text:</p><ul><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr><tr><td>Choose style button</td><td><p>Select the style of the button:</p><ul><li><strong>Default</strong></li><li><strong>Transparent</strong></li></ul></td></tr><tr><td>Text transform</td><td><p>Select the font style transform of the text:</p><ul><li><strong>Normal</strong></li><li><strong>Lowercase</strong></li><li><strong>Capitalize</strong></li><li><strong>Uppercase</strong></li></ul></td></tr></tbody></table>

#### **Desktop layout**

<table><thead><tr><th width="248">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show second image on hover</td><td>When the customer hovers their cursor over the product image, displays the second product image if the product has one.</td></tr><tr><td>Show vendor</td><td>Displays the vendors of the products.</td></tr><tr><td>Show product rating</td><td>Displays the average product rating in stars with the number of reviews in parenthesis</td></tr><tr><td>Enable quick add button</td><td>When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.</td></tr><tr><td>Show color swatch</td><td>Select this checkbox to show/hide color swatch on cart item.</td></tr><tr><td>Show wishlist</td><td>Select this checkbox to show/hide wishlist on cart item.</td></tr></tbody></table>

#### **Mobile layout**

<table><thead><tr><th width="248">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show vendor</td><td>Displays the vendors of the products.</td></tr><tr><td>Show product rating</td><td>Displays the average product rating in stars with the number of reviews in parenthesis</td></tr><tr><td>Enable quick add button</td><td>When the customer hovers their cursor over the product image, displays a quick add to cart button. If product has variants, the button links to the product detail page.</td></tr><tr><td>Show color swatch</td><td>Select this checkbox to show/hide color swatch on cart item.</td></tr><tr><td>Show wishlist</td><td>Select this checkbox to show/hide wishlist on cart item.</td></tr></tbody></table>

#### **Product discounts**

<table><thead><tr><th width="246">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable marquee product discounts</td><td>Enable/disable checkbox</td></tr><tr><td>Text (Color)</td><td>Set the color for the text</td></tr><tr><td>Background</td><td>Set the background color for this block</td></tr><tr><td>Text size</td><td><p>The size of the text:</p><ul><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr></tbody></table>