How To Create A Hello Bar Countdown Popup

Create a popup that displays a 24-Hour Sale countdown timer

You’ll learn how to create a popup that:

1. Adds urgency
2. Increases sales

Design The Popup And Its Content

1. Go to Templates > Popups > Add New and give your new Popup a name
2. Choose 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

1. Width: 100vw, so it will display across 100% of the viewport width
2. Height: Custom
3. Custom Height: 300px
4. Position > Vertical: Top
5. Overlay: Slide to Off
6. Entrance Animation: Fade In
7. Animation Duration: 2.2 seconds

Popup > Style Tab

1. Popup > Color: Slide to transparent
2. Popup > Box Shadow: Click the reset arrow to turn off box shadow.
3. Close Button > Vertical Position: 20
4. Close Button > Horizontal Position: 4
5. Size: 30

Popup > Advanced Tab

Padding: 30px for all.

Content

1. Click + to add a new section with 4 columns.
2. Section > Layout > Content Position: Middle
3. Section > Style > Color: #e8e8e8
4. Add a Heading widget, and type your title, and adjust font size and weight as desired
5. Add a Button widget, and adjust text, color, and design elements as desired
6. Add a Countdown widget, and stretch it out by dragging the column
7. Countdown > Content > Type: Evergreen Timer
8. Countdown > Content > Hours: 23
9. Countdown > Content > Minutes: 59
10. Countdown > Content > Actions After Expire: Choose both Hide and New Message
11. Countdown > Content > Message: The the message you wish to display with the timer expires
12. Countdown > Style > Boxes > Background Color: Select a color
13. Countdown > Style > Content > Digits: Change color and typography  as desired
14. Countdown > Style > Content > Label: Change color and typography as desired
15. Add an Image widget, and choose a photo from your library.
16. Image > Advanced > Margin: Set a minus margin on the bottom so the image will float slightly below the popup.
17. Image > Advanced > Entrance Animation: Rotate In Down Left
18. Image > Advanced > Animation Duration: Slow
19. Image > Advanced > Animation Delay (ms): 500

Set The Publish Options

1. Condition: Include > Entire Site
2. Triggers > On Page Load: Yes, Within 3 seconds
3. Advanced Rules > Hide For Logged In Users: Yes, All Users
4. Advanced 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.