# Sale price: strikethrough price (AndOr Sale price block) > The AndOr sale price shows the old price crossed out beside the price a shopper pays today. Source: https://backtrackhq.com/docs/widgets/sale-price/ (Screenshot: A sale price: the old price crossed out beside the sale price) The sale price widget shows the old price crossed out beside the price a shopper pays today. Example: ~~$40.00~~ **$32.00**. **Made by:** a [Sale price promotion](https://backtrackhq.com/docs/promotions/sale-price/), or any discount that lowers the product's own price. You can also [show discounts you already have](https://backtrackhq.com/docs/widgets/show-existing-discounts/). **For developers:** [Code](https://backtrackhq.com/docs/widgets/sale-price/code/) · [Styling](https://backtrackhq.com/docs/widgets/sale-price/styling/) · [Events](https://backtrackhq.com/docs/widgets/sale-price/events/) ## What shoppers see - The original price, crossed out, in a grey color. - The sale price, in your sale color. - An optional small badge after the price, for example "Sale". The price follows the shopper's variant choice without a page reload. When the sale ends, the widget hides. ## Looks Two block settings change the look. See [Block settings](#block-settings). ### Price only The struck original price and the sale price. This is the default. Settings: **Show a sale badge** off, **Hide the theme's price** off. (Screenshot: A product page with the theme's price, and AndOr's sale price under it: the struck original price and the sale price, with no badge) ### With a sale badge A small badge after the price, with your **Badge label**. Setting: **Show a sale badge** on. (Screenshot: AndOr's sale price with a Sale badge after it, under the theme's price) ### Theme price hidden Only AndOr's price shows. The theme's own price line is hidden. Setting: **Hide the theme's price** on. (Screenshot: A product page with only AndOr's struck original price and sale price, and no theme price) ## Where it goes - **Product page**, beside or under the price. This is what it is made for. - **Product cards on Horizon themes:** add the block to the card in the theme editor. - Any other template, with a product picked in the block settings. For product cards on Dawn and similar themes, a developer can paste a recipe. See [Product card recipes](https://backtrackhq.com/docs/developers/product-card-recipes/). ## Add the block > **Note:** App blocks need an Online Store 2.0 theme. On an older > (vintage) theme, turn on the app embed and paste the > [one-line tag](https://backtrackhq.com/docs/developers/one-line-tags/) instead. See > [Theme requirements](https://backtrackhq.com/docs/get-started/theme-requirements/). The **AndOr Sale price** block draws the sale price widget. You add it in the Shopify theme editor, usually right under the product price. 1. **Open the theme editor on the product template.** In Shopify, go to **Online Store** > **Themes** and click **Edit theme**. Pick **Products**, then **Default product**, in the page menu at the top. (Screenshot: The theme editor page menu with the product template picked) 2. **Click Add block, open Apps and pick AndOr Sale price.** Add it inside the product information section. (Screenshot: The Apps list in the theme editor with AndOr Sale price) 3. **Drag the block under the price, then click Save.** (Screenshot: AndOr Sale price placed under the price in the theme editor preview) > **Tip:** In AndOr, **Promotions** > **Storefront widgets** > > **See all blocks** has an **Add to theme** button. It opens the theme > editor with this block ready to place. > **Note:** When no discount applies to the product you preview, the > block shows a sample price with a dashed outline. That way you can > place and style it. Shoppers see it only while a discount is running. ### Or paste the tag Where your theme has no slot for the block, a developer can paste one line on the product template: ```liquid ``` (Screenshot: The pasted sale price under the theme's price: the struck original price and the sale price) > **Note:** A pasted tag needs the **AndOr Discount Display** app embed > on. The embed fills the tag in, so with the embed off it shows > nothing. See [One-line tags](https://backtrackhq.com/docs/developers/one-line-tags/). > **Caution:** Do not paste it in `snippets/price.liquid` (Dawn) or > `blocks/price.liquid` (Horizon). Product cards use those files too, so > every card would print this page's price. ## Block settings (Screenshot: The AndOr Sale price block settings in the theme editor) ### Product The product to price. On a product page it fills itself from the page. Pick a product only when you place the block on another template. ### Hide the theme's price Hides the price your theme shows beside this block, so only the AndOr price shows. It works on themes whose price uses the `.price` class, like Dawn and Horizon. If your theme names its price differently, both prices stay on screen. Default: off. ### Show a sale badge Adds a small badge after the price. Default: off. ### Badge label The word inside the sale badge. Shows only when **Show a sale badge** is on. Default: Sale. ### Sale price color The color of the sale price. Left on the default, this block follows the color set in the **AndOr Discount Display** app embed, and then your brand color. Default: `#c0392b`. ### Original price color The color of the crossed-out original price. Default: `#6d7175`. ### Text size Sized against the text around the block, so 100% matches your theme. Options: 70% to 200%, in steps of 5. Default: 100%. ### Space above Empty space above the block. Options: 0 to 64 px, in steps of 4. Default: 0 px. ### Space below Empty space below the block. Options: 0 to 64 px, in steps of 4. Default: 0 px. ## What it needs to appear - Optional: the [app embed](https://backtrackhq.com/docs/get-started/install/#turn-on-the-app-embed). The block shows without it. The embed adds your shared look settings, text changes, the cart drawer parts and one-line tags. - The **AndOr Sale price** block is in your theme. - The discount is switched on under **Promotions** > **Storefront widgets**. - The discount lowers what a shopper pays for the product. A discount that only comes off the total at checkout leaves the product price alone, so this widget has nothing to show. - The discount is running now and covers the variant on screen. It does not show for: - discounts that need a code, a minimum order, or another condition the store page cannot check. Use the [savings badge](https://backtrackhq.com/docs/widgets/savings-badge/) for those. - gift card products, because Shopify does not discount them. > **Tip:** Your theme may also show its own price next to the AndOr > price. Turn on **Hide the theme's price** on the block to show only > the AndOr price. See [Hide the theme's price](#hide-the-themes-price). ## Show it in more places (code) To show it where your theme has no slot for the block, paste a line of code. See [Sale price: Code](https://backtrackhq.com/docs/widgets/sale-price/code/). ## Limits - On a product with more than 60 variants, the price does not follow a variant switch. The first price shown is still right for the variant that loaded. - When the discount is in a different currency than the shopper sees, the sale price is converted in the browser. With JavaScript off, the shopper sees the regular price, never a wrong sale price. - When several discounts apply, the widget shows the one that saves the most on the variant on screen.