Blum Countdown banner section

Theme: Blum · Section type: All-template section

The Countdown banner section shows a large image with a live timer that counts down to a date and time you choose. Use it to create urgency for a sale, a launch, or an event.

Note: You can add this section to any template, except the header and footer. The timer uses the time zone in your Shopify store settings.

What you can do

• Add the section and your image
• Set the countdown end date and time
• Choose what happens when the countdown ends
• Add a parallax effect
• Link the whole banner to a page
• See what customers see
• Change the height, overlay, and badge
• Fix common problems

Add the section and your image

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click Add section > Countdown banner.
3. Under Image, select a Background image. A 2880 x 1200 px .jpg works best.
4. Optional: select a Mobile background image (optional). A 750 x 1400 px .jpg works best.
5. Click the Content block. Under Text, enter a Subheading, Heading, and Description.
6. Under Button, enter a Label and a Link. Leave the label empty to hide the button.
7. Click Save.

Set the countdown end date and time

1. Click the Content block.
2. Under Countdown, make sure Enable countdown timer is on.
3. In End date, enter the date in the format YYYY-MM-DD, for example 2026-11-28.
4. Optional: in End time (optional), enter the time in 24-hour format HH:MM, for example 23:59.
5. Click Save.

Caution: If End date is empty, the countdown ends at midnight tonight. Always enter a date, and update it before you reuse the banner for a new campaign.

Choose what happens when the countdown ends

1. In the Content block, under Countdown, turn Hide the countdown when it ends on to remove the timer after the end date.
2. In End text, enter a message such as "This sale has ended". Leave it empty to show no message.
3. Pick the color of that message in the End text color setting.
4. Click Save.

Tip: Remove or hide the section after a campaign ends. A banner that still promotes a finished sale can confuse customers.

Add a parallax effect

1. Click the Countdown banner section.
2. Under Image, turn on Enable parallax effect.
3. Choose a Parallax direction: Vertical, Horizontal, or Zoom.
4. Click Save.

Link the whole banner to a page

1. Click the Countdown banner section.
2. Under Link, enter a Link.
3. Click Save.

The whole banner becomes clickable only when the button has no label or no link.

What customers see

• Timer: the days, hours, minutes, and seconds left, updated every second, below the description.
• After the end date: the timer disappears if Hide the countdown when it ends is on. Otherwise it stays at 00. Your End text message shows in both cases, if you entered one.
• Phones: screens up to 768 px wide show the mobile background image when you add one.
• Banner link: clicking the banner opens the link in a new browser tab.

Settings reference

General

Layout

Image

Prominent badge

Link

Content block settings

Troubleshooting

The countdown shows 00 or ended too early.
Check End date (YYYY-MM-DD) and End time (optional) (HH:MM, 24-hour). An empty or wrong date makes the countdown end at midnight tonight. The timer also uses your store's time zone, not the customer's.

The countdown is gone, but the banner is still there.
Hide the countdown when it ends is on, and the end date has passed. Set a new end date, or remove the section.

The banner link doesn't work.
The banner link is turned off when the button has both a label and a link. Remove the button link, or let customers use the button.

Related articles

• Blum Image Banner
• Blum Slideshow
• Blum Announcement Bar
• Blum Popup

Updated on: 23/10/2026