> ## Documentation Index > Fetch the complete documentation index at: https://aiodapp.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Discount Widgets > Overview of AIOD ready-made widgets, including template-backed widgets and standalone widget forms. Use **Discount Widgets** when a merchant wants storefront UI for AIOD promotions, such as callouts, offer cards, progress bars, volume bundles, gift selectors, strike-through prices, discount-code inputs, BOGO add-on widgets, or Upsell recommendations. ## Entry point In Shopify admin, open **Apps** > **AIOD Discount & Gift** > **Discount Widgets**. AIOD opens **Theme Widgets**, which lists existing widgets by **Widget ID**, **Widget Type**, **Status**, and **Actions**. Click **Create New Widget** to open **Ready-Made Widgets**. This page says: "Grab a Widget, tweak it a bit - And you're all set!" ## Available widgets | Widget | Type | What it does | | ----------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Discount Callouts** | Standalone widget | Creates a short storefront callout banner, optionally linked to an active AIOD discount. | | **Offer Message Widget** | Standalone widget | Creates a card-style list of available offers, with optional discount links and discount-code display. | | **Discount Progress Bar** | Template-backed widget | Opens the **Tiered/Volume Discount** template. Use the template's widget and tier settings instead of creating separate widget data. | | **Volume Bundle Widget** | Template-backed widget | Opens the **Volume Discount / Bundle** template, whose form title is **Volume Bundle**. Use the template's bundle offer and widget design settings. | | **Free gift** | Template-backed widget | Opens the **Free Gift with Purchase** template. Use the free gift template and its widget settings instead of creating separate widget data. | | **Discounted Price Strike-through** | Template setting | Does not open a separate widget form. Enable **Show Discounted Price Crossout** inside any applicable discount template. It is not used for **Free Gift with Purchase**. | | **Discount Code Input** | Standalone widget | Creates a cart or side-cart discount-code input where customers can enter AIOD discount codes. | | **Buy X Get Y** | Template-backed widget | Opens the **Buy X Get Y (Discount)** template. Use that template's widget and discount settings instead of creating separate widget data. | | **Upsell** | Template-backed widget | Opens the **Upsell** template. Use its trigger, offer-product, optional discount, placement, and widget design settings. | AIOD also shows **More widgets launching soon!** and says merchants can contact support with widget requests. ## Template-backed widgets Some cards in **Discount Widgets** are shortcuts to discount templates. Document and answer those widgets from the template page. | Widget card | Opens or belongs to | Where to read details | | ------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------- | | **Free gift** | **Free Gift with Purchase** | [Free Gift with Purchase](/docs/templates/free-gift-with-purchase) | | **Discount Progress Bar** | **Tiered/Volume Discount** | [Tiered/Volume Discount](/docs/templates/tiered-volume-discount) | | **Volume Bundle Widget** | **Volume Discount / Bundle**; the form title is **Volume Bundle** | [Volume Discount / Bundle](/docs/templates/volume-discount-bundle) | | **Buy X Get Y** | **Buy X Get Y (Discount)** | [Buy X Get Y (Discount)](/docs/templates/buy-x-get-y-discount) | | **Upsell** | **Upsell** | [Upsell](/docs/templates/upsell) | Do not invent separate configuration for these widget cards. They use the linked template forms. ## Discounted Price Strike-through **Discounted Price Strike-through** is not a separate widget form in the observed UI. Use it when a merchant asks how to show compare-at style strike-through pricing for an AIOD discount. The merchant enables **Show Discounted Price Crossout** inside the discount template they are configuring. The strike-through setting can be used in applicable discount templates except **Free Gift with Purchase**. Read [**Show Discounted Price Crossout**](/docs/app/common-template-settings#show-discounted-price-crossout) for the shared crossout pricing UI and placement details. ## Standalone widget theme extension warning Standalone widget forms can show this warning: **Required: Theme Extension Should Be Enabled**. The warning says the **Activate theme extension** button automatically enables the **Latest Widget Manager** extension. The merchant must click **Save** in the theme editor after activation. Use this warning when a merchant asks why a widget is not appearing on the storefront. ## Discount Callouts Open **Discount Widgets** > **Discount Callouts**. The page title is **Discount Callouts**. Use this widget to show a short banner-style message on product pages, cart pages, or side cart drawers. ### Widget Specific Settings Controls: | Control | Observed behavior or default | | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Linked Discount** | Optional dropdown. Used to display the widget only when the selected discount is active. Includes **Select a discount**, **None (Unlink from discount)**, and available discounts. | | **Widget Name (For you to easily identify it)** | Internal name input. Placeholder: `Enter widget name`. | | **Widget Text** | Customer-facing callout text. Placeholder: `eg: Get 10% Off!`. | | **Show Icon** | Checked by default. When checked, icon controls are visible. | | **Icon** | Opens icon selection. | | **Icon Color** | Color input. Default observed: `#2d8100`. | | **Icon Size** | Slider. Default observed: `25px`. | | **Icon Gap** | Slider. Default observed: `7px`. | | **Icon Margin Left** | Slider. Default observed: `0px`. | ### Global Settings AIOD says these settings apply to all widgets of this type. Controls: | Control | Default observed | | -------------------- | ---------------- | | **Background Color** | `#eeffe5` | | **Border Color** | `#abd992` | | **Border Radius** | `8px` | | **Padding** | `8px` | | **Text Size** | `14px` | | **Text Color** | `#2d8100` | | **Bold Text** | Unchecked. | | **Italic Text** | Unchecked. | Click **Create Widget** to create the callout. ### Where should the widget appear? Read [**Where should the widget appear?**](/docs/app/common-template-settings#where-should-the-widget-appear) for information about this. The form includes **Banner Preview**. ## Offer Message Widget Open **Discount Widgets** > **Offer Message Widget**. The page title is **Offer Message Widget**. Use this widget to show one or more offer cards, such as automatic offers or discount-code offers. ### Widget Specific Settings Controls: | Control | Observed behavior or default | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | **Widget Name (For you to easily identify it)** | Internal name input. Placeholder: `Enter widget name`. | | **Widget Heading** | Heading shown above the offer cards. Placeholder and default observed: `Available offers`. | | **Offer text** | Offer title. Placeholder: `Eg. 10% off on first order`. | | **Subtext** | Supporting text. Placeholder: `Eg. Auto applied`. | | **Link discount (optional)** | Optional discount dropdown. Linked offers only appear when that discount is active and eligible on the storefront. | | **Discount code (optional)** | Optional code input. Placeholder: `Enter code`. | | **+ Add offer** | Adds another offer block, such as **Offer 2**. | ### Widget Style AIOD says these settings apply only to this offer message widget. **Spacing** controls: * **Margin Top** slider. Default observed: `5px`. * **Margin Bottom** slider. Default observed: `5px`. **Heading** controls: * **Heading text size**. * **Heading text color**. * **Bold heading text**. * **Italic heading text**. * **Show icon**. * **Icon**. * **Icon Color**. * **Icon Size**. * **Icon Gap**. * **Icon Margin Left**. **Card** controls: * **Background Color**. * **Border Color**. * **Border Radius**. * **Padding**. **Offer Copy** controls: * **Offer text size**. * **Offer text color**. * **Subtext size**. * **Subtext color**. * **Discount code color**. Click **Create Widget** to create the offer message widget. ### Where should the widget appear? Read [**Where should the widget appear?**](/docs/app/common-template-settings#where-should-the-widget-appear) for information about this. The form includes **Banner Preview**. ## Discount Code Input Open **Discount Widgets** > **Discount Code Input**. The page title is **Discount Code Input Widget**. Use this widget to let customers enter AIOD discount codes on the cart page or side cart drawer. ### Customize Input Widget Controls: | Control | Default observed | | -------------------- | ---------------------------------- | | **Translations** | Opens the **Translations** dialog. | | **Button Text** | `Apply` | | **Button Color** | `#005bd1` | | **Placeholder Text** | `Discount Code` | ### Error Messages Controls: | Control | Default observed | | ------------------------ | ----------------------------- | | **Invalid Code Message** | `Enter a valid discount code` | AIOD describes this as the message shown when a code is invalid or inapplicable. ### Widget Visibility The **Show widget on Cart Page, Slide Cart Drawer** checkbox controls whether the discount-code input is visible. It is checked by default in the observed form. AIOD says that when it is disabled, the widget will be completely hidden from the website. The form includes **Widget Preview with Error States**, showing: * The discount code input. * The **Apply** button. * The invalid-code message. Click **Create Widget** to create the discount code input widget. ### Translations Click **Translations** to open a dialog titled **Translations**. When no translations exist, AIOD shows **No translations added yet** and a **Select a language to add** dropdown. ## Support The widget page and widget forms show **Contact support:** followed by the AIOD support email.