# Savings badge: sale and discount badge (AndOr Savings badge block) > The savings badge is a small chip with the saving, like "Save 20%", or a discount code shoppers can copy. Source: https://backtrackhq.com/docs/widgets/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) The savings badge is a small chip that shows the saving, such as "Save 20%". For a code discount, it shows the code with a copy button. The badge shows the product's own saving only. An order discount, like 10% off orders over $50, never shows as a badge, even when the product has no saving of its own. It shows in the goal bar and the cart instead. **Made by:** a [Savings badge promotion](https://backtrackhq.com/docs/promotions/savings-badge/), or any discount AndOr can show. See [Show discounts you already have](https://backtrackhq.com/docs/widgets/show-existing-discounts/). **For developers:** [Code](https://backtrackhq.com/docs/widgets/savings-badge/code/) · [Styling](https://backtrackhq.com/docs/widgets/savings-badge/styling/) · [Events](https://backtrackhq.com/docs/widgets/savings-badge/events/) ## What shoppers see | The badge says | When | | --- | --- | | "Save 20%" or "Save $5.00" | A plain discount applies. | | "Save 25% on orders over $50.00" | The product's discount needs a minimum order amount. | | "Use code AUTUMN15" | The discount needs a code. The code is a copy button. | | "✓ AUTUMN15 applied" | The code is already in the cart. Shown in a muted color. | When several of the product's discounts apply, the badge picks a percentage over a fixed amount, then the biggest value, then the one that ends first. A product with no saving of its own shows no badge. > **Note:** The badge and the > [sale price](https://backtrackhq.com/docs/widgets/sale-price/) can name different > discounts on the product. Example: 10% off the product, and 25% off > the same product with a $50.00 minimum order. The price shows 10% off. The > badge says "Save 25% on orders over $50.00". ## Where it goes **Any template.** It is made for the product page, near the price or the title. ## 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/). Add the badge with the theme editor block. Where your theme has no slot for a block, paste the one-line tag instead. 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 Savings badge.** (Screenshot: The Apps list in the theme editor with AndOr Savings badge) 3. **Drag the block near the price or the title, then click Save.** (Screenshot: AndOr Savings badge placed near the price or the title in the theme editor preview) > **Tip:** In AndOr, **Promotions** > **Storefront widgets** > **See > all blocks** has an **Add to theme** button that opens the editor > with the block ready. With no discount on the preview product, the editor shows a sample badge with a dashed outline. Shoppers only see the badge while a discount runs. ### Or paste the tag A developer can paste one line where the badge should go: ```liquid ``` (Screenshot: A Horizon product page with the pasted savings badge next to the price, for a product with its own sale) > **Note:** The 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/). For product cards on Dawn, use a [product card recipe](https://backtrackhq.com/docs/developers/product-card-recipes/). On Horizon, add the block to the card instead. ## Block settings (Screenshot: The AndOr Savings badge block settings) | Setting | What it does | Default | | --- | --- | --- | | **Product** | The product to badge. Fills itself on a product page. | This page's product | | **Badge wording** | Goes before the value. "Up to" gives "Up to 20%". | "Save" in the shopper's language | | **Show badges for discounts with conditions** | Also badges the product's discounts that need a code or a minimum order. | On | | **Badge background** | The fill. Used exactly as set, not your brand color. | `#c0392b` | | **Badge text** | The text color. | `#ffffff` | | **Corner radius** | 0 to 24 px. | 4 px | | **Text size** | 70% to 200% of the text around it. | 85% | | **Space above**, **Space below** | 0 to 64 px. | 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 Savings badge** block is in your theme. See [Add the block](#add-the-block). - A discount on the product itself is switched on under **Promotions** > **Storefront widgets**. Order discounts don't count. For a discount with conditions, **Show badges for discounts with conditions** must be on in the block. It is on by default. With no such discount, the block stays hidden. ## Show it in more places (code) To show it where your theme has no slot for the block, paste a line of code. See [Savings badge: Code](https://backtrackhq.com/docs/widgets/savings-badge/code/). ## Limits - When the shown discount ends, the badge hides. The next discount shows on the next page load. - A code applied at checkout is not seen. Only a code in the cart switches the badge to "applied". - The badge follows variant switches when up to eight discounts apply to the product. - Amounts in another currency show with the currency code, like "BDT 200". They are not converted. - It does not show on gift cards, because Shopify does not discount them.