Do you want to generate more sales this holiday (or any other day from your online store)? One way to achieve this is by adding a countdown timer popup to your website. Countdown timer popup is a proven method that’s being used by so many websites to boost their online sales.
In this blog post, I’ll show you how to create a countdown timer popup with the help of OptinMonster.
If you have a store, you mostly are trying out different sales strategies to maximize revenue. So if you have a sales promotion coming up, you just simply can add a countdown timer popup to your website to see the magic that happens.
Even though it’s a psychological trigger, it converts like crazy.
Here’s why you should add a countdown timer popup to your website. It is a ready to add more urgency type of thing to your holiday promotion or flash sale and see a big boost in your sales, you’ll want to add a countdown timer. It is the easiest way to squeeze more revenue out of your visitors.
Let’s get into the 5 simple steps to set up a countdown timer popup within OptinMonster.
Step 1: Create a Floating Bar Optin.
In your first step, please go to your OptinMonster dashboard and create a new optin by clicking on the green Create Campaign button.
This is where we start our countdown timer popup campaign.
Next, you’ll have to select the Floating Bar campaign type.
Because all these types of campaigns usually have a floating countdown timer on the top of their website or at the bottom.
Then, you’ll have to select the Countdown template by hovering over it and clicking on the blue Use Template button. This selects the template that you want.
Next, go ahead and enter a name for the sales timer (in this tutorial we’re focusing on creating a holiday sales timer, so let’s call this one the “Thanksgiving Sale”) and select the website from the dropdown menu. Then, click the Start Building button to enter the campaign builder.
Refer to the image below if you want to follow along.
Note: Whenever you’re building a campaign, you mustn’t forget to save it frequently. Things might disappear if something happens. So hit the Save button that’s right on the top right corner of the builder.
See image below for reference.
Step 2: Set the Display Settings.
Our next immediate step is to set our display settings.
Generally, the default display settings for the countdown timer popup is set to show up at the bottom of your website.
So you’ll want to change that to show up on the top of your website, so in order to do that you should click Display Settings and toggle Load Floating Bar at Top of Page to the On position.
Now you can also go ahead and remove the Powered By Link just to save some screen space. (Refer below image to understand).
Step 3: Set the End Date/Time.
Our next step is to set the end date/time for your campaign.
So now, you can click directly on the countdown clock in the live preview to bring up the editing tools to the left. Set the Type to Static so every visitor will see the exact same countdown when they arrive on your website.
Then, go ahead and enter the date and time settings for when your sale is scheduled to end and how to display the information. As you update them you’ll start to see all changes will appear live in the preview as and when you make them.
Step 3: Customize the Copy & Design.
For our next step, we need to customize the text that’s on your countdown timer popup and the design. So in order to customize the countdown timer popup (floating bar) to look the way you want, and reflect your offer you can click on it and follow along.
We’ll start by changing our timer’s background color and button to orange (hex code #B54730), and changing our offer text to say “Thanksgiving Sale: Get 25% Off Any Order,” and the button text to “Get Offer.”
Hope you were able to follow along till here.
Design the Countdown Timer Popup
Now, let’s start by changing the countdown timer section. To do that, we’ll have to edit the column by hovering over the “Sale Ends In” text. Two small gray icons will appear. If you click the one that looks like a gear you can edit the settings and style of the column.
See image below to know what we mean.
You can also change the column background to match the other backgrounds that you may have on your website.
Design Offer Text.
We also have to change the offer text. So let’s change our offer text now. To do that, you’ll have to click on the offer text in the live preview to bring up the editing tools.
Then go ahead and change the text to “Thanksgiving Sale: Get 25% Off Any Order!”
If you want to customize your fonts or colors, you can do that as well. Design needs are subject to your choice of colors and fonts.
Design Optin Button.
Now, let’s make sure that our Sign Up button color matches our countdown timer color and then change the Button Text. To do that, click directly on the button in the live preview to bring up the editing tools and then click on the Button tab to edit the button styles.
Are you able to follow along? If you said yes, then good!
(Refer to the images on this page to do it right).
Design the Success View.
Once the visitor signs up, you’ll have to show a message on the next page. So now these visitors can opt-in countdown timer popup to get access to the coupon code that you’re offering for this sales campaign.
Now you need to set up a success view so you can provide them the coupon code once they’ve completed their signup.
To do that, click on the Success tab.
Following the steps here to make all these changes:
- Countdown Timer
- Background color changed to hex code #B54730
- Offer text
- Changed to “Here’s your 25% off discount code.”
- Discount code
- Text changed to “THANKS25”
- Background color set to hex code #F1B930
Here’s what your changes will look like after you’ve applied these changes.
Step 4: Connect an Email Service Provider.
In our next step we’ll need to connect an email service provider to collect emails. So, in order to collect email addresses, you’ll need to connect your optin to your email service provider. OptinMonster integrates with all of them.
Go to the Integrations tab. This way you can connect your own Email Service Provider.
I use ConvertKit because it has been good to me so far than all the other email service providers that I’ve ever tried. I’ve tried over 7 of them.
Step 5: Set the Display Rules.
In our next step we’ll set the display rules.
Go to the Display Rules tab and click on the floating bar and set it to be displayed on or before a certain date. In this example, we’ve used set the countdown timer popup to be displayed on or before Thanksgiving.
The dates used in the image below are examples.
Then, let’s set up who needs to see this campaign. Make sure that your countdown timer popup displays on the “shop” page, so you can set the second condition to content URL path exactly matches shop.
Now, whenever a visitor lands on our https://domain.com/shop page, they will see the countdown timer popup!
(Note: If you have a lot of different shop pages and you’d like to display the countdown timer popup on all of them, simply set it to show when the URL path contains shop.)
Now you can go ahead and hit the Save button.
Step 5: Publish Your Countdown Popup.
Now that we’ve done everything you can go ahead and publish the campaign! Go to the Publish tab and toggle the Status to Live. Then, hit on the Save tab to save the campaign.
Going live on WordPress is super easy with the OptinMonster WordPress connector plugin. So, please use that even if you don’t have a store on Shopify.
Once you have the plugin installed, go to your WordPress dashboard and click the OptinMonster icon. You’ll be able to see a list of all your opt-ins. If you don’t see the optin you’ve just created, click Refresh Campaigns, and it’ll appear.