All the content and appearance changes you make to your timer can be viewed in real-time at the top of the editor (that's what we call the page you create and edit timers in). To see how it actually appears on your website with your store design and other potentially-conflicting apps, you'll need to save it and select Preview from the actions menu on your dashboard (you'll find the complete instructions for previewing a timer here).
The first step in countdown timer creation is setting what you want your timer to say and where you want it to link to (if anywhere). You'll do that in the first box labelled Content.
Start by giving your timer a Name that we'll use to reference it in your dashboard. Your customers won't see this name anywhere, so feel free to get a little loose with your spelling and grammar.
Next, you'll set the timer Text (customers will be able to see this, so keep an eye out for typos and rogue punctuation). Short and sweet should be your modus operandi here. You want to get right to the point: something is happening on your store and it's going to start happening (or stop happening, come to think of it) as soon as your timer counts down to it. "Sale ends soon! 50% off everything" is an excellent if overly generous example.
Now you'll just need to decide whether you want to link your timer to a web page and if you want the entire bar to be clickable or if you want to use a button. We recommend using a button as they're more obviously clickable and far more enticing to click.
Put your Button label text in the box and add the Link you want to connect it to. If you want to make the entire timer bar clickable, just leave the "Button label" field empty and we'll hide the button for you.
Now for the important stuff—configuring your timer!
First, you'll want to make sure your Timezone is correct. We recommend matching it to the timezone in your Shopify settings, but you can switch it up if you want. The only thing you can't do is set it to your visitors' local timezone (unless you know for a fact that all of your customers reside in the Chile/Easter Island timezone, in which case, go for it!).
Next, you'll set the Start and End dates/times for your timer. By default, we choose the next :00 or :30 time from when you first open the editor for the start and three days after that for the end. You can choose whatever dates you like—just know that your timer will not appear on your website until the Start date/time has passed.
If the last section was the important stuff, this section is the fun stuff—customizing the look and feel of your timer.
We've got a bunch of style options that let you tailor your timer to your brand and store design. We've built in Color, Font, Background, Button, Countdown, and Time options that you can mix and match as you please. If there are any other options you'd like to see, please let us know!
The first thing to do is set the Theme for your store. This refers to the curated set of colors and backgrounds you can use for your timer. When you click on Theme, a dropdown will appear allowing you to preview your options. Pick your fave.
If none of the theme options strike your fancy, you can create your own using either the custom color pickers (they're labelled for the different components) or by clicking the down arrow and choosing a pre-fab palette. You'll find these options under Colors.
Next, you'll choose a font from the curated selection under the Font menu. All of the fonts offered in Countdown Sales Timer are found in the Google Fonts library, meaning they will be supported by any modern web browser. Choose the one that fits best with your site design and timer content.
You can also customize the background of your timer using the Background dropdown menu (intuitive, right?). This is a great opportunity to match your timer to your promotion. Holiday sale? Use the Snow option. Anniversary promotion? Throw some Confetti up there.
Note that not all backgrounds will show up with all colors. If the primary color of your timer is particularly light or dark, the contrast might not be enough for the pattern to display properly. Sorry about that.
Now it's time to choose the style of your Button. Play around with the options and see which one strikes your fancy.
One of the most impactful customizations you can make to your timer is the Clock style. Click through until you find one you like. Every choice is a good choice!
Finally, you can customize the Label style of your timer. This affects the language used below (or beside) your timer. By default, your timer is set to English (which displays as "DAY," "HRS," "MIN," and "SEC," but you can switch it to Chinese, Dutch, Spanish, German, or any other language.
If you want to use different labels—or if we got the labels wrong for your language—you can choose "Custom" and customize each label. If we got the labels wrong for your language, please let us know. Polyglots we are not!
There are a couple of other ways you can customize the appearance of your timer—namely, Size and Position.
The three Size options affect all aspects of the timer, from the font size to the size of the countdown elements to the total space the timer occupies on your site. Click through them to see their affect on your timer.
The Position dropdown lets you choose from three options: Top of website, Fixed to top of window, and Fixed to bottom of window. Unfortunately, you cannot see the effects of these options in the live preview and will have to manually preview it on your website later (here's how).
For now, know that the options are fairly self-explanatory, with Top of website placing the timer at the top of your site and Fixed to top of window and Fixed to bottom of window fixing it to the top or bottom of the browser so that it's always in view no matter where someone is on your website (if you're familiar with sticky navigation, it's a lot like that).
If you have a specific style in mind that we don't support and you're proficient in CSS, we've got just the thing for you: an in-line CSS editor!
Hit the Enable custom css to add your own styles checkbox and a little in-line code editor will appear where you can add your own styles and override ours. It's even set up to validate your CSS and help you out with your formatting as you type. So clever!
The changes you make with your custom CSS will appear in the live preview so you can make sure they work as intended. We're pretty proud of this feature. 😊
It's pretty common for merchants to want show their timers to appear only on particular pages and that's exactly what this option allows. If you don't discriminate and want your timer to show everywhere, skip the next two sections and jump straight to Ending.
You can show your timers everywhere, only on the home page or on specific pages. To target pages individually, paste their URLs into the Only appear on specific pages in my store fieldL. After entering your input, hit Enter or Return on your keyboard and you'll see it appear in a list below. Use the x's adjacent to each URL if you need to remove a targeted page.
Here are some examples of commonly selected pages:
- If you want to select your homepage only, you have to enter a forward slash: "/" (We know it seems silly. Just go with it.)
- If you want to select your collections list page (that's the place where all your collections are listed—duh) then enter "/collections"
- If you want to select a specific collection (let's say your timer is counting down to the end of a summer sale on barbecues and flip flops) then enter "/collections/barbecues" or "/collections/flipflops"
- If you want to select your collections list page and all of your collections pages, enter "/collections*" and the asterisks will target any page starting with the term "collections"
Remember that the minute you add any URL here, your timer will only show up there and nowhere else on your site.
It's also pretty common for merchants to want to hide popups on certain pages. For instance, you may not want to show your timer on your homepage because you've already got a free shipping or newsletter signup bar in place. Fear not! This Exclude pages option has you covered and works exactly like the Target pages option.
Just specify the pages where you don't want your timer to show (use the examples above for reference), and like magic, it won't show there! ✨
Want to show your timerss only to visitors in certain countries? Hey, guess what?! With Countdown Sales Timer, you can do that! It's super easy.
All you need to do is check that second option— Only display to visitors in specific countries—and enter the countries you want your timer to appear for. This field features fancy predictive searching, so if you're unsure of spelling, just enter the first letter and scroll through the options. Hit Enter after each country and it will add it to the list. Hit the grey "x" beside the country if you want to delete it.
If you're a real go-getter, you might come up with a timer that you want to show only to users on specific devices (like phones). With Countdown Sales Timer, you can show your timers to users on all devices, only on mobile devices, or only on desktops. Pretty sophisticated, right?
Just click the option that calls your name and you're done!
When your countdown is over, what do you expect to happen to your timer? Yeah, we don't know either, so we came up with a number of options for you to make sure it ends the way you want it to.
By default, your timer will simply disappear from your website (that's the Automatically turn timer off option you see at the top). If you turn it back on, it will appear on your site until the end of time—assuming you want to pay us for that long. 😂
You can instead choose to have it Automatically turn off after a specific number of days if you want to make visitors feel like they've just missed out on something big (hopefully, there will be another opportunity soon!). This option is also handy if you're announcing something new on your store that's still accessible after your countdown.
Finally, you can have it persist indefinitely, requiring you to manually turn it off when you're good and ready.
Those last two options may seem a little questionable to you, but let us explain the final option in the Editor: the Expiration message. With this option enabled, you can override your timer's text to display a different message. So if visitors just missed the end of a sale, you can keep your timer on for an extra week with a message telling them they just missed your flash sale, but to check back in a few weeks for the next one.
When you're satisfied with your timer, you'll want to publish it to your store. At the bottom of your window, on the right, you'll see a brilliant blue-gradient Done button. Before you press that, next to it you'll see a white button with a scroll.
If you click on the white button with the scroll, you will see either Published or Unpublished.
If you want your timer to show up right away on your store, hit Published, and if you still want to edit a few more things, you can choose Unpublished so it won't appear on your store, but will still stay within your app until you would like to use it!
That is how you create a timer with Countdown Sales Timer. If you feel like we're missing any features that would help you and other merchants with their stores, don't be shy! And if any of this article is confusing to you, please let us know as it's probably entirely our fault.