Countdown for sales and promo codes for Site app

Add a countdown timer for a selected date and time to block pages in the “Site” app: for promotions, sales, promo codes, launches, and other events with a deadline.

The plugin adds a “Countdown Timer” element to the block page builder. It helps show visitors how much time is left until a promotion ends, a promo code expires, sales begin, a product launches, or another important event takes place.

What pages it is suitable for

Use the timer wherever it is important to emphasize a time limit:

• on a promotion or sale landing page;
• in a block with a promo code;
• in a banner, hero block, or separate section with a deadline;
• on the homepage of a website or online store;
• on a promo page for a seasonal offer;
• on a page for launching a new product or service;
• on an event registration page.

This way, visitors immediately see that the offer is limited in time, while the page looks more structured and convincing.

Flexible date and time settings

Specify the final date and time for the countdown. The timer will show how many days, hours, minutes, and seconds are left.

You can enable or disable the display of seconds. Days and hours are shown automatically so that the counter is not overloaded with unnecessary zeros.

Behavior after the countdown ends

Configure what happens after the timer finishes:

• show a text message, for example “Promotion ended”;
• leave the value at 00:00:00;
• hide the timer from the page.

This helps neatly handle the moment when a promotion, promo code, or event has already ended.

Several visual styles

Choose the timer style that matches your brand, page design, and the role of the block in the overall composition. All options are suitable for promotions, promo codes, launches, and other deadline-based offers — only the visual emphasis differs.

• Minimal style — for calm pages, strict designs, and dense blocks that already contain a lot of information, where the timer should take up minimal space.
• Seven-segment style — for digital or retro-tech aesthetics: visually resembles electronic clocks, scoreboards, and displays.
• Flip cards — for a more dynamic presentation when you need to make the timer stand out and add a sense of movement to the page.
• Circular indicators — for modern promo blocks, tech brands, and pages where the timer should work as a standalone visual accent.
• Text version — for light and concise sections where the timer should support the message without drawing all attention to itself.

Design settings without code

The timer design is configured directly in the block page editor.

You can customize:

• digit color;
• card or screen background;
• digit size;
• value labels;
• label color and size;
• separator type;
• separator blinking;
• element spacing, background, borders, and rounded corners;
• visibility on different devices;
• the element’s HTML ID.

The settings can use the colors and styles of the design theme, making it easier to fit the timer into the overall look of the website.

Labels and separators

The labels “Days”, “Hours”, “Minutes”, and “Seconds” can be enabled, disabled, or renamed. This is convenient if you need a shorter, stricter, or, on the contrary, more visitor-friendly version of the timer.

For separators, you can choose a colon, dot, slash, or use spacing between blocks. If seconds are disabled, the separator can blink softly.

When it is especially useful

• you need to show that a promotion is ending soon;
• you need to add a deadline to a promo code;
• you need to present a sale on the homepage;
• you need to create a countdown to the start of sales;
• you need to add a timer to a landing page without manual layout work.

How to use

1. Install the plugin via the “Installer” app.
2. Open a block page in the “Site” app.
3. Add the “Countdown Timer” element to the required block.
4. Specify the countdown end date and time.
5. Select the visual style of the timer.
6. Customize the colors, digit size, labels, separators, and behavior after the countdown ends.