Free Shopify Countdown Timer for Black Friday

Every Black Friday sale needs a deadline on the site, and most Shopify stores get it from a countdown timer app. I built a free Shopify countdown timer with Claude Code instead, in about 15 minutes. It's a sticky sale banner with a live countdown that turns itself on and off on schedule, and it's one section file you edit in the theme editor. No app and no monthly fee. The code is free on GitHub.

Here's the full build:

What the Banner Does

Counts down in days, hours and minutes. Seconds are a checkbox if you want them.
Runs itself. Set a start and end time and the banner appears when the sale starts and hides when it ends. Nobody has to remember to turn it off at midnight.
Shows one deadline to everyone. A shopper in California and one in New York see the same end time, not two different ones.
Sticks to the top of the screen. Your theme's sticky header sits right below it instead of covering it.
Scrolls if you want it to. One checkbox slides the offer and countdown across the bar, with a speed setting.
Is clickable everywhere. Add a link and the whole banner goes to it, not just the button.
Has separate desktop and mobile text sizes. You can go big on desktop without the banner turning into a tall block on phones.

Everything is a setting in the theme editor: message, dates, colors, labels, padding. When the next sale comes around you change the dates and the copy, and that's it.

The Build

I started with one line: build a countdown timer for a Black Friday Cyber Monday sale, and what do you need to start? Claude Code came back with setup questions and I answered them in plain English:

Announcement bar at the top, yes, should be sticky. Start today, end the day after. EST. Hide it when it ends. 25% off. Red banner, white copy. Days, hours and minutes, no seconds. And build it so it's completely reusable. We're giving it away on GitHub, so make it compatible with as many themes as possible and editable in the theme editor.

It pushed the section to a demo store and the first version worked: a red bar reading "Black Friday Sale, 25% off" with the countdown running. In the theme editor it already had start and end dates, a link and button, and the option to show seconds. From there it was tweaks, each one a sentence:

"Can we add an option to make the banner scrolling? Give it a checkbox." Added, with a speed setting. It pauses on hover and turns itself off for shoppers who have reduced motion set on their device.
"Give it an option for mobile font size." I hadn't checked mobile, and at desktop size the text was too big for a phone. Now there are two sizes.
"If there's a link attached to the button, make the whole banner clickable." A scrolling button is hard to tap. Now the full bar is the link, and without a link it just keeps counting down.

That's the same loop we used for the shoppable lookbook section: describe the feature, look at it on desktop and mobile, say what's off, check the fix.

The Details That Matter on a Sale Banner

A countdown that's a little wrong is worse than no countdown. These are the details I'd check in any timer, app or not:

It never says "0 Min" with time left. Without seconds, minutes round up.
The last day reads cleanly. The days unit drops off in the final 24 hours, so it says "Ends in 05 Hrs 12 Min" instead of "00 Days".
The timezone is right for the end date. Pick the version in effect when the sale ends. For BFCM in the US that's standard time (EST, CST, PST), since daylight saving ends in early November.
You can still edit it when it's hidden. In the theme editor the banner stays visible, with a note underneath when customers can't see it (not started yet, or already ended).

Running BFCM emails to the same deadline? We plan and build them for DTC brands on Klaviyo.

Install It on Your Store

Installing the Shopify countdown timer takes about three minutes. Try it on a duplicate of your theme first (Online Store > Themes, click ..., then Duplicate).

No code, in the Shopify admin:

Copy sections/countdown-banner.liquid from the GitHub repo.
In Online Store > Themes > Edit code, add a new section named countdown-banner, delete the starter code and paste it in.
In Customize, click Add section in the Header area and pick Countdown banner.
Drag it to the top of the header area, set your dates, message and colors, and save.

With Claude Code or Cursor: open your theme folder, point it at the repo and say "install this in my theme." The repo's AGENTS.md tells it how the section works, so it can make changes without breaking the banner in other themes.

It was built and tested on Shopify's Horizon theme, has built-in support for Dawn and Dawn-based themes, and works on any Online Store 2.0 theme.

Change It with Claude

The section is one commented file, so you can change it with Claude Code, or paste it into Claude and paste the answer back into your theme's code editor. Some prompts that work:

"Show a different message in the last 24 hours: LAST CHANCE: 25% OFF ENDS TONIGHT."
"Add a second phase: count down to Black Friday first ('Sale starts in'), then count down to Cyber Monday ('Sale ends in')."
"Add an optional discount code to the banner with a click-to-copy button."
"Make the countdown numbers look like flip-clock tiles."
"When the sale ends, swap to a 'Sale extended' message for 24 hours instead of hiding."

If your theme's sticky header covers the banner when you scroll, tell Claude which theme you're on and what you see. A screenshot helps. The fix is usually one CSS rule, and the README explains which one.

The same workflow goes past sections. We use it to build Shopify landing pages from Figma designs, with Claude Code working inside the theme repo, and to build a free shipping bar with tiered rewards in the cart drawer.

Make the Banner Match Your Emails

For the brands we work with, the last-chance emails and texts are some of the biggest sends of the year. The banner should back them up. When the email says the sale ends Monday at midnight, the site should say the same thing in the same words, counting down to the same minute. Set the banner's end time from your send calendar, not the other way around. If you draft those emails with Claude Code too, here's how we set up Claude Code for writing ecommerce emails.

The list those emails go to gets built before the sale. Our popup conversion rate study includes Black Friday sign-up forms, and the one-click forms two brands showed past customers.

And plan past the deadline. BFCM brings in a lot of first-time buyers who are harder to bring back than usual. Our BFCM retention benchmarks show how much harder, and what the post-purchase flows need to do about it. If those first orders used a sale code, our first-order discount study shows how code buyers behave on order two.

Shopify Countdown Timer FAQ

How do I add a countdown timer to Shopify without an app?

Add the countdown banner as a custom section. Copy sections/countdown-banner.liquid from the free GitHub repo, add a new section named countdown-banner in Online Store > Themes > Edit code, paste it in, then add it to the Header area in the theme editor and set your dates, message and colors. It takes about three minutes.

Will every shopper see the same end time?

Yes. The banner counts down to one deadline for everyone, so a shopper in California and one in New York see the same end time. Pick the timezone in effect when the sale ends. For BFCM in the US that is standard time (EST, CST, PST), since daylight saving ends in early November.

Does the countdown banner turn off by itself when the sale ends?

Yes. Set a start and end time and the banner appears when the sale starts and hides when it ends. In the theme editor it stays visible with a note, so you can still edit it.

Which Shopify themes does it work with?