Countdown Banner Builder

Customize your store's countdown banner, then copy the code into Shopify.

1. Live preview

2. Customize

Countdown type

Which units should the banner display?

Tip: uncheck "Days" and keep only "Hours" if you want the banner to show the total remaining hours instead of days + hours. Same trick works for showing only minutes.

Colors

3. Your code

Copy this and paste it into Shopify: Online Store → Themes → Edit code → layout/theme.liquid, right after the <body> tag.

4. How to edit the code by hand (optional)

You don't need to use the tool above every time. Once you understand these 4 parts of the code, you can open it in any text editor and change it directly.
A) Changing the message

Find this line near the top of the code and edit the text between the tags:

<span id="banner-promo-text">🔥 SPECIAL OFFER! Free shipping ends in:</span>
B) Changing the colors

Near the top of the <style> block, you'll see:

--bp-bg: #1a1a1a;   /* background color */
--bp-text: #ffffff; /* text color */

Replace the HEX codes with any color you like. If you pick a light background (yellow, pink, white...), set --bp-text to #000000 so the text stays readable.

C) Setting an exact end date

In the script, look for:

var COUNTDOWN_MODE = "date";
var targetDate = new Date("2026-07-01T23:59:59").getTime();

Change the date and time inside the quotes. Format is always YEAR-MONTH-DAY T HOUR:MINUTE:SECOND using 24-hour time. Example, December 25, 2026 at 9:00 AM: "2026-12-25T09:00:00".

D) Counting down by days / hours / minutes instead of a fixed date

If you want every visitor to see their own personal timer (for example "2 days left from the moment they land on the page"), switch the mode and set the amounts:

var COUNTDOWN_MODE = "duration";
var DURATION_DAYS = 2;
var DURATION_HOURS = 0;
var DURATION_MINUTES = 0;

You can mix any combination — for example DURATION_DAYS = 0, DURATION_HOURS = 6 gives every visitor a personal 6-hour countdown.

E) Showing only certain units (e.g. only hours, or only minutes)

Look for this line:

var UNITS_TO_SHOW = ["days", "hours", "minutes", "seconds"];

Remove the units you don't want. Examples:

// Only hours and minutes:
var UNITS_TO_SHOW = ["hours", "minutes"];

// Only minutes:
var UNITS_TO_SHOW = ["minutes"];

// Only seconds:
var UNITS_TO_SHOW = ["seconds"];

When you remove a bigger unit (like "days"), the next unit automatically shows the total remaining amount — so if you remove "days" and keep "hours", the banner will show something like 52 hours instead of resetting at 24.