About
An announcement timer is a promotional banner that pairs a short marketing message with a live countdown clock. It creates a sense of urgency by showing visitors exactly how much time is left before a sale ends, a product launches, or a special offer expires.
In the Boardwalk theme, the Announcement Timer block is designed to sit inside the Announcement Bar section at the top of your store. It displays a main text line (such as "Seasonal Sale"), an optional secondary text line (such as "Up to 50% OFF • Ends in"), and a countdown clock showing days, hours, minutes, and seconds. The timer counts down in real time on the visitor's screen, and the layout automatically adapts to fit smaller mobile screens.
How to Set Up the Announcement Timer
Follow these steps to add a countdown timer to your announcement bar in the Boardwalk theme.
Open the Theme Editor
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. The Theme Editor
will open with your storefront preview.
Locate the Announcement Bar Section
In the Theme Editor sidebar, look for the Announcement bar section near the top of the section list. Click it to expand its blocks. If you don't have an Announcement bar section yet, click Add section in the header area and choose Announcement bar.
Add the Announcement Timer Block
Inside the Announcement bar section, click Add block and select Announcement with timer from the list. The block will appear in the sidebar and a preview of the timer will show on your storefront.
Write Your Announcement Text
Click the new Announcement with timer block in the sidebar. In the Text Content area, fill in the Main announcement text (e.g., "Seasonal Sale") and optionally the Sub announcement text (e.g., "Up to 50% OFF • Ends in"). These appear to the left of the countdown clock.
Set the Countdown Date and Time
Under the Countdown Timer heading, choose the Year, Month, Day, and Time that your promotion ends. Then select the matching Time Zone so the countdown is accurate for your target audience.
Note: If your region currently observes Daylight Saving Time, turn on Apply Daylight Saving Time so the countdown adjusts by one hour automatically. Remember to turn this off again when Daylight Saving Time ends.
Preview the Countdown (Optional)
If you want to see the timer in action before your promotion date arrives, turn on Enable 2 hour countdown. This starts a temporary two-hour countdown from the moment the page loads, which is useful for checking that the timer looks and behaves the way you expect. Make sure to turn this setting off before your store goes live.
Save and Preview
Click Save in the Theme Editor. Preview your store to confirm the announcement text and countdown clock display correctly. Check the timer on both a desktop browser and a mobile device to make sure the responsive layout looks good.
Block Settings
These settings are available when you click the Announcement with timer block in the Theme Editor sidebar. They are organized into two groups: Text Content and Countdown Timer.
Text Content
The primary headline displayed in the announcement banner. This text appears in bold, uppercase styling and is the most prominent element alongside the countdown clock. Use it for your promotion name or key message (e.g., "Seasonal Sale" or "Black Friday").
A secondary line of text that appears below the main announcement text in a smaller, lighter style. Use it for supporting details like a discount amount or a short call to action (e.g., "Up to 50% OFF • Ends in"). Leave this blank to show only the main text and timer.
Countdown Timer
The year the countdown ends. Options range from 2026 to 2030.
The month the countdown ends. Choose from January through December.
The day of the month the countdown ends. Choose from 1 to 31.
The specific time the countdown ends, in 30-minute intervals from 12:00 AM through 11:30 PM.
The time zone used to calculate the countdown. This should match the time zone of the end date and time you entered above. Choose from over 30 global time zones, including major regions like Pacific US & CA, Eastern US & CA, GMT London, Central Europe, Tokyo, and Sydney.
When turned on, the countdown end time shifts 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 DST ends.
Starts a temporary two-hour countdown from the moment the page is loaded, ignoring the date and time settings above. This is designed for demonstration purposes so you can preview how the timer looks and behaves. Make sure to turn this off before publishing your store.
How It Works
Real-Time Countdown
The timer updates every second on the visitor's screen without needing a page reload. It displays four units — Days, Hours, Minutes, and Seconds — so customers can see exactly how much time remains.
Responsive Layout
On desktop, the announcement text and countdown clock sit side by side in a single row. On mobile devices, the layout adjusts automatically — the text and timer scale down to fit smaller screens while remaining easy to read. On very small screens (below 480px), the text area is given extra room so it doesn't get crowded by the timer.
Automatic Font Scaling
The block's font sizes on mobile are calculated automatically based on the body font size set in your Announcement Bar section settings. This means text and timer digits stay proportional and readable without any extra configuration on your part.
Time Zone Handling
The countdown is calculated based on the specific time zone you select — not the visitor's local time zone. This ensures all visitors see the same end time regardless of where they are browsing from.
Tip: If you're running a promotion that
should end at midnight in your own time zone, set the
Time to 12:00 AM and
choose the day after the last day of the sale.
For example, for a sale ending on January 15, set the
date to January 16 at 12:00 AM.