How to create a Hello Bar countdown popup

Create a popup window showing a 24 hour sale countdown timer

You will learn how to create a pop-up window that:

1. Add urgency
2. Increase sales

Design the pop-up window and its content

1. Go Templates> Popups> Add new and give your new popup window a name
2. Choose a predesigned popup template or close the library overlay and design your popup from scratch. For this example, we will design our own.

Popup Window> Design Tab

1. Width: 100vw, so it will show in the viewport width 100%
2. Height: Personalized
3. Custom height: 300 px
4. Position> Vertical: Upper part
5. Cover: Slide to Off
6. Entrance animation: Merge
7. Animation duration: 2.2 seconds

Pop-up window> Style tab

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

Popup> Advanced tab

Filling: 30px for everyone.

Content

1. Click + to add a new section with 4 columns.
2. Section> Design> Content position: Means, medium
3. Section> Style> Colour: # e8e8e8
4. Add a Vault widget, write your title and adjust font size and weight as you like
5. Add a Button widget and adjust text, color and design elements as you like
6. Add a Countdown widget and stretch it 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 expiration: Choose Hide and New message
11. Countdown> Content> Message: The message you want to display with the timer expires
12. Countdown> Style> Boxes> Background color: Select a color
13. Countdown> Style> Content> Digits: Change the color and font as you wish
14. Countdown> Style> Content> Label: Change the color and font as you wish
15. Add a Image widget and choose a photo from your library.
16. Image> Advanced> Margin: Set a negative margin at the bottom so that the image floats slightly below the pop-up window.
17. Image> Advanced> Entrance animation: Rotate down left
18. Image> Advanced> Animation duration: Slow
19. Image> Advanced> Animation delay (ms): 500

Set publishing options

1. Condition: Include> Entire Site
2. Triggers> Load on Page: Yes, in 3 seconds
3. Advanced rules> Hide from logged in users: Yes, all users
4. Advanced rules> Show up to X times: Yes, 1 time

All ready. Visit your page and after 3 seconds the Countdown popup will appear, creating a sense of urgency and an incentive to purchase a product.