> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/shared-blocks/product-card.md).

# Product card

**Use default settings**

* **Enabled** - Use the global product card styles set in *Theme settings ->* [*<mark style="color:$primary;">Product card</mark>*](/triumph/theme-settings/theme-settings.md#product-card).
* **Disabled** - Customize the styles for this section only.

### Colors

**Text**\
Controls the color of product titles, vendor, product variant titles, and the background of the selected variant, which is displayed as pills.

**Accent**\
Sets the highlight color of the product price or sale price.

**Line**\
Changes the border color of selected product variants displayed as pills.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fjn7GjF0YrqHmCML53O6X%2Fproduct%20card_colors.png?alt=media&amp;token=70f6917d-8fcb-4d70-aa31-f050df02db8c" alt=""><figcaption></figcaption></figure>

### Inputs

**Background**\
Sets the background color of input elements (like quantity selectors).

**Text**\
Controls the text color inside input fields.

**Hover background**\
Changes the background color when hovering over inputs.

**Hover text**\
Changes the text color on hover.

**Hover border**\
Sets the border color when hovering over inputs.

**Checkbox**\
Background color of the unchecked checkbox.

**Checkbox checked**\
Background color of the checkbox when selected.

**Checkmark**\
Color of the checkmark inside the checkbox.

### Button 'Add to cart' colors / Button 'Quick view' colors

**Background**\
Sets the button background color.

**Background gradient**\
Applies a gradient background to the button.

**Border**\
Controls the button's border color.

**Text**\
Sets the button text color.

**Hover background**\
Changes the background color on hover.

**Hover background gradient**\
Applies a gradient background on hover.

**Hover border**\
Changes the border color on hover.

**Hover text**\
Changes the text color on hover.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fu1jw5IJDMI5Hp3XegOTz%2Fproduct%20card_add%20to%20cart%20colors.png?alt=media&amp;token=3d4801b2-cd2e-4cdc-91a8-2947be2207e1" alt=""><figcaption></figcaption></figure>

### Other

**Sale price**\
Sets the color of discounted prices.

**Disabled variant pills background**\
Controls the background color of unavailable product options.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FGTgOJCWhXnBSfaMIVYiM%2Fproduct%20card_other%20colors.png?alt=media&amp;token=dc770db7-4f13-45eb-9e68-a87cf10d029b" alt=""><figcaption></figcaption></figure>

### Hover card colors

**Change colors on hover**\
Turn this on to apply a different color scheme when hovering over the product card.

### Highlighted products

**Border color 1**\
Primary border color used to highlight featured products.

**Border color 2**\
Secondary border color for additional emphasis.

**Badge background**\
Background color of labels (such as 'Sale' or 'New').

**Badge text**\
Text color inside the badges.