Everything you need to set up and customize the Timer block — from choosing a target date and time zone to adjusting the display size, alignment, and background color of your countdown.
A countdown timer is a visual element that counts down to a specific date and time. It's commonly used to build excitement and urgency around upcoming events, product launches, flash sales, or limited-time promotions. Showing customers exactly how much time remains can encourage faster purchasing decisions.
In the Boardwalk theme, the Timer block displays a live countdown with four segments — Days, Hours, Minutes, and Seconds — that update automatically on the page without requiring a reload. You can set a precise target date down to the half hour, choose from over 30 time zones, and adjust for Daylight Saving Time. The block also includes appearance controls for size, alignment, and background color, making it easy to match the timer to any section design.
Follow these steps to add a countdown timer to any section of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the
page where you want to display a countdown timer using
the page selector dropdown at the top center of the
editor.
Click Add block inside any section that supports blocks. Choose Timer from the block list. The timer will appear on your page showing a placeholder countdown.
Click the Timer block in the sidebar to open its settings. Use the Year, Month, and Day dropdowns to choose the date your countdown should end.
Select the exact time of day your event begins or your sale ends using the Time dropdown (in 30-minute increments). Then pick the appropriate Time Zone so the countdown is accurate for your target audience.
Note: If your region observes Daylight Saving Time and it is currently in effect, enable the Apply Daylight Saving Time checkbox to shift the countdown by one hour. Remember to turn this off when clocks change back.
Under the Appearance heading, choose a display size, set the alignment, and pick a background color for the timer labels. These settings let you match the timer to the look of the section it sits in.
Click Save in the Theme Editor. Preview your page to verify the countdown is displaying the correct remaining time and that the layout looks as expected.
These settings are available when you click the Timer block in the Theme Editor sidebar. They control the countdown target, time zone handling, and visual appearance.
The year your countdown ends. Options range from
2026 to 2030.
The month your countdown ends. Select from January through December.
The day of the month your countdown ends. Select from 1 to 31.
The time of day your countdown ends, displayed in 12-hour format. Options are available in 30-minute increments from 12:00 AM through 11:30 PM.
The time zone used to calculate the countdown. Over 30 time zones are available, covering regions from Samoa (-11:00) to Tokelau (+13:00). Choose the time zone that matches your target audience or event location.
When enabled, shifts the target time by one hour to account for Daylight Saving Time. Turn this on if your selected time zone is currently observing DST, and remember to turn it off when clocks change back.
Starts a two-hour countdown from the moment the page loads, ignoring the date and time settings above. This is designed for demonstration purposes so you can preview how the timer looks and behaves without setting a future date.
Controls the overall display size of the countdown
timer, including the number digits and labels. Options:
Small, Medium, or
Large.
Sets the horizontal alignment of the timer within the
block. Options: Left,
Center, or Right.
Sets the background color of each countdown segment card (Days, Hours, Minutes, Seconds). Supports transparency, so you can layer it over images or colored section backgrounds with a frosted glass effect.
The Timer block comes with features that work automatically — no apps or custom code needed.
The timer updates every second in real time directly on the page — no reloads needed. Visitors always see the accurate time remaining.
Choose from over 30 worldwide time zones so your countdown is accurate regardless of where your event takes place or where your customers are located.
A single toggle adjusts the countdown by one hour to account for Daylight Saving Time, keeping your timer accurate during clock changes without the need to reconfigure the target date.
A built-in two-hour countdown mode lets you preview and test the timer without setting a future date. The countdown starts fresh each time the page loads.
The timer automatically adapts its font sizes and spacing based on the available container width. On mobile devices, the digits and labels scale up slightly so they remain easy to read on smaller screens.
Each countdown segment card uses a backdrop blur effect, creating a frosted glass appearance. Combined with a semi-transparent background color, this lets the timer sit beautifully over images and colored backgrounds.
Choose between Small, Medium, and Large display sizes. Each preset adjusts the digit font size, label size, card padding, and maximum width to maintain a balanced look at every scale.