Skip to main content
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. Each row’s Status is VISIBLE or HIDDEN, and Actions provides a delete control. 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

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. Do not invent separate configuration for these widget cards. They use the linked template forms.

​
Widgets configured only inside a template

Some templates have a storefront widget but no card in Ready-Made Widgets. Open the template from Discount Templates and use its widget tab.

​
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 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:

​
Global Settings

AIOD says these settings apply to all widgets of this type. Controls: Click Create Widget to create the callout.

​
Where should the widget appear?

Read 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:

​
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? 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:

​
Error Messages

Controls: 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. Read Widget translations for the full dialog.

​
Widget translations

These widgets have a Translations button that translates the widget text into the store’s other languages: Click Translations to open a dialog titled Translations:
  1. When no translations exist, AIOD shows No translations added yet. Choose a language in Select a language to add.
  2. AIOD adds a tab for the language. Each field starts with the widget’s current text. Edit the fields that should change.
  3. Use Add Language to add more languages. Click the x on a language tab to remove that language.
  4. Close the dialog and click Save in the widget or template form.
The language list comes from the store’s Shopify languages. If the store has only one language, AIOD shows No additional languages are configured for your store. and asks the merchant to create a market in Shopify admin’s Markets and assign it a new language. On the storefront, customers see the translation for their store language. Customers browsing in a language without a translation see the widget’s original text. A new language starts with a copy of the widget’s text at the time it was added. Editing the widget’s own text later does not change languages that were already added, so update each translation too.

​
Support

The widget page and widget forms show Contact support: followed by the AIOD support email.