How to create a Countdown Timer Banner?

What is a Countdown Timer Banner?

A countdown timer banner is a type of banner that includes a message and a countdown clock to create a sense of urgency for customers.

Create a Countdown Timer Banner

Step 1: From the app’s dashboard, select the Banner module → Click the Create Banner button.

Step 2: Choose the Countdown Timer Banner option in the select banner type modal → Click the Select button.

Step 3: Design your banner.

You will see the banner creation interface in a max modal. Here, you will design your banner in the Design tab.

Content Settings: Set up the content that will be displayed on your banner, such as text and buttons.

Select Entire Banner Clickable to make the entire banner clickable. Add the URL where you want to direct buyers when they interact with the banner.

Selecting Open in New Tab means that clicking on the banner/link/button will open the link in a new tab.

If you check Add Close Button to Dismiss Banner, a close button (an "X") will appear in the top-right corner of the banner. Clicking this button will close the banner, but it will reappear when the page is reloaded.

Countdown Timer Settings: This is a separate collapsible section to set up the countdown timer.

Choose the end time for the countdown and specify the action to be taken when the timer runs out. You can also set the colors for the countdown timer.

Customize the content related to days, hours, minutes, and seconds for the countdown here.

Position Settings: Choose where the banner will be displayed on your online store.

The banner can appear at the Top of Page, Bottom of Page, or in a Custom Position.

For more details, see the article: How to use a Custom position for a Banner?

You can also select which devices will display the banner.

Style: Customize the banner’s colors, fonts, and other design elements.

You can style the text with various font options.

Choose the background style: Color, Gradient, or Image.

Use Background Padding to adjust the banner’s height, and Background Opacity to set the transparency level.

Step 4: Set conditions for the banner.

In the banner creation interface (max modal) → Click the Conditions tab.

Here, you can set various conditions for your banner, including display conditions, customer conditions, product page conditions, scheduling, and country-specific conditions.

For more details, see the article: How to Setup Conditions for a Banner?

Step 5: Preview the banner.

You can preview how your banner will appear in the Preview area on the right.

Select different devices to check if the banner displays correctly.

Step 6: Finally, click Save to save your banner and check the results on your storefront.