Create a popup that displays a 24-Hour Sale countdown timer
You』ll learn how to create a popup that:
Adds urgencyIncreases sales
Design The Popup And Its Content
Go to Templates > Popups > Add New and give your new Popup a nameChoose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we』ll design our own.
Popup > Layout Tab
Width: 100vw, so it will display across 100% of the viewport widthHeight: CustomCustom Height: 300pxPosition > Vertical: TopOverlay: Slide to OffEntrance Animation: Fade InAnimation Duration: 2.2 seconds
Popup > Style Tab
Popup > Color: Slide to transparentPopup > Box Shadow: Click the reset arrow to turn off box shadow.Close Button > Vertical Position: 20Close Button > Horizontal Position: 4Size: 30
Popup > Advanced Tab
Padding: 30px for all.
Content
Click + to add a new section with 4 columns.Section > Layout > Content Position: MiddleSection > Style > Color: #e8e8e8Add a Heading widget, and type your title, and adjust font size and weight as desiredAdd a Button widget, and adjust text, color, and design elements as desiredAdd a Countdown widget, and stretch it out by dragging the columnCountdown > Content > Type: Evergreen TimerCountdown > Content > Hours: 23Countdown > Content > Minutes: 59Countdown > Content > Actions After Expire: Choose both Hide and New MessageCountdown > Content > Message: The the message you wish to display with the timer expiresCountdown > Style > Boxes > Background Color: Select a colorCountdown > Style > Content > Digits: Change color and typography as desiredCountdown > Style > Content > Label: Change color and typography as desiredAdd an Image widget, and choose a photo from your library.Image > Advanced > Margin: Set a minus margin on the bottom so the image will float slightly below the popup.Image > Advanced > Entrance Animation: Rotate In Down LeftImage > Advanced > Animation Duration: SlowImage > Advanced > Animation Delay (ms): 500
Set The Publish Options
Condition: Include > Entire SiteTriggers > On Page Load: Yes, Within 3 secondsAdvanced Rules > Hide For Logged In Users: Yes, All UsersAdvanced Rules > Show Up To X Times: Yes, 1 time
All done. Visit your page, and after 3 seconds, your Countdown popup will appear, creating a sense of urgency and an incentive to purchase a product.