Why use the global timer

The countdown timer is one of the most powerful conversion levers in e-commerce. By displaying a visible deadline, you create a sense of urgency that compels visitors to act now rather than putting off their purchase. Studies show that a well-placed timer can increase conversion rates by 8 to 15%.

Scale Theme's global timer centralizes deadline management. Instead of configuring each countdown individually in every section of your store, you define a single date and time in the theme settings. Every Timer block across your site automatically syncs to this deadline, ensuring perfect consistency between your banner, product pages, popups, and any other section containing a countdown.

This centralized approach is especially valuable during recurring promotions (flash sales, Black Friday, seasonal sales). When the promotion changes, a single adjustment in the theme settings instantly updates all timers across your store, eliminating the risk of displaying inconsistent dates.

Configuration guide

Accessing the global timer settings

1. Open the Shopify theme editor (Online Store > Themes > Customize)
2. Click on Theme settings (gear icon at the bottom left)
3. Find the Timer settings section
4. Enter the date and time for your promotion deadline

Setting the deadline date and time

The global timer uses two fields to define the deadline:

For example, for a flash sale ending on March 15, 2026 at 8:00 PM, configure:

• Date: 2026-03-15
• Time: 20:00

Adding a Timer block to a section

Once the global date is set, you can add a Timer block to any compatible section:

1. Open the relevant section in the editor (banner, product page, countdown, etc.)
2. Click Add block
3. Select Timer
4. By default, the block uses the global date defined above
5. Customize the style and appearance to suit your needs

Global timer settings

The following settings are accessible under Theme settings > Timer settings:

These two values serve as the reference used by all Timer blocks configured in global mode.

Timer block settings

Each individual Timer block offers advanced settings to customize its appearance and behavior.

Content

Timer configuration

Display

Badge-specific options

The following settings are only visible when the Badge style is selected:

The 4 timer styles

Scale Theme offers four distinct visual styles for the countdown timer, each suited to a different context.

Cards style (default)

The Cards style displays each time unit (days, hours, minutes, seconds) in an individual card with the label underneath. It is the most readable and versatile style.

When to use it:

• On product pages to create urgency
• In dedicated countdown sections
• When you want a clear and structured look

Bold style

The Bold style displays the numbers in large type without cards, with labels underneath. The effect is more impactful and minimalist.

When to use it:

• In hero banners with background images
• When space is generous and the timer is the focal element
• For an impactful and modern look

Flip style

The Flip style reproduces the effect of a mechanical flip clock. Each digit change triggers an elegant rotation animation, like an airport departure board.

When to use it:

• For a premium and memorable look
• On product launch landing pages
• When you want to capture attention with a distinctive animation

Badge style

The Badge style is the most compact. It displays the countdown on a single line with abbreviated suffixes (2d 14h 30m 12s). Ideal for locations where space is limited.

When to use it:

• As a badge on product cards
• In announcement bars at the top of the page
• When space is limited and the timer needs to remain discreet
• Combined with an icon or a floating label

Global mode vs custom mode

Each Timer block has an "Override timer" option that determines the source of the deadline:

This flexibility allows you to:

• Keep the majority of timers synchronized to the global date (weekend flash sale)
• Have a specific timer with its own date (launch of a particular product)
• Manage multiple simultaneous promotions with different deadlines

What happens when the timer expires

When the deadline is reached, the behavior depends on the Timer block's configuration:

Display an end message

If the End text setting is filled in, the countdown is replaced by that custom text. For example: "Offer ended" or "See you at the next sale!"

Display 00:00:00

If no end text is defined, the countdown remains visible but displays 00 for each time unit. The CSS class timer--ended is added to the element, allowing a different style via CSS.

Automatic redirect

The timer supports a redirect option via the data-redirect-url attribute. When the timer expires, the visitor is automatically redirected to the specified URL (collection page, home page, etc.).

JavaScript event

On expiration, the timer emits a custom timer:end event that bubbles up through the DOM. Developers can listen for this event to trigger custom actions:

document.addEventListener('timer:end', function(event) {
  // Hide the section, show a message, etc.
});

Configuration examples

Weekend flash sale

Set the global timer to the end date and time of your weekend promotion. Add Timer blocks in:

• The hero banner on the home page (Bold or Flip style)
• The relevant product pages (Cards style, 80% size)
• A dedicated countdown section with a background image and CTA

Typical setup:

• Date: Sunday evening at 23:59
• Banner style: Bold, Accent 1 color
• Product style: Cards, 80% size, Foreground color
• End text: "Sale ended -- See you next promo weekend!"

Product launch

Use the global timer with the availability date of the new product. Visitors see the countdown everywhere on the site, building anticipation.

Typical setup:

• Date: launch day and time
• Style: Flip for a premium effect
• Heading: "Available in..."
• Text: "Be among the first to discover our new collection"

Seasonal offer with exceptions

During Black Friday, set the global date to Monday midnight (end of Cyber Monday). For a limited-edition product with an offer that ends earlier, enable the override on its Timer block and set a custom date.

Typical setup:

• Global timer: end of Cyber Monday
• Limited product timer: override enabled, date set to Friday evening
• Style: compact Badge for the limited product, Cards for everything else

Discreet timer on product card

Use the Badge style to display a small countdown directly on collection pages or product cards without taking up too much space.

Typical setup:

• Style: Badge
• Size: 70%
• Background: Tinted
• Icon: Fire or Clock
• Floating label: "Sale"

Technical details

Component architecture

The timer is implemented as a Web Component (<timer-element>) that loads via a dedicated script (js-timer.js). The script is loaded with defer only when a Timer block is present on the page, avoiding any performance impact on pages without a countdown.

Time remaining calculation

The timer calculates the difference between the current time (Date.now()) and the end date stored in the data-end-date attribute. The calculation runs every second via setInterval and is broken down into days, hours, minutes, and seconds.

Design Mode support

The timer fully supports the Shopify editor. When you modify settings in Design Mode, the component automatically reinitializes to reflect changes in real time, without requiring a page reload.

Accessibility

• Visual separators between time units carry the aria-hidden="true" attribute
• Each unit displays a text label (Days, Hours, Min, Sec)
• The Flip animation is disabled when prefers-reduced-motion is active

Best practices

• Set a real deadline: a timer that doesn't correspond to an actual promotion erodes trust. Customers can spot fake countdowns.
• Match the style to the context: Cards for product pages, Bold or Flip for hero sections, Badge for compact spaces.
• Don't overuse timers on a single page: one or two countdowns maximum. Beyond that, the urgency effect gets diluted.
• Prepare the end message: always fill in the End text field to avoid a countdown stuck at 00:00:00.
• Update regularly: after each promotion, change the global date to the next deadline or temporarily disable Timer blocks.
• Test timezones: if your customer base is international, verify that the end time matches your Shopify store's timezone.
• Use size strategically: a 150% timer in a hero banner grabs attention; a 70% badge timer stays discreet.

Next steps

• **Countdown Timer block** -- Detailed Timer block configuration for product pages
• **Countdown section** -- Full-screen section dedicated to the countdown with background image
• **Flash Sale guide** -- Complete guide to running a successful flash sale
• **Banner** -- Add a timer to your hero banner