## Overview

Price Badges help highlight your product's **price, compare-at price, and promotional information** in a customized price block.

You can customize each element separately, choose which products display the Price Badge, and control its visibility across different pages and devices.

<https://youtu.be/lJeIDMtkyGI?si=7IVV_cBn7qUmQoeN>

This guide explains how to create and set up a Price Badge.

> ***Important:*** *When a Price Badge is displayed, it replaces your theme's existing price display. If you use an App Block to position the Price Badge, disable the existing price display to avoid duplicate prices.*

---

## How do I create a Price Badge?

### Step 1: Create a Price Badge

1. From the app sidebar, go to **Price Badges**.

2. Click **Create price badge** to start a new campaign.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZ1FGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bc46f2839a58bc398b5ed1fa46e08cbb30b40e62/image.png)

### Step 2: Customize the Price Badge

In the **Design** tab, you'll find three default elements:

* **Compare Price**

* **Price**

* **Badge**

You can click each element to customize it individually.

#### 1. Compare Price

Select **Compare Price** to customize how the original price appears.

You can adjust settings such as:

* Background

* Bold, italic, underline, and strikethrough

* Text color

* Font family

* Font size

* Desktop and Mobile visibility

* Placement

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZ1VGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e742b4fbd5a6cfcc1810cc053217c19acacde84c/image.png)

> ***Tip:*** *Use strikethrough on the Compare Price to make the difference between the original and current price easier to recognize.*

#### 2. Price

Select **Price** to customize the product's current price.

You can adjust its text style, color, font, size, device visibility, placement, and other available settings.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZ1lGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--d987de14eb408344ae36a3cd6aced1575e7a87f7/image.png)

#### 3. Badge

Select **Badge** to add promotional information alongside the prices, such as **SALE**, **SAVE 40%**, or another message.

You can customize the badge's:

* Icon, icon size, color, background

* Content, text style

* Font size and line height

* Desktop and Mobile visibility

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZ2NGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--d86eff044d907739785b88821a03a2be161dabbc/image.png)

You can click **Add block** to add additional elements or hide them from your Price Badge layout.

> ***Tip:*** *Use the preview to check your Price Badge while customizing each element. You can switch between Product page/Collection page & others and Desktop/Mobile from the selectors above the preview.*

You can also insert a line break to separate elements with a new line, giving you more control over the layout and presentation.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZ29GIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--92be5adb5aeab1da70b23d70ffbfd4cd43acd3fa/image.png)

### Step 3: Choose which products display the Price Badge

Go to the **Products** tab to choose which products the Price Badge applies to.

You can target:

* All products

* Specific products

* Specific collections

* Specific tags

* Specific variants

You can also use additional conditions such as **Inventory status, Price range, Date, Product title, Product type, Product vendor, Discount range,** and **Weight range** to narrow down the products.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZ3NGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--96f47d84b8dade05b8d690b96b7d9c2f47b672a7/image.png)

> ***Important:*** *A product must meet the conditions you've configured for the Price Badge to appear.*

### Step 4: Configure display settings

Go to the **Settings** tab to control when and where your Price Badge appears.

Depending on your setup, you can configure settings such as:

* Pages where the Price Badge appears

* Schedule settings

* Country visibility

* Customer visibility

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZ3dGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--a5251387747ad620aefdd86e0e71264a476b556f/image.png)

### Step 5: Position the Price Badge (Optional)

To control where the Price Badge appears in your theme, use either an **App Block** or **Snippet Code**.

If you're using an App Block, disable your theme's existing price display to prevent duplicate prices.

> ***Tip:*** *Try the App Block first when supported by your theme. Use Snippet Code when you need to manually control the Price Badge position.*

### Step 6: Save and check your Price Badge

Once you've finished configuring your Price Badge, click **Save**.

Visit the selected products on your storefront and check that:

* The Price Badge appears on the correct products.

* The price and compare-at price display correctly.

* The layout looks correct on both Desktop and Mobile.

* The original theme price is not displayed twice.

---

We value your feedback — it helps us continuously improve ForDeer and provide you with a better experience.

🖥️ **Demo store:** Check out [here](https://fordeer-label-demo.myshopify.com/) with password: 1

👉 **Chat with us:** [Share your feedback](https://chat.fordeercommerce.io/widget?website_token=SkftR92ALebTgo2mN83SVuwn#/messages) directly with our team.\
👉 **Email us:** [hi@fordeercommerce.io](mailto:support@fordeercommerce.io)\
👉 **Explore more apps:** Discover more [Fordeer apps](https://apps.shopify.com/partners/fordeercommerce?utm_source=support&utm_medium=helpdesk).\
👉 **Join our community:** Join [ForDeer Community](https://www.facebook.com/groups/ecommerce.beginners.community/) to get the latest updates, tips, and special deals.

🕐 **Working hours:** 8:30 AM – 5:00 PM (UTC+7), Monday–Friday.\
We typically reply to live chats within minutes and emails within a few hours.

Need help? Feel free to reach out anytime via live chat or email!