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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.