12th December 2016

How to set up a countdown notification strip in BigCommerce

Final result of the notification strip with countdown
During the holiday season, it’s important to let your customers know key information, like when you’re sending out last shipments and when you’re shut. This reduces frustrations from customers not receiving their orders in time, and builds trust in your brand as you continue to provide open communication to your visitors.

In this article we will show you how to set up a persistent, visible notification strip at the top of your store header, with a countdown timer on any BigCommerce Blueprint based theme.

Please note that the Stencil theme framework is vastly different to the legacy template system, and is outside the scope of this article.

The first thing you need to know is that this will involve some coding in your theme files. You’ll need a basic understanding of how HTML and CSS works. If you’re not confident in editing code, we can help you. Check out our installed header strip and cutoff countdown addons. You’ll save £50 if you purchase both (the discount is applied automatically when you add both products to your cart).

If you’re happy with editing your templates, let’s get started!

Step 1 of 5. Add custom CSS to your template

Head over to your theme files by going to Storefront Design in your BigCommerce control panel and clicking My Themes.
My Themes location in the BigCommerce Control Panel

Providing you have a Blueprint based theme, on the right hand side of the screen under “Advanced Options” you will see a link to Edit HTML/CSS. Clicking this link will take us to the template editor.
Edit HTML/CSS files in the BigCommerce Control Panel

We now need to add CSS for the new header strip element we’ll be creating. In the left hand side of the editor window, locate and click custom.css under the “Style Sheets” heading.
Custom.css file in the BigCommerce Theme Editor

In the file that opens, add the following CSS to the end:

@media screen and (min-width: 481px) {
.header {
margin-top: 40px;
}
}
.notification-strip {
position: fixed;
top: 0;
width: 100%;
height: 32px;
margin: 0;
line-height: 32px;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #fff;
background: #ff4800;
z-index: 1000;
}
@media screen and (max-width: 480px) {
.notification-strip {
top: auto;
bottom: 0;
height: auto;
line-height: 20px;
font-size: 11px;
}
}

If you want to change the colour of the bar, edit the value of background: in the .notification-strip rules. Likewise to change the text colour, change the value of color:.

Please note that the first .header rule assumes that the header element on your site is wrapped in the “header” class. If the notification strip appears to overlay important elements in your site header, please use your browser inspector to check the correct class reference.

Once you’re happy with the styles, click Save in the top left of the editor.
BigCommerce template editor save button

Step 2 of 5. Add custom HTML to your Header template

The next step is to add the HTML to display our message in the site header. Still in the template editor, locate the file called Header.html under the “Panels” heading in the file list on the left. To find it quicker, click Recent Files at the top of the editor window and select default.html. When that file loads, look at the file list in the top left of the editor, under the “Files used by this template” heading. Header.html is usually the third file in this list.
BigCommerce template editor recent files

Other files used

On line 1 of Header.html, paste the following piece of HTML code:

<div class="notification-strip">
<span class="CountdownTimer"></span>
We will be shut between December 22nd and January 3rd.
</div>

The empty span tag with the “CountdownTimer” class will act as a placeholder for our last delivery countdown.

Change the “We will be shut … ” text to the message you would like to display to your visitors about your holiday closing times.

When you’re happy, click on Save in the top left of the screen.

Step 3 of 5. Upload the Javascript files we need

The last but one step is to add our countdown scripts. You will need to access your sites WebDAV folder for this next part – if you need to learn how to do this, start with this BigCommerce support article. If this is starting to go over your head, don’t forget we can set this all up for you with our installed header strip and cutoff countdown addons.

Inside the /template directory, you will need to create a new directory called Scripts (note the capital “S”) if it doesn’t already exist.

You now need to acquire two scripts to help us easily add a countdown. First, download the date.js library from their Google Code Archive. For more information about this script take a look at their website – datejs.com.

Next download Keith Wood’s jquery Countdown plugin from his website. Again, if you want to learn more about all the ways you can use this plugin, take some time to read the documentation on his site. From the ZIP file you downloaded, you will need to extract the files jquery.plugin.min.js and jquery.countdown.min.js.

Upload the three Javascript files into the Scripts directory you created through WebDAV.

Step 4 of 5. Reference the Javascript in your Footer HTML

We now just need to link and configure these scripts.

Back in the BigCommerce template editor, locate the Footer.html panel from the list of files on the left. Remember, you can find it quickly by reopening default.html in the recent files list, and finding the panel in the top left list.
Other files - footer location

At the end of the file, paste the following:

<script type="text/javascript" src="%%ASSET_Scripts/date.js%%"></script>
<script type="text/javascript" src="%%ASSET_Scripts/jquery.plugin.min.js%%"></script>
<script type="text/javascript" src="%%ASSET_Scripts/jquery.countdown.min.js%%"></script>
<script>
$(function () {
var targetCD = Date.parse('4pm December 21st');
$('.CountdownTimer').countdown({until: $.countdown.UTCDate(0, targetCD), layout: '{dn} days, {hn} hours, {mn} minutes until last orders are shipped.'});
});
</script>

Step 5 of 5. Configure the scripts

There are a few settings we can adjust here. To change the delivery cutoff, change the date and time between the quotes in var targetCD = Date.parse('4pm December 21st');. Because we’re using the date.js library, we can use natural language to define our target date, i.e. 4pm Dec 22 or 16:00 on December 22 or December 22nd 16:00. You can test a few strings for yourself on the date.js script website.

Next you can set up your timezone offset in this section of our code: until: $.countdown.UTCDate(0, targetCD). The “0” is the timezone offset, in hours, from GMT. As we’re based in the UK, this offset is left at 0. If you are 10 hours ahead, change the 0 to +10. If you are 5 hours behind GMT, change the 0 to -5. You code will then look like this until: $.countdown.UTCDate(+10, targetCD) or this until: $.countdown.UTCDate(-5, targetCD).

The last bit to change here is the countdown message. To do that, change the string between the quotes in this section of the code: layout: '{dn} days, {hn} hours, {mn} minutes until last orders are shipped.'. Not that the placeholders {dn}, {hn} and {mn} correspond to the countdown values, days, hours and minutes respectively.

When you’re happy with your settings, click Save in the top left of the screen.

Now you just need to check everything is working correctly. Head over to your website and take a look. You should have a nice new notification strip along the top of the screen, complete with your countdown.
Final result of the notification strip with countdown

When you want to remove this from your site, you can either work through the above steps and delete the code you added, or do the following:

In the rules for .notification-strip in custom.css, add display: none; and in Footer.html comment out the line starting with $('.CountdownTimer') by adding two forward slashes like so: //$('.CountdownTimer').

If you’re not comfortable making these changes to your site or run into any problems, don’t forget that we offer this setup as a service on our store. We’ll take care of the setup and hiding it for you afterwards. Check out our installed header strip and cutoff countdown addons. We offer a £50 discount for purchasing both modules (the discount is applied automatically when you add both products to your cart).

We hope that you found this article useful and wish you a successful trading period in the run up to the holidays.

Would you like to improve your conversion rate?

Get a free design analysis and report for your ecommerce site

Submit your details below to receive a free, tailored 12 point conversion rate optimisation report for your website:

Free, no obligation service. We will not share your details.

Thank you for your request!

One of our conversion rate optimisation team will be reviewing your site soon, and we will send your free  report in the next 5 working days.