> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/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/unicorn-shopify-theme/theme-settings/badges.md).

# Badges

Use various badges built into the theme to highlight specific product features.

**Discount**\
Change the background color of the "Sale" badge and "[<mark style="color:blue;">Countdown timer</mark>](/unicorn-shopify-theme/theme-settings/countdown-timer.md)" using the color picker.\ <mark style="color:orange;">**Note!**</mark> By combining the discount badge with the countdown and specifying the color in the "Countdown timer" global section, the countdown settings take priority, and the color applied in the current section won't appear for the badge.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fix8YNmu4RWMcg7z2HIru%2Fbadges_discount%20color.png?alt=media&amp;token=9734ae5f-f957-40b2-9bf2-2cd19d92da98" alt=""><figcaption></figcaption></figure>

**Show Pre-order**\
Activates the "Pre-order" badge for product cards and on product pages. Additionally, this option requires activating the "Pre-order" functionality in *Theme settings ->* [*<mark style="color:blue;">Products</mark>*](/unicorn-shopify-theme/theme-settings/products.md). Read the details regarding the badge configurations [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/theme-settings/products.md#required-admin-settings).&#x20;

***

### Product cards

{% hint style="info" %}
Set up settings per individual products in *Shopify admin -> Products* to make various badges appear throughout your store.
{% endhint %}

**Show discount badge**\
Enable the option to show the "Sale" badge on product cards.
\
The badge appears for products/product variants with a comparison price set in your admin.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fauf6HpqVysjsBuoRDbJH%2Fadmin_sale%20price.png?alt=media&amp;token=2409143c-f145-45d7-be09-d6155194d186" alt="" width="437"><figcaption></figcaption></figure>

**Show sold-out badge**\
Activate the option to display the "Sold out" badge on product cards.\
The badge is displayed for products with 0 quantity and inventory tracking enabled in your admin.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FmTcrexH2aUmcVstLuPqX%2Fadmin_inventory.png?alt=media&amp;token=418271fe-070d-40ca-af79-c4fc2b134d2d" alt="" width="442"><figcaption></figcaption></figure>

***

### Custom badges on product cards

**Position**\
Change the badge placement on product cards to "Top right", "Bottom right", or "Bottom left". These settings work on all screen sizes, so ensure they work as expected with your theme configurations.

**Width**\
Resize badges from 30 to 150 pixels using the scale.
\
This option only works on large screens.

***

### Custom badges on product pages

**Position**\
Control the placement of badges over the main image in the product gallery. Choose from the following options: “Top left,” “Top right,” “Bottom right,” or “Bottom left”.
\
Since this setting applies across all screen sizes, preview it on various devices to ensure badges display as expected.

**Width**\
The option sets the badge size on product pages. Use the scale to fix the size from 30 to 200 pixels. The parameters are applied to the desktop.

***

### Custom badges

{% hint style="success" %}
The examples of custom badges on the Collection and Product pages can be viewed in the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-valuable.mpthemes.net/collections/all?page=2).
{% endhint %}

Use settings in the current section to configure custom badges on product cards and product pages for a specific product. Custom images can be configured in the theme using Metafileds. Check out the following [<mark style="color:blue;">documentation</mark>](/unicorn-shopify-theme/faq/how-to-customize-metafields.md#custom-badges) to learn how to create custom badges in the admin using Metafields.\
You can either manage the theme badges or upload your images to the Theme Editor.

The Unicorn provides eight built-in theme badges.\
Here is an example of the Theme badges:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FtZb4gVvQcaqTh71uV6mR%2Fimage.png?alt=media&amp;token=eaad3700-954f-4089-a3c5-d48f6fe0250a" alt="" width="518"><figcaption></figcaption></figure>

**First - Fourth**\
To display badges from images, press the **"Select"** button in the picker and specify one from the Store library or upload it from your device.\
Each image corresponds to the Metafield built in your admin.\
Example: First badge = custom\_badge\_1, Second badge = custom\_badge\_2, and so on.