# Savings badge promotion (sale badge)

> Put a percent off on a collection and show a badge that says how much shoppers save. Set it up, add the block and check it on your store.

Source: https://backtrackhq.com/docs/promotions/savings-badge/

(Screenshot: A Horizon product page with a savings badge that says Save up to 20% on qualifying items, for a tiered product discount)

A savings badge promotion takes a percent off a collection and shows a
small badge with the saving, such as "Save 20%", on the product page.

## At a glance

| | |
| --- | --- |
| **Gallery group** | Promotions with storefront widgets |
| **Discount** | Percentage off one collection. Default: 20% off. |
| **Theme block** | **AndOr Savings badge**, usually on the product page |
| **Upsell offer** | None |
| **What the app embed adds** | Shared look settings and your Storefront text. The block shows without it. |

## Before you start

- Pick the collection that goes on sale. Storefront widgets can't show
  a discount aimed at a product tag.
- Turn on the app embed if you want shared look settings or your own
  wording. See [Install and turn on the app embed](https://backtrackhq.com/docs/get-started/install/#turn-on-the-app-embed). For what works without it, see [the app embed table](https://backtrackhq.com/docs/widgets/app-embed/#what-works-without-the-app-embed).

## Set it up in the app

1. **Open Promotions, click Create promotion, then click Choose on the Savings badge card.**

   It is under **Promotions with storefront widgets**.

   (Screenshot: The promotion gallery with the Savings badge card and its Choose button)

2. **Pick the collection and set the discount in the Discount section.**

   The page starts at 20% off a collection you pick. A banner says
   "Pick the collection for this promotion. Storefront widgets can't
   show a product tag."

   Until you pick, **Make it live** won't save. It says "Pick a
   collection under Discount first."

   (Screenshot: The Discount section of a savings badge promotion)

3. **Check the Storefront widgets section.**

   **Show storefront widgets** is on by default. Leave it on.

   (Screenshot: The Storefront widgets section of a savings badge promotion)

4. **Set the dates in Schedule and status, then click Make it live.**

   Or click **Save as draft** to finish later.

   (Screenshot: The Schedule and status section with the Make it live button)

## Add it to your theme

> **Note:** **What's next** appears after you click **Make it live**,
> not after **Save as draft**. It goes away when you dismiss it or leave
> the page. No What's next panel? Open **Promotions**. In the row's
> **Storefront widgets** column, click **Add block**. It shows when the block isn't in your theme yet.

1. **Under What's next, click Open theme editor.**

   **Add the widget to your theme** names the **AndOr Savings badge**
   block. The link opens your theme editor with the block added.

2. **Drag the block near the price or the title, then click Save.**

   (Screenshot: The theme editor with the AndOr Savings badge block added)

   The dashed price in the editor preview is a sample. It shows until a discount applies to the product you preview.

3. **Leave Show badges for discounts with conditions on.**

   It is on by default. It also badges discounts with a code or a
   minimum order, which a sale price can't show.

All block settings are on the
[Savings badge widget](https://backtrackhq.com/docs/widgets/savings-badge/#block-settings) page.

## Check it on your store

1. **Under What's next, click View on store.**

   It opens the collection from this discount in a new tab. Open a
   product from it. You see the badge with the saving.

2. **Under Try it at checkout, click Open store, add the product to the cart, then check out.**

   The discount comes off at checkout.

**Not showing?**

- The block is not in your theme, or you didn't click **Save** in the
  theme editor.
- The discount is not running yet. Check its dates.
- The product is not in the collection you picked.
- The discount uses **Set fixed price** or **Limit the discount to a
  maximum amount**. Widgets can't show those.
- The product is a gift card. Shopify does not discount gift cards.

See [What it needs to appear](https://backtrackhq.com/docs/widgets/savings-badge/#what-it-needs-to-appear)
and [Widgets not showing](https://backtrackhq.com/docs/help/widgets-not-showing/).

## Turn the widget on or off

In **Promotions**, use the row's **Storefront widgets** switch. The
discount keeps working at checkout.

## Settings and limits

(Screenshot: The Discount section of a savings badge promotion with its settings)

| Setting | What it does | Default |
| --- | --- | --- |
| **Name** | Shoppers see it at checkout when the discount has no message. Up to 60 characters, and different from your other discounts' names. | Savings badge |
| **Discount value** | Percentage off, Fixed amount off, Set fixed price, or Free (100% off). | Percentage off |
| **Percentage** | The percent off. | 20 |
| **Limit the discount to a maximum amount** | Caps the saving at a **Maximum discount amount**. Only for **Percentage off**. | Off |
| **Applies to** | Which products get the discount. | Specific collections: pick one |
| **Combine with** | Tick **Product discounts**, **Order discounts** or **Shipping discounts**. | None |

Limits:

- **Set fixed price** can't show: "its discount value cannot be shown
  as a sale price or a badge."
- With **Limit the discount to a maximum amount** on, widgets can't
  show it. The saving would look bigger than it is.
- For widgets, **Applies to** must be all products, specific products,
  specific collections or specific variants. Tags, product types, SKUs
  and the "Exclude" options can't show.
- When the discount ends, the badge hides.