How to show a shopper's own code and deadline on product pages
Use the countdown timer's Shopper's code mode to show each shopper their own discount code and its real time left, right under the price.
A shopper deciding on a product is the one who most needs to remember their code. The Shopper's code timer puts it right under the price, with the real time left.
TL;DR
Create a countdown timer and set Countdown to to Shopper's code. Publish it, then add it under the price on your product pages. Shoppers who won a code from one of your popups see that code and its real time left, styled like that popup. Everyone else sees nothing. You can also add it from your popup: leave Product page timer ticked in the Add a countdown to your store card and click Add.
How it differs from the other countdown modes
Sale, Cutoff and Delivery count down to the same time for every shopper. Shopper's code counts down to the moment this shopper's code expires.
- The deadline is real. It's set when the shopper gets the code and never restarts, on reload, in a new tab or the next day.
- Only shoppers with a code see it. For everyone else the timer takes up no space on the page.
- It needs a code popup. The popup must ask for an email and give a discount code, with One code per shopper on. See One code per shopper.
Step 1 · Create the timer
In Nudgesmart, open Store Widgets and click Create Widget. Pick the countdown timer.
Or, in your popup's Code section, leave Product page timer ticked under Add a countdown to your store and click Add. Nudgesmart creates a timer called Flash deal timer in this mode, publishes it and opens the theme editor on a product page. Back in the card, Add to product pages opens it again, with the steps to place the block.
Step 2 · Choose Shopper's code
Open the Settings section and set Countdown to to Shopper's code.
Countdown settings with Countdown to set to Shopper's code, the Message field and More options
Screenshot coming soon
- 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. - Look. Match the popup (recommended) takes the colours, font and buttons of the popup that gave the shopper the code. Match my theme lets you style it in the Design panel.
- Text after it ends. What shoppers see once the code has expired.
Check the Fed by card. It lists the popups whose codes this timer shows, with a one-click fix for any that need One code per shopper turned on or need switching on.
Under More options:
- Don't show the code. Shows only the discount and the time left.
- Hide the copy button. Removes the button that copies the code.
- Show the price with the code. Off by default. See "The price with the code" below before you turn it on.
- Copy button label and Text when the code is in the cart. Leave them empty for "Copy code" and "Applied".
- Hide on products with this tag. Type a product tag, such as no-code. The timer doesn't show on products with that tag.
- Hide on products already on sale. The timer doesn't show on products that already have a sale price.
Step 3 · Publish and add it under the price
In the Visibility card, click Publish. Then click Add to store.
Add to store suggests your product pages, just below the price, and opens the theme editor there. Choose your timer in the block's Widget setting, then click Save.
To add it by hand, go to Online Store → Themes → Customize, open a product page, click Add block, then Apps, and pick Nudgesmart widget. Drag it under the price.
The price with the code
Show the price with the code shows the product's price struck through, next to the price after your code. It's off by default for a reason: Nudgesmart can't see sale prices set by other discount apps. If you use one, the price on the timer could differ from the price at checkout. Turn it on only if no other app changes your prices.
Even when it's on, the price shows only when the popup's code has no minimum order. With a minimum, the price after your code would be wrong for a small cart, so the timer leaves it out. Free shipping codes never show a price.
Tips
- Pair it with the countdown bar. The bar keeps the code in view on every page, and this timer shows it at the moment a shopper decides. See How to add a countdown bar.
- Test it yourself. Win a code on your store with a fresh email, then open a product page. Reload and check the time left hasn't changed.
Common pitfalls
- I don't see the timer. It shows only to a shopper holding a live code. Win a code first, with an email you haven't used on that popup. Check the Nudgesmart app embed is on, since it runs the popups that give the codes.
- The timer shows on a product the code shouldn't cover. The code works on every product. Use Hide on products with this tag to keep the timer off products you don't want to promote.
- The price on the timer doesn't match checkout. Another app is changing your prices. Turn off Show the price with the code.
- The price with the code doesn't show. The popup's code has a minimum order, or it's a free shipping code. The timer shows the code and time left without a price.