# Sale price promotion (strikethrough price)

> Put a percent off on a collection and show the struck price and the sale price on your product pages. Set it up, add the block and check it on your store.

Source: https://backtrackhq.com/docs/promotions/sale-price/

(Screenshot: A sale price: the old price crossed out beside the sale price)

A sale price promotion takes a percent off a collection and shows the
old price crossed out beside the sale price on the product page.

## At a glance

| | |
| --- | --- |
| **Gallery group** | Promotions with storefront widgets |
| **Discount** | Percentage off one collection. Default: 20% off. |
| **Theme block** | **AndOr Sale price**, on the product page |
| **Upsell offer** | None |
| **What the app embed adds** | Your brand color, the parts in the cart drawer (if any), 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 Sale price card.**

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

   (Screenshot: The promotion gallery with the Sale price 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 sale price promotion)

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

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

   (Screenshot: The Storefront widgets section of a sale price 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 Sale price**
   block. The link opens your theme editor with the block added.

2. **Drag the block under or beside the price, then click Save.**

   (Screenshot: The theme editor with the AndOr Sale price block added)

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

3. **Turn on Hide the theme's price, if you see two prices.**

   Most themes show their own price next to the block. This setting
   hides it, so only the AndOr price shows. It works on themes whose
   price uses the `.price` class, like Dawn and Horizon.

All block settings are on the
[Sale price widget](https://backtrackhq.com/docs/widgets/sale-price/#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 old price crossed out beside the sale
   price.

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 on the product template, 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 discount needs a code or a minimum order. Use a
  [Savings badge promotion](https://backtrackhq.com/docs/promotions/savings-badge/) for those.

See [What it needs to appear](https://backtrackhq.com/docs/widgets/sale-price/#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 sale price 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. | Sale price |
| **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.
- **AndOr Sale price** needs a discount that lowers what a shopper pays
  for the product.