> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-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/ella-7-documentation/theme-settings/global-features/badges.md).
# Badges
You can customize how **badges** are displayed on the **product card** and **product page** using the options below.
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 ->** **Badges.**
## Badges Settings
### Configuration
| Label | Type | Description | Visibility |
| ---------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| Position | `select` | Choose where the badge should appear on the product image (e.g., **Top left**, **Top right**). | Always visible |
| Top | `range` | Adjust the distance from the top edge of the product image. | Visible when "Position" is set to "Top left" or "Top right" |
| Bottom | `range` | Adjust the distance from the bottom edge of the product image. | Visible when "Position" is set to "Bottom left" or "Bottom right" |
| Left | `range` | Adjust the distance from the left edge of the product image. | Visible when "Position" is set to "Top left" or "Bottom left" |
| Right | `range` | Adjust the distance from the right edge of the product image. | Visible when "Position" is set to "Top right" or "Bottom right" |
| Corner radius | `range` | Adjust how rounded the badge corners should be. | Always visible |
| Case | `select` | Set the text formatting for the badge (e.g., **Uppercase**, **Capitalize**). | Always visible |
| Show new badge | `checkbox` | Enable to display a custom "New" badge on products. | Always visible |
| New badge display mode | `select` | Choose **Dynamic** to show the badge automatically for new products, or **Manual** to control it via tags. | Visible when "Show new badge" is enabled |
| New badge calculation period | `range` | Set the number of days a product is considered "New" after its creation date. | Visible when "Show new badge" is enabled and "Display mode" is set to "Dynamic" |
| Show sold out badge | `checkbox` | Enable to display a "Sold out" badge when inventory is zero. | Always visible |
| Show sale badge | `checkbox` | Enable to display a "Sale" badge on products with a compare-at price. | Always visible |
| Show custom badge | `checkbox` | Enable to display custom badges defined in product tags. | Always visible |
### Padding
| Label | Type | Description | Visibility |
| -------------- | ------- | ---------------------------------------------------------------- | -------------- |
| Padding left | `range` | Adjust the internal spacing on the left side of the badge text. | Always visible |
| Padding right | `range` | Adjust the internal spacing on the right side of the badge text. | Always visible |
| Padding top | `range` | Adjust the internal spacing at the top of the badge text. | Always visible |
| Padding bottom | `range` | Adjust the internal spacing at the bottom of the badge text. | Always visible |
#### Badge Display Logic
* **Sold Out**: Displayed when the product is out of stock.
* **Sale**: Displayed when the product has a sale price.
* **New**: Displayed based on newly added products within a specified time range or by using a product tag.
* **Custom**: The content of this badge is pulled from a metafield with the key **`custom_badge`**.\
If a custom badge has not been set up yet, please refer to the instructions below.
***
#### Custom Badge Setup
1. Create a **Product Metafield** with the key **`custom_badge`**.\
2. Go to the product and enter the content for the **Custom Badge** metafield created in the previous step.\
---
# 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://halosoft.gitbook.io/ella-7-documentation/theme-settings/global-features/badges.md?ask=&goal=
```
`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.