{"id":113730,"date":"2025-04-09T11:00:00","date_gmt":"2025-04-09T15:00:00","guid":{"rendered":"https:\/\/optinmonster.com\/?p=113730"},"modified":"2025-04-10T08:18:23","modified_gmt":"2025-04-10T12:18:23","slug":"how-to-create-a-countdown-popup-to-skyrocket-your-holiday-sales","status":"publish","type":"post","link":"https:\/\/optinmonster.com\/how-to-create-a-countdown-popup-to-skyrocket-your-holiday-sales\/","title":{"rendered":"How to Create a Countdown Timer Popup to Skyrocket Sales"},"content":{"rendered":"\n

Do you want more sales this holiday (or ANY day)? Adding a countdown timer popup to your site is a proven way to boost online sales. In this tutorial, we’ll share how to create a countdown popup with OptinMonster.<\/p>\n\n\n\n

If you have a sales promotion<\/a> coming up, you simply must add a countdown timer to your site.<\/p>\n\n\n\n

We’ve tested adding an animated countdown timer on several of our own sites, including OptinMonster and WPForms<\/a>. The results have been astonishing, even to us!<\/p>\n\n\n\n

\"countdown-timer\"<\/figure>\n\n\n\n

If you’re ready to add more urgency to your holiday promotion or flash sale<\/a> and see a big boost to your bottom line, a countdown timer is the easiest way to make it happen.<\/p>\n\n\n\n

Let’s dive into the 5 simple steps to set up a countdown timer popup in OptinMonster.<\/p>\n\n\n\n

Step 1: Create a Floating Bar Optin<\/h3>\n\n\n\n

First, go to your OptinMonster dashboard<\/a> and create a new optin by clicking on the green Create New Campaign<\/strong> button.<\/p>\n\n\n\n

\"Create<\/figure>\n\n\n\n

Select the Floating Bar<\/strong> campaign type.<\/p>\n\n\n\n

\"select<\/figure>\n\n\n\n

Next, select the Countdown<\/strong> template by hovering over it and clicking on the blue Use Template <\/strong>button.<\/p>\n\n\n\n

\"select<\/figure>\n\n\n\n

You can also add a countdown popup to any of OptinMonster’s campaign templates with a simple drag and drop.<\/p>\n\n\n\n

Then, enter a name for your sales timer (we’re creating a holiday sales timer, so we’ll call ours “Thanksgiving Sale”) and select your website from the dropdown menu. Click the Start Building<\/strong> button to enter the campaign builder.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

When building your campaign, don’t forget to save frequently. The Save button<\/strong> is in the top right corner of the builder.<\/p>\n\n\n\n

\"click<\/figure>\n\n\n\n

Step 2: Update the Floating Settings<\/h3>\n\n\n\n

The default display settings for the optin have it set to show up at the bottom of your site.<\/p>\n\n\n\n

To change that to the top of your site, click Floating Settings<\/strong> and toggle Load Floating Bar at Top of Page<\/strong> to the On<\/strong> position:<\/p>\n\n\n\n

\"load<\/figure>\n\n\n\n

Now you’re ready to modify the dates and times of your floating bar countdown timer.<\/p>\n\n\n\n

Step 3: Set the End Date\/Time<\/h3>\n\n\n\n

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

\"\"<\/figure>\n\n\n\n

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

\"\"<\/figure>\n\n\n\n

Step 3: Customize the Copy & Design<\/h3>\n\n\n\n

Next, you can customize the floating bar to look the way you want, and reflect your offer.<\/p>\n\n\n\n

We’re changing our timer 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.”<\/p>\n\n\n\n

Design the Countdown Timer Popup<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here you can change the column background to match the other backgrounds.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Design Offer Text<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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

\"\"<\/figure>\n\n\n\n

Design Optin Button<\/strong><\/p>\n\n\n\n

Next, let’s make our Sign Up<\/strong> button color match our countdown timer color and change the Button Text<\/strong>. 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<\/strong> to edit the button styling.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Design the Success View<\/strong><\/p>\n\n\n\n

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

To do that, click on the Success tab<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Following the steps above, make these changes:<\/p>\n\n\n\n