> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.
![Countdown banner on desktop with the live timer and a button](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/countdown-1_zravb5.png)

**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.
![Countdown banner on a phone, with the mobile background image](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/countdown-2_dewg8d.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |
| Enable large heading | Shows the heading in the larger headline size. |
| Enable full-width banner | Stretches the banner to the full screen width. Turn it off to keep it inside the page margins. |
| Mask overlay opacity | Sets how dark the mask over the image is, from 0% to 90%. |
| Mask overlay | Sets the color of the mask. The color picker sits right below Mask overlay opacity. |
| Content overlay | Sets the color of the text on the banner. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Section height on large screen | Sets the height on desktop: 50% screen height, 70% screen height, Fill screen height, or Adapt to image. The section grows if the content needs more space. |
| Section height on phone | Sets the height on phones, with the same options. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Image
| Setting | What it does |
| ---- | ---- |
| Enable parallax effect | Moves the image as customers scroll. |
| Parallax direction | Vertical, Horizontal, or Zoom. Appears when Enable parallax effect is on. |
| Background image | The banner image. 2880 x 1200 px .jpg recommended. |
| Mobile background image (optional) | A different image for phones. 750 x 1400 px .jpg recommended. |

### Prominent badge
| Setting | What it does |
| ---- | ---- |
| Text | The badge text. Leave it empty to hide the badge. |
| Accent scheme | Colors the badge with the Main or Extra accent from Theme settings > Colors > Accent. Appears after you enter text. |
| Position | Places the badge on the Left or Right. Appears after you enter text. |
| Shape | Star, Diamond, or Asterisk. Appears after you enter text. |

### Link
| Setting | What it does |
| ---- | ---- |
| Link | Makes the whole banner clickable. Works only when the button doesn't have both a label and a link. |

### Content block settings
| Setting | What it does |
| ---- | ---- |
| Content position | Places the text, timer, and button at Center, Left center, or Left bottom. |
| Subheading, Heading, Description | The text on the banner. |
| Enable countdown timer | Shows the timer. |
| Hide the countdown when it ends | Removes the timer after the end date, so only the banner shows. |
| End date | The end date, in the format YYYY-MM-DD. If empty, the countdown ends at midnight tonight. |
| End time (optional) | The end time, in 24-hour format HH:MM. |
| End text (message) | The message shown when the countdown ends. Leave it empty to show nothing. |
| End text (color) | The color of the end message. |
| Label | The button text. Leave it empty to hide the button. |
| Link | Where the button goes. Appears after you enter a label. |

## 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](https://doc.ecomx.co/en/article/blum-image-banner-jzf00j/)
- [Blum Slideshow](https://doc.ecomx.co/en/article/blum-slideshow-8jnt92/)
- [Blum Announcement Bar](https://doc.ecomx.co/en/article/blum-announcement-bar-wfjtwg/)
- [Blum Popup](https://doc.ecomx.co/en/article/blum-popup-1b6xhi2/)