Skip to content
Badgy Help

banners countdowns

Create a countdown banner

Learn how to create a countdown banner with a safe Juniper & Trail example, shopper impact, options, and recovery checks. Countdown banners use the campaign timing context. Configure before-start and expired behavior so the banner never promises an offer outside its active window.

Before you begin

  • Enable the Badgy theme app embed
  • Write concise campaign copy and a valid destination
  • Plan mobile and desktop evidence

Keep the campaign in Draft while you verify the configuration. Use a private storefront window where the guide changes shopper-facing behavior.

Step-by-step setup

Create a countdown banner shown in the Badgy admin, with numbered callouts for the controls and verification points described below.
Annotated Juniper & Trail example

  1. Switch between banner design and storefront placement controls.

  2. Set the background style, color, opacity, and optional image.

  3. Enter and format banner content, text color, and responsive size.

  4. Inspect the live banner preview at desktop or mobile width.

  5. Save the banner after its preview and placement are verified.

  1. Choose Countdown and ensure campaign timing supplies a valid target.
  2. Choose Boxed or Compact format and Inline or Stacked layout.
  3. Toggle Days, Hours, Minutes, and Seconds; optionally hide days under 24 hours.
  4. Set separator, digit colors/background/size, and expired text/behavior.
  5. Preview before-start, active, under-24-hour, zero, and expired states at desktop/mobile widths.

Countdown banners use the campaign timing context. Configure before-start and expired behavior so the banner never promises an offer outside its active window.

Juniper & Trail example

Juniper & Trail uses create a countdown banner for its Weekend Trail Kit offer. Copy is tested at desktop and mobile widths on an included home page and a direct product page. The documentation fixture uses realistic products, inventory states, variants, collections, and protected exclusions so the preview exercises the same decisions as a merchant catalog.

What shoppers will see

Live Trail Days countdown with visible time units in the Juniper & Trail storefront, marked with one focused verification callout.
Annotated Juniper & Trail example

  1. Confirm the campaign announcement and Shop call to action at the top of the store.

  2. Check the badge and adjusted pricing on an eligible product card.

  3. Compare another product card to verify consistent campaign treatment.

Live Trail Days countdown with visible time units in the Juniper & Trail storefront, marked with one focused verification callout.
Annotated Juniper & Trail example

  1. Confirm the campaign announcement and Shop call to action fit the mobile header.

  2. Check that the badge remains readable on the mobile product card.

  3. Scroll through additional products to verify the collection layout stays usable.

The banner renders only on eligible pages while its campaign and visibility rules allow it; the mobile layout may stack content that is inline on desktop. Check the relevant result from product through cart where applicable. For shopper-facing work, compare desktop and mobile and verify both an eligible and an ineligible item.

Common mistakes and troubleshooting

  • Acting on the wrong shop. Confirm the Shopify store and campaign before following Create a countdown banner.
  • Trusting a stale preview. Refresh after catalog, schedule, discount, theme, locale, or market changes.
  • Repeating a background command. Read status and History first; retry only when Badgy presents a recoverable failure.
  • Checking only one viewport. Verify desktop and mobile in a private storefront window.

If the status reports revoked authorization, reconnect Shopify before retrying. If the result still differs from the preview, preserve the campaign ID and approximate time, then open support from this identified shop. Never send customer data, access tokens, or full catalog exports in feedback.

Options reference

| Option | Use it when | Consequence | | --- | --- | --- | | Boxed / Compact | Choose digit treatment | Changes timer footprint | | Inline / Stacked | Arrange message and timer | Mobile may need stacked | | Colon / Dot / None | Separate time units | Keep units understandable | | Hide days under 24h | Simplify final day | Hours must remain visible |

Badgy behavior in this guide is reviewed against the repository's shipped UI, service rules, and feature design documents. Shopify-owned theme, Markets, Flow, billing, and discount behavior can also depend on the store's Shopify configuration; consult the Shopify Help Center for that platform configuration.

Was this guide helpful?