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

# Product cards

The **Product Cards** settings allow you to customize how products are displayed in grid-based layouts such as collection pages, search results, and featured product sections. These options include badge customization, vendor visibility, and discount display.

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

#### Enable Product Badges

**Field type:** Checkbox\
**Description:**\
Turns on the display of all product badges (including custom badges and the sale badge). If disabled, **no badges will be shown** on product cards, even if configured.

***

#### [Custom Badges](/elemento-docs/product-tags.md)

Create your own [product badges](/elemento-docs/product-tags.md) with custom text and colors. These can be used to indicate product tags like “New”, “Limited”, or any custom label.

**Field type:** Multi-line text input\
**Format:**

```
[Tag Text]::[Background HEX Color]::[Text HEX Color]
```

**Example:**

```
New::#000000::#ffffff  
Limited::#ffffff::#000000
```

* Each badge must be placed on a new line.
* All colors must be valid **HEX color codes** (e.g., `#ff0000`).
* These badges will only appear if the corresponding product has a matching **tag** in Shopify.

***

#### Show Vendor

**Field type:** Checkbox\
**Description:**\
Displays the product's **vendor name** (as set in the product details) beneath the product title.

***

#### Show the Sale Badge

**Field type:** Checkbox\
**Description:**\
Displays a **sale badge with the discount percentage** when a product has a "Compare at price" set.

**Example:**\
If the product price is `$80` and the compare-at price is `$100`, the badge will display **"20% OFF"**.