Countdown Timer Element

About the Countdown Timer Element

The Countdown Timer element in GemPages lets you add a countdown clock to your page, counting down to a specific date and time. You can use this element on hero banners, product, or collection pages to create urgency, highlight limited-time offers, and promote events. Doing so can encourage visitors to take immediate action, such as making a purchase, claiming a special deal, or signing up for an event before time runs out.

How to Add the Countdown Timer on GemPages V7?

Step 1: From the GemPages Dashboard, access the Pages section, select an existing page, or create a new one.

Step 2: Use the search bar to find the element, then drag and drop it into the design area.

Step 3: Publish the page and check it live.

To access the Countdown Timer settings, click on the element. The left sidebar will display the Settings, where you can customize its behavior and appearance.

Configure Settings Tab

Countdown Settings

In this section, you can choose from three types of countdown timers:

• End at: Set a specific date and time for the countdown to end.
• Auto-renew: Choose a daily end time, which simultaneously resets the countdown each day.
• Manual: Start the countdown once a visitor lands on the page, and set how long it should run. You can also enable loop mode to restart the countdown automatically once it finishes.

Based on the type you select, enter the time in the field below. You can also enable the “Auto Hide when timeout” option to make the timer automatically disappear once it reaches zero rather than display a zero.

Label

This setting allows you to choose which time units to display on your countdown, such as weeks, days, hours, and minutes.

Redirect After Expired

If you want your page accessible only for a specific time, enter a redirect link here. After the time runs out, visitors will be sent to this new page.

You can either paste a URL directly into the field or use the pop-up link picker to select one of your pages. Additionally, you can choose whether the link opens in the current tab or a new one.

Item Settings

In this section, you can adjust the background color, column gap, vertical spacing, and padding of the items within the element.

Countdown States

Here, the border and corner of the element can be adjusted for both the normal state and when hovering.

Number Text

These settings allow you to select the numbers’ color, style, font, and font size.

Label Text

These settings allow you to select the label’s color, style, font, and size.

Alignment

You can determine how the timer is positioned on your page. There are three options to choose from left-aligned, centered, and right-aligned.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

And there you have it!