Countdown timer
The Countdown timer shows how long shoppers have left on a genuine deadline — a sale end, an event, a launch window.
What it does
Section titled “What it does”You type a real end date and time; the section counts down to that exact moment in your store’s timezone. When it reaches zero it does what you chose — shows zeros, hides itself, or shows your message. It never restarts on its own — that’s deliberate, so shoppers always see an honest deadline.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Countdown timer.
- Type your real End date in the format
YYYY-MM-DD HH:MM. - Save — and test with a deadline a few minutes ahead to watch it reach zero.
Choose a style
Section titled “Choose a style”The Layout setting switches between three looks:
| Style | Look | Media |
|---|---|---|
| Banner (default) | Full-width strip with the countdown | Optional background photo with a dark overlay, or a pastel tint |
| With image | Content beside a photo | Photo, 4:3, recommended 1600×1200 px |
| Slim bar | A thin one-line strip | None — the photo setting is ignored |
Set it up: quick start
Section titled “Set it up: quick start”- Add the section and keep the Banner layout.
- Set End date to your real deadline, e.g.
2026-12-31 23:59. - Pick what happens at zero under When the countdown ends.
- Save, then preview with a test deadline one or two minutes ahead to confirm the end behavior.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Layout | Banner | Banner / With image / Slim bar | Switches the overall look |
| End date | (demo date) | Text, format YYYY-MM-DD HH:MM | The real deadline, in your store’s timezone. The timer counts down to this moment and never resets |
| When the countdown ends | Show zeros | Show zeros / Hide section / Show message | What visitors see after the deadline passes |
| Expired message | “This offer has ended” | Text | The message shown when the end behavior is “Show message” |
| Heading | “Limited-time offer” | Text | Section title |
| Text | Empty | Text | Short line under the heading |
| First button label | Empty | Text | Shows a button; leave empty for no button |
| Link | Empty | URL | Where the button leads |
| Image | Empty | Image picker | With image: 4:3 photo, recommended 1600×1200 px. Banner: background photo, recommended 2400×1200 px (edges may crop). Not used in Slim bar |
| Image overlay opacity | 50 % | 0–100 %, step 5 | Banner background photo only: a black overlay for readable white text — 0 % transparent, 100 % fully black |
| Card background tint | Cream | Cream / Lilac / Mint / Apricot | Banner layout only, used when no image is selected |
Images and content tips
Section titled “Images and content tips”- With image: 4:3 photo, around 1600×1200 px.
- Banner background: wide photo around 2400×1200 px; edges may crop on tall screens, so keep text space calm. Raise the overlay opacity until white text reads comfortably.
- Keep the heading and offer details in the text fields, not inside the photo.
Good to know
Section titled “Good to know”- One honest deadline. The countdown follows your store’s timezone, so shoppers in other regions see the same remaining time you do.
- Test before you launch. Set a deadline two minutes out, watch it reach zero, and check the behavior you picked (zeros / hide / message).
- Ended means ended. To run the same promo again, set a new end date — the timer doesn’t loop.
- Slim bar keeps one line on phones; the timer units wrap neatly on very narrow screens.
Example setups
Section titled “Example setups”Weekend sale banner. Banner layout, no photo, Cream tint, heading “Weekend sale”, end date Sunday 23:59, expiry “Show message” with “Back Monday for regular prices!”.
Launch hour. With image layout, product photo, heading “Launches soon”, end date at launch hour, expiry “Hide section” — the block disappears when the sale starts.
Common questions
Section titled “Common questions”The timer restarted after it hit zero. It can’t — a restart means the end date was edited (or a cached preview page was showing an old value). Set the real date once and test with a fresh preview.
The time left looks wrong by some hours. The countdown runs in your store’s timezone. Check the store timezone in Shopify admin (Settings → General), and type the end time in that time.
“Hide section” leaves a gap in my page. The section removes itself after the deadline — the sections below move up. Plan your page order with that in mind.
Can I show days, hours, minutes and seconds? The timer shows exactly the units that remain — days appear once the deadline is far enough away.