# Badges

Manages product badge appearance and behavior across collections and product grids. Use it to highlight special product states like **Sale**, **Sold out**, **New**, **Custom tags**, or **Pre-Order**.

<figure><img src="/files/7M8T6FSijkC1Fbm8awWw" alt="badges settings showcase in theme settings"><figcaption></figcaption></figure>

**Badge text size**:  Automatically scales based on your theme’s base typography size: `Extra small`, `Small`, `Medium`, `Large`, or `Extra large`.

**Alignment**: Controls where badges appear on product cards: `Top left`, `Top center`, `Top right`, `Bottom left`, `Bottom`.

> Tip: Avoid bottom alignment when Quick Add is enabled to prevent overlap.

**Sale badge -** Highlight discounted products and display savings visually.

* **Show sale badge**: Toggles the sale badge visibility.&#x20;
* **Show saving**s: Displays discount value.
* **Saving type**: `Percentage` or `Money`
* **Background / Text colors:** Customize sale badge colors to fit your theme.

**Custom badge -** Add unique product tags to showcase special messages like 'Pre-order' or  'Best Seller'. To activate, add the tag **`_badge_with_custom_text`** to a product.

* **Show custom badge**: Enables custom tag badges.
* **Background / Text colors**: Define badge colors for visual distinction.

**Sold out badge -** Automatically marks unavailable products.

* **Show sold out badge**: Displays when a product is out of stock.&#x20;
* **Background / Text colors**: Customize the appearance to match your theme.

**New badge** - Highlight recently added products automatically.

* **Show automatic new badge**: Enables auto 'New' label.
* **Background / Text colors**: Set custom badge colors.
* **Date limit**: Determines how many days after creation a product shows as new.&#x20;

**Preorder** - Used for products available for early purchase.\
To enable, add the tag **`_preorder`** to the product.

* **Show pre-order badg**e: Displays pre-order label.
* **Background / Text colors**: Set theme-appropriate colors.


---

# Agent Instructions: 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:

```
GET https://broadcast.presidiocreative.com/theme-settings/theme-settings/badges.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
