How to Create a Countdown Popup to Skyrocket Your Holiday Sales

Do you want more sales this holiday? Adding a countdown timer to your site is a proven way to boost online sales. In this tutorial, we’ll share how to create a holiday sales timer with OptinMonster.

If you have a holiday promotion coming up, you need to try adding a countdown timer to your site.

We’ve tested adding an animated countdown timer on several of our own sites, including OptinMonster, WPForms and Envira Gallery. The results have been astonishing… even to us!

countdown-timer

Many of you saw our timer and requested this feature in OptinMonster, so we added it. Now, adding a countdown timer to your site is just a few clicks away.

Are you ready to add more urgency to your holiday promotion and see a big boost in sales? Let’s dive into the 5 simple steps to set up a holiday timer in OptinMonster…

Step 1: Create a Floating Bar using the Countdown Template

First, go to your OptinMonster dashboard and create a new optin by clicking on the green Create Campaign button.

Select the Floating Bar campaign type.

Next, select the Countdown template by hovering over it and clicking on the blue Use Template button.

Then, enter a title for your holiday sales timer (we’ll call ours “Thanksgiving Sale”) and select your website from the dropdown menu. Click the blue Start Building button to enter the campaign builder.

When building your campaign, don’t forget to save frequently so you don’t lose all of your hard work! The Save button is in the top right corner of the builder.

Step 2: Update the Display Settings

The default display settings for the optin have it appearing at the bottom of your site. To change that to the top of your site, click Display Settings and toggle Load Floating Bar at Top of Page to the On position. While we’re at it, let’s go ahead and remove the Powered By Link just to save some screen space.

Step 3: Set the End Date/Time for Your Holiday Sale

Click directly on the countdown clock in the live preview to bring up the editing tools to the left. Make sure the Type is set to Static so every visitor will see the exact same countdown when they arrive at your site.

Now, go ahead and enter the date and time settings for when your holiday sale is scheduled to end and how to display the information. All changes will appear live in the preview as you make them.

Step 3: Customize the Copy & Design

Next, you can customize the floating bar to look the way you want, and reflect your holiday offer.

We’ll change our timer background color and button to orange (hex code #B54730), offer text to say “Thanksgiving Sale: Get 25% Off Any Order,” and button text to “Get Offer.”

Design the Countdown Timer

Let’s start by changing the countdown timer section. To do that, we need to edit the column by hovering over the “Sale Ends In” text. Two small, gray icons will appear. Click the one that looks like a gear to edit the settings and styling of the column.

Here you can change the column background to match the other backgrounds.

Design Offer Text

Now, let’s change our offer text. To do that, click on the offer text in the live preview to bring up the editing tools.

Change the text to “Thanksgiving Sale: Get 25% Off Any Order!” If you want to customize your fonts or colors, you can do that too.

Design Optin Button

Next, let’s make our Sign Up button color match our countdown timer color and 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 styling.

Design the Success View

Now that users can optin to get access to the coupon code, we need to set up a success view so we can provide them the coupon code once they’ve completed their signup.

To do that, click on the Success tab.

Following the steps above, make these changes:

  • Countdown Timer
    • Background color changed to hex code #B54730
  • Offer text
    • Centered
    • 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:

Step 4: Connect an Email Service Provider

In order to collect email addresses, you’ll need to connect your optin to your email service provider. OptinMonster integrates with all of them. We’ll show you how to connect to Constant Contact here as an example.

Go to the Integrations tab.

Click Add New Integration and select Constant Contact from the Email Provider dropdown list.

A new window will appear for your Constant Contact login credentials. Enter your Constant Contact login credentials and click the Log In button.

constant contact login

Once you’re logged in, Constant Contact will ask you to allow access to OptinMonster. Click the Allow button to continue.

allow constant contact access

Once the window closes, enter a unique label for your Constant Contact account and select the Connect with Constant Contact button.

At this point, OptinMonster fetches your email lists. Choose an email list you want users to subscribe to.

Don’t forget to Save your campaign!

Step 5: Set the Display Rules

Once you’re happy with how your holiday sales timer looks, now it’s time to set the display rules.

Go to the Display Rules tab and set your floating bar to be displayed on or before a certain date. In our case, we want the timer to be displayed on or before Thanksgiving, so we’ll use 11/22/18.

Next, we need to set who should see this campaign. We would like our holiday timer to be displayed on the “shop” page, so 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 holiday timer!

(Note: if you have a lot of different shop pages and you’d like to display the holiday timer on all of them, simply set it to show when the URL path contains shop.)

Show that Save button a little love before we move on.

Step 5: Publish Your Campaign

Now all that’s left to do is publish your campaign! Go to the Publish tab and toggle the Status to Live. Then, Save the campaign.

Going live on WordPress is super easy with the OptinMonster WordPress connector plugin.

Once you have the plugin installed, go to your WordPress dashboard and click the OptinMonster icon. You should see a list of all your optins. If you don’t see the optin you’ve just created, click Refresh Campaigns, and it’ll appear.

Click the Go Live button next to the campaign name to make the campaign live on your site.

Easy peasy.

Don’t use WordPress?

Publish your optin on your Shopify store with our easy to follow instructions. Or, embed it on any website.

Your turn! Get started with OptinMonster today to create a countdown timer for those holiday promotions that are coming up fast.

If you enjoyed this tutorial, you may also want to check out 22 OptinMonster Hacks to Boost Your Conversions.

Jacinda Santora
Jacinda Santora is a writer specializing in ecommerce and growth marketing. She prides herself on her ability to make complicated things easier. When she isn't writing you can find her daydreaming about campervans, drinking coffee, and listening to podcasts.