# Discount callout (AndOr Discount callout block) > One short line with an icon, such as a truck beside "Free shipping", shown while a free shipping discount runs or always. Source: https://backtrackhq.com/docs/widgets/discount-callout/ (Screenshot: A discount callout pill with a truck icon and Free shipping) The discount callout is one short line with an icon, for an offer you want to advertise. Example: a truck beside "Free shipping". It comes from the **AndOr Discount callout** block and can go on any page. **Made by:** no discount of its own. It uses a free shipping discount with no minimum spend when you have one. You add it from the **Discount callout** card in the promotion gallery. **For developers:** [Code](https://backtrackhq.com/docs/widgets/discount-callout/code/) ยท [Styling](https://backtrackhq.com/docs/widgets/discount-callout/styling/) ## What shoppers see A pill with an icon and one sentence. There is no number and no countdown. The pill is drawn on the server, with no JavaScript, so it shows as soon as the page loads. ### Two ways to use it The block has a checkbox, **Only show while a free shipping discount is active**. It decides the mode. | Checkbox | Callout text | What shoppers see | |---|---|---| | On | blank | "Free shipping", while a qualifying discount runs | | On | your text | your text, while a qualifying discount runs | | Off | your text | your text, always | | Off | blank | nothing at all | **Checkbox on (the default).** The pill shows only while a qualifying free shipping discount runs. That discount has no minimum spend and no code, and it applies to every product. The pill hides by itself when that discount ends. **Checkbox off.** The pill always shows your text. Use this when your free shipping is a shipping rate set to zero in Shopify. That is not a discount, so AndOr cannot find it. In this mode AndOr checks nothing, so remove or change the text yourself when the offer ends. > **Caution:** With the checkbox off and the text blank, shoppers see > nothing. In the theme editor, a dashed line reads "Add your callout > text in the theme editor" so you can see the block is there. ## Where it goes Any template: product pages, the cart, the home page or anywhere your theme lets you add a block. ## 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 discount callout comes from the **AndOr Discount callout** app block. It can go on any template. ### From the promotion gallery 1. **Open Promotions, click Create promotion, then click Add widget on the Discount callout card.** It is under **Promotions with storefront widgets**, with a **No discount** tag. The **Storefront blocks** page opens. (Screenshot: The Discount callout card with its Add widget button) 2. **Find AndOr Discount callout and click Add to theme.** **Add to theme** opens your theme editor with the block added. (Screenshot: The Storefront blocks page with the Add to theme button on AndOr Discount callout) 3. **Set the text and icon, move the block, and click Save.** See [Block settings](#block-settings) for each setting. (Screenshot: The top of the AndOr Discount callout block settings, with the Only show while a free shipping discount is active switch) ### Or add it in the theme editor 1. **Open the theme editor on the page where the pill should go.** In Shopify, go to **Online Store** > **Themes** and click **Edit theme**. For example **Products** > **Default product** to show it near the price. (Screenshot: The theme editor page menu with the page where the pill should go picked) 2. **Click Add block, open Apps and pick AndOr Discount callout.** Add it inside a section. (Screenshot: The Apps list in the theme editor with AndOr Discount callout) 3. **Drag the block where you want it, then click Save.** (Screenshot: AndOr Discount callout placed where you want it in the theme editor preview) ### Or paste the tag A developer can paste `` into theme code. It draws the same pill as the block with the checkbox on, and takes `data-text`, `data-icon`, `data-background`, `data-color`, `data-border` and `data-radius`. There is no attribute to turn the check off. See [One-line tags](https://backtrackhq.com/docs/developers/one-line-tags/). ## Block settings (Screenshot: The AndOr Discount callout block settings in the theme editor) The block starts with a short paragraph about its two modes. ### Only show while a free shipping discount is active On, the pill shows only while a free shipping discount with no minimum spend is running, and hides when none is. A free shipping discount with a spending threshold belongs to the **AndOr Order goal** block and keeps the pill hidden too. Off, the pill always shows your text. Default: on. ### Callout text The sentence on the pill. Plain text only. Placeholders like `[disc_val]` do not work. - Blank with the checkbox on: the built-in line, "Free shipping". - Blank with the checkbox off: nothing at all. Example: "Free delivery on every order". ### Icon The small picture before the text. Options: Truck, Percent badge, Tag, Gift, Check circle, Cart, No icon. Default: Truck. ### Pill background The pill's fill color. Default: `#f1f8f5`. ### Pill text The color of the text and the icon. Default: `#1a1a1a`. ### Pill border The color of the pill's border. Default: `#c7e0d3`. ### Corner radius How round the pill's corners are, from 0 to 24 px. 0 gives square corners. Leave it at 6 to keep the rounding the pill ships with. Default: 6 px. ## What it needs to appear With the checkbox on: - 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. - A free shipping discount shows on your storefront, and it has no minimum spend, no code and covers every product. - The discount is inside its active dates. With the checkbox off: only your text. ## Show it in more places (code) To show it where your theme has no slot for the block, paste a line of code. See [Discount callout: Code](https://backtrackhq.com/docs/widgets/discount-callout/code/). ## Limits - Free shipping with a minimum spend ("free shipping over $50") never shows in the callout. It belongs to the [goal bar](https://backtrackhq.com/docs/widgets/goal-bar/), which counts the cart up to the amount. The two widgets never talk about the same discount. - A quantity minimum ("free shipping when you buy 3") shows in neither. - The callout shows one pill, never more. With several qualifying free shipping discounts, it picks the one that lasts longest. - It can't point at one chosen discount. The gated mode only knows free shipping discounts. - The callout text is plain text. Placeholders like `[disc_val]` do not work here.