> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/badges.md).

# Badges

Badges are the small labels placed on product images to flag something worth noticing: a discount, a recent arrival, an item that is out of stock, or a message you write yourself. They do the work of merchandising inside a listing, because a customer scanning a collection page reads badges before they read titles. Vélare gives you four badge types and lets you set the text and background color of each, so you can make them stand out or keep them quiet.

### Where to find these settings <a href="#where-to-find-these-settings" id="where-to-find-these-settings"></a>

Go to **Online Store > Themes > Customize > Theme settings > Badges**.

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

The badge settings are grouped into the four types below.

## 1. Sale <a href="#sale" id="sale"></a>

Show or hide the "**Sale**" badge, and set its text color, background color and format.

<figure><img src="/files/6GwACOkAUh1DtNGz8fj2" alt=""><figcaption></figcaption></figure>

Vélare provides three different formats for displaying sale badges, allowing you to choose the style that best fits your store’s design.

{% tabs %}
{% tab title="Text" %}

<figure><img src="/files/NCPReJJb2UNljd2bPp8c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Percentage" %}

<figure><img src="/files/Kc6Zd0QEpKxf1j0SwHuT" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fixed amount" %}

<figure><img src="/files/lWBhLcvv0FtS29jqNdro" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## 2. New <a href="#new" id="new"></a>

Choose whether the “**New**” badge is displayed, and set its text color and background color to match your store’s design.

{% hint style="success" %}
The “**New**” badge is displayed automatically starting from the day a product is created. You can set how many days the badge will remain visible.
{% endhint %}

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

## 3. Sold out <a href="#sold-out" id="sold-out"></a>

Choose whether the “**Sold out**” badge is displayed, and set its text color and background color.

This badge is shown automatically without requiring any manual setup.

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

## 4. Custom badge <a href="#custom-badge" id="custom-badge"></a>

Show or hide the “**Custom**” badge, and set its text and background colors.

The Sale, New and Sold out badges appear automatically on any product that meets each condition, so they need no per-product setup. The Custom badge works differently: it shows only on products that have the custom-badge metafield filled in, which lets you decide exactly which products carry it and what it says. See [Custom product badge](/velare/buy-and-install/create-required-metafields/metafields/custom-product-badge.md) for how to set up that metafield.

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

### What customers see <a href="#what-customers-see" id="what-customers-see"></a>

Badges sit on the product image, so customers meet them on collection pages, search results and anywhere else products are listed, not just on the product page. The **Sale** format changes the message itself: **Text** simply says the product is on sale, **Percentage** shows how big the discount is, and **Fixed amount** shows the money saved, which reads more strongly on higher priced products. **New** and **Sold out** appear on their own once the conditions are met, so they keep the listing honest without any daily maintenance. Colors decide how loud all of this is: high contrast badges pull the eye across the whole grid, while badges close to your background color stay informative without shouting.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Product cards](/velare/customize-your-pages/product-cards.md): the card these badges are placed on, and the other information shown there
* [Colors](/velare/set-up-your-store/colors.md): store wide color schemes, set separately from badge colors
* [Color swatches](/velare/customize-your-pages/color-swatches.md): variant swatches displayed alongside badges on a card
* [Vélare Intro](/velare/readme.md): overview of the theme and where to start


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/badges.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.