How to add a countdown bar that shows each shopper their own code

TL;DR

Open a popup that gives a discount code, such as a scratch card or spin wheel. In its Code section, set Code expires after, then in the Add a countdown to your store card leave Top bar ticked and click Add. Turn on Nudgesmart site widgets under App embeds in the theme editor. From then on, every shopper who gets a code sees their own code and its real time left, at the top of every page, styled like the popup that gave it.

What the countdown bar does

• It shows each shopper their own code. Two shoppers who played at different times see different codes and different times left.
• The time is real and never resets. Each code has one deadline, set when the shopper gets it. Reloading the page, opening a new tab or coming back the next day shows the same time left.
• Only shoppers with a code see it. Everyone else sees nothing, so the bar needs no targeting. You can choose to show them an invite to one of your popups instead.
• It looks like your popup. By default the bar takes the colours, font, button and coupon box of the popup that gave the shopper their code. You can switch it to your theme's look.
• It shows when the code is in the cart. With Add code to cart automatically on in your popup (it's on by default), the popup puts the code in the shopper's cart. Once Shopify applies it to the cart, the bar says Applied.
• It tidies up when time runs out. The bar says "Your code has expired" and then closes. If Nudgesmart added the code to the cart, it takes it out again. A code the shopper removed is never added back.

What you need

• A popup that asks for an email and then gives a code. A scratch card, spin wheel, pick a present or email sign-up popup with a discount code all work. The bar shows a code only after the shopper enters their email.
• One code per shopper switched on for that popup. Nudgesmart switches it on for you when you add a countdown. It's what stops the timer restarting: a shopper who comes back gets the same code and deadline, not a new one. See One code per shopper.
• Both Nudgesmart app embeds on. The Nudgesmart embed runs your popups, which hand out the codes. The Nudgesmart site widgets embed shows the bar.

Option A · Add it from your popup (quickest)

Popup editor with the Code section: Code expires after, Combine with other discounts, More options, and the Add a countdown to your store card

Screenshot coming soon

If you leave it blank, scratch cards and pick a present use each prize's own expiry, and other popups use 30 minutes. You can set anything from 1 hour to 720 hours (30 days), or 5 to 43,200 minutes.

Nudgesmart creates and publishes the bar, turns on One code per shopper for this popup and saves the popup for you. If you already have a bar, it reuses it. The theme editor opens in a new tab on App embeds.

Back in Nudgesmart, the card lists what's left to do. If the theme editor didn't open, click Turn on in theme next to Top bar. After you save the theme, click Check again. When everything is done, the card reads Countdown live on: Top bar.

To change the bar's wording, position or look later, click Edit in the same card.

Option B · Create it from Store Widgets

You can have one countdown bar per store. It shows a code from any of your popups that give codes, so you don't pick a popup.

Countdown bar editor with the Fed by card listing two code popups, one with a Turn on One code per shopper button

Screenshot coming soon

• Turn on One code per shopper. Shows on a popup that doesn't have it on yet. Click it, so that popup's timer never restarts.
• Activate. Shows on a paused popup. Click it to switch the popup on.
• Open in editor. Shows on a draft popup, so you can finish and publish it.
• Open in editor also shows on a popup that doesn't ask for an email. Add an email field to it, so it can start a timer.
• None of your popups give codes yet. Click Create a code popup to pick a template. When you save it, Nudgesmart brings you back to the bar.

• Message. Leave it empty to show "Your code {{ code }} · {{ time }} left". {{ code }} is the shopper's code, {{ discount }} is what it takes off, such as "10% off", and {{ time }} is the time left. {{ customer.first_name }} adds a signed-in shopper's first name and is left out for guests. {{ cart.remaining }} adds what's left to spend for free shipping, if a free shipping bar is on the same page.
• Position. Top bar — pushes the page down (the default), Top — floating pill, Bottom — floating pill or Bottom bar.
• Look. Match the popup (recommended) or Match my theme.
• Text after it ends. Leave it empty to show "Your code has expired".

Under More options:

• Devices. All devices, phones only or computers only.
• Don't show the code. Shows only the discount and the time left.
• Hide the copy button. Removes the button that copies the code.
• Copy button label and Text when the code is in the cart. Leave them empty for "Copy code" and "Applied".

Under Invite before a code:

• Invite shoppers to this popup. Optional. Before a shopper has a code, the bar invites them to the popup you pick, and a click opens it. The invite shows only when that popup is allowed to open for the shopper, and never after their code from it has expired.
• Invite text. The words on the invite.

With Look set to Match the popup, the bar takes its colours, font and buttons from the popup that gave the shopper the code, so there's nothing to style here. If several popups give codes, use Preview as to see the bar in each popup's look. To pick your own colours and style, set Look to Match my theme.

You can also open the Where it shows tab and click Turn on to open App embeds directly. Nudgesmart site widgets is the same switch that shows the WhatsApp and chat buttons and product labels. If it's already on, the bar works as soon as you publish.

How the bar sits on your store

• The top bar sits above your header. With the default position, the bar goes above your store's header and pushes the page down, so it never covers your menu or logo.
• It stays in view. Once a shopper scrolls past the top bar, or one of your popups shows its own bar at the top, the code and time left move to a small pill at the bottom of the screen. The floating top pill shrinks when a shopper scrolls down, and sits under a popup's top bar instead of on top of it.
• It works with your chat buttons. When the bar or pill is at the bottom of the screen, the WhatsApp and chat buttons move up so they aren't covered.
• It ends a little early. The bar closes 30 seconds before the code expires, so no shopper reaches checkout with a code about to run out.
• It keeps working when popups don't show. If you pause your popups or reach your plan's limit, shoppers who already have a code still see their bar until it runs out. If the popup that gave the code is paused, the bar uses your theme's look.

Plans

The countdown bar is on every plan, including Free. It counts as one live widget: Free includes 5, Growth 15, and Scale and Pro have no limit. The popup that gives the codes counts as a live campaign as usual.

Tips

• Test it yourself. Use a fresh email on your store, win a code, then reload the page and open a new tab. The time left should be the same each time.
• Keep the code visible. Leave Don't show the code off. Shoppers who check out with Buy it now or an express button such as Shop Pay skip the cart and need to type the code.
• Using other discount apps? Read Using codes with Discount Mixer and other discount apps before you launch.

Common pitfalls

• I don't see the bar. It only shows to a shopper holding a live code. Win a code on your store first, with an email you haven't used on that popup. Then check both Nudgesmart and Nudgesmart site widgets are on under App embeds.
• My code popup isn't in the Fed by list. The list shows popups that give a discount code. Popups that only collect emails can't feed the bar. A popup that gives a code without asking for an email is listed with a warning: add an email field to it.
• The bar shows on one device but not another. The bar follows the shopper's cart in the browser where they got the code. On another phone or computer the code still works until it expires, but the bar doesn't show there.
• "One code per shopper" is greyed out on my popup. That's on purpose. While you have a countdown, it's on and locked in each code popup's editor, so no shopper's timer can restart. It reads Needed by your countdown.
• The bar isn't in my popup's colours. Check Look is set to Match the popup, and that the popup that gave the code is live. A paused popup's codes show in your theme's look.

What to read next

• Help

  How to give each shopper one code, and use it with other discount apps

  Give every shopper one discount code with one real deadline, add it to their cart automatically, and make it work alongside Discount Mixer and other discount apps.

• Help

  How to create a countdown timer widget

  Count down to a sale's end, show an order-by time for same-day shipping, or show an estimated delivery date on your store's pages.

• Help

  How to add a chat button for WhatsApp, Instagram, Messenger and more

  Add one floating chat button to every page of your store so shoppers can reach you on WhatsApp, Messenger, Instagram, Telegram, phone, text, email, LINE or Viber.