Welcome to the newest widget in your Fera eCommerce arsenal; the Promo Bar!

What is the Promo Bar?

The Countdown Promo Bar Widget allows you to set a timer with discount codes or coupons through Shopify to appear as a banner on the top of your store. Like our other widgets, everything about the Countdown Promo Bar is editable and customizable to match your own business’ brand, theme and site.


The “Content” tab lets you edit the Countdown message and Time-out message that your customers will see live on your site. This will display the amount of time or days left that a customer has to get the product AND have the discount or coupon still apply. The Time-out lets your customers know they’re missing out and to order immediately so they don’t miss out on the deal! Here you have the ability to set the timer (if you want to use it) and when it ends. You can also enable the “Use Link” option. This lets you set a product to link to. So let’s say you’re having a discount code for a specific product, let’s say bananas, you can link to the product page and the message will show a button. You can set the link to any page and set the button’s text to whatever you’d like it to say. For more tips on clickable buttons and creating a CTA you can check out our article about Calls to Action.

Discount Code (For Shopify Stores)

The “Behavior” tab is where you can find the Discount section to set your code. If you already have discount codes through your Shopify store you can enable the Widget to “Use pre-existing code”. If you don’t have one this will allow you to create one. It will populate in the ‘Discount Code’ section in Shopify. If you’re creating a new discount code you’ll have several Options and Usage Limits to set. You can set the discount type to be either a percentage, a fixed amount, or free shipping. You can then set the value based on the one you chose. If you set a percentage the code will take say 25% of their order total. A fixed amount would be a deal like saving $5 off your order and free shipping would allow them to get their order shipped for free. You can also set a minimum total meaning they would have to order a certain number of products before they’re eligible for the discount code. Usage limits let you decide whether the specified discount code can only be used once per customer account or if it has a limited number of times it may be used.


The “Design” tab will let you customize how the message appears on your site. This will let you change the text size, colour and weight. You’re able to customize the look of the link button, the time left and the timeout message. You can change things like text style, text weight and alignment, as well as the colours (both for the background and the text).

Edit HTML/CSS and AB Testing

As always you have full access to the code to make any other custom changes you’d like. Just be careful if coding isn’t your forte so you don’t accidentally mess up important pieces. You can add your own CSS classes to stylize your Widget even more under the “Design” tab. The AB testing section also lets you run an AB test to test if (and prove if) the Countdown Bar is actually working on your site!

Was this article helpful?

Want a Demo?

Request a demo and we'll walk you through all the amazing features Fera has to offer.

Request Live Demo