A Free Shopify Countdown Timer for Black Friday, Built with Claude Code

Every Black Friday sale needs a deadline on the site, and most Shopify stores get it from a countdown timer app. I built one 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).

Install It on Your Store

About three minutes. Try it on a duplicate of your theme first (Online Store > Themes, click ..., then Duplicate).

No code, in the Shopify admin:

1. Copy sections/countdown-banner.liquid from the GitHub repo.
2. In Online Store > Themes > Edit code, add a new section named countdown-banner, delete the starter code and paste it in.
3. In Customize, click Add section in the Header area and pick Countdown banner.
4. 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.

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.

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.

Grab the banner from GitHub or watch the build on YouTube. If you want help with the BFCM emails that send people to it, reach out.