Countdown Bar Template

Countdown Bar template shows users how much time remains until the upcoming events. You can inform your users that time is running out so you can encourage them to finalize the purchase. 

It is one of the most used templates to increase engagement, average order value and conversion rates for targeted segments and selected rules. It also aims to reduce cart abandonment rates.

How to create it

To create a campaign with the Countdown Bar template, navigate to Experience > Optimize > Web Templates.

1. Click the Create button on the listing page, name your campaign, and click the Next button.

2. You will land on the Template Library. You can search for the template or find it under Increase Conversion Rate.

3. When you click on the template, you will see the available platforms, its default preview, description, and its elements. Click Use For {Platform} to proceed.

The Preview tab

On the top banner of this page, you can see Size, Position, Navigate Mode and platform icons that you can switch between them to see your campaign how it looks on each platform. 

• Navigate Mode helps you navigate through your webpages to place your campaign.
• You can set the width and height of the template via Size menu on the top bar. It can be either percentage(%) or pixel (px) values. Also, it turns into Auto mode, if you do not set any values here. Then, it takes the size information (height) from the design itself. You can also make a full page banner by setting width 100% and height 100%.
• Via Position menu, you can place your on page campaign anywhere you want on the website. You can select any other place via default placement options or give margins.

Since it is an inline template, you have to append your template to your webpage by using the menu opens below.

The Design tab

You can proceed with designing your template in the Design tab.

1. When Sync All Platforms is on, all the changes you make will apply to Mobile, Tablet, and Desktop platforms instantly. Therefore, you can select the platform to which all platforms will be synchronized as well. Switching between platform icons right next to Sync All Platforms toggle, you can see how your template looks on each. Only the layout selections won’t apply to all platform even when sync is on as a rule. 

If you choose to make separate changes in different platforms, you can switch the sync toggle off.

Countdown Bar template includes text and countdown elements by default. To customize your template, you can add elements to the top menu.

2. You can use Advanced Settings on the top bar to add custom CSS for a change, edit HTML, or run custom JavaScript on your website. 

3. With Add Elements button, you can add text, sticker, coupon code, button and/or countdown timer. Note that you can add these items only for once except for “Text” option. From the left menu, you can remove the elements easily with the Delete icon.

• When you add an element, you can easily position it by drag and drop. For countdown element, refer to Countdown Design & Style and Countdown Settings.
  Your title goes here

  Countdown elements have time labels such as Day, Hour, Min, Seconds. The text of these labels is dynamically translated based on the selected language in the Launch step. For instance, if you choose English, the campaign displays x hours, y mins, or z seconds to users on your website.

To configure the countdown element;

• Click the Design dropdown to select one of the ready-to-use designs for your countdown. You can click each to preview how it looks.
• Use the Separator dropdown to enable/disable separators in your design.

You can set Countdowns in Timer, Date, or Recurring format. Once set, the countdown will end at the specified date or time.

• Timer: Sets a time for the countdown to end (hours: minutes or hours:minutes: seconds format).
• Date: Sets a date and time for the countdown to end (days:hours: minutes or days:hours:minutes: seconds format).
• Recurring: Runs a countdown timer at a specified time every day.
• Show Seconds Toggle: Displays or hide seconds in the timer.
• Hide Days if They Reach Zero: Hides days when the timer counts for less than a day.
• Close on Finish: Hides the countdown when the timer stops.

4. Save it once you are ready and proceed with your campaign configurations.

Use Cases

This template is perfect to create urgency and push to purchase. You can:

• Create urgency by using a countdown timer either with a date, an hour or even a recurring one.
• Display a single message on top inline to give announcements to the users in pages you’ve selected.
• Distribute coupon codes for new users for specific categories, products or pages.
• Create an urgency in cart page with the coupon code and countdown timer to reduce cart abandonment rates.