Promotion countdown

Build a timed promotional banner with responsive media and a clear expiry state.

Promotion countdown combines campaign copy, optional media, a call to action, and a live countdown. Use it for a genuine offer or event with a clear end time rather than as a permanent urgency message.

Evidence status.

The controls and expiry rules below match the current section schema and storefront source. Final desktop/mobile media crops, parallax, and live expiry transitions still need accepted browser evidence.

Add a Promotion countdown

In the Shopify Theme Editor, open a compatible template.
Select Add section > Promotion countdown.
Add the campaign content and a valid End date and time.
Preview the section before, at, and after the intended deadline before publishing.

Content

Setting	What it controls	Default or use
Eyebrow	Short supporting text above the heading.	Optional.
Heading	Main campaign message.	`Limited time offer`
Text	Supporting rich text.	Optional. Keep the deadline and offer terms understandable without relying on the timer alone.
Desktop image	Main wide-screen campaign image.	Optional. With no image, the section uses its configured colors.
Mobile image	Optional mobile-specific crop.	When blank, the desktop image is used.
Button label	Visible call-to-action text.	Optional.
Button link	Destination for the call to action.	Add a valid destination when a button label is present.
Button style	Visual treatment for the action.	Primary, Secondary, or Text link; default Primary.

Countdown

End date and time

Enter the deadline in ISO 8601 format and include its timezone offset, for example 2026-12-31T23:59:00+00:00. The offset makes the deadline unambiguous for shoppers in different locations.

If the value is invalid, the Theme Editor shows an invalid-date message. Correct it before publishing rather than relying on the storefront to interpret an incomplete date.

When countdown ends

Choose what happens at the deadline:

Show ended message replaces the countdown with Expired message.
Hide section removes the promotional section from the published storefront after expiry.

The default is Show ended message. The default expired message is This offer has ended. Use wording that makes the offer state clear without implying that a completed promotion is still available.

Layout and colors

Setting	Options and behavior
Full width	On by default. Turn it off to keep the section within the normal page-width container.
Banner height	Compact, Standard, or Large; default Standard.
Background color	Used as the section surface and as the fallback when there is no image.
Text color	Controls the campaign copy and countdown text.
Overlay color	Adds contrast over the selected image.
Overlay opacity	0–100%; default 24%.

Check the heading, timer, expired message, and button against both the media and fallback background. Do not use the timer as the only way to communicate when the offer ends.

Motion and spacing

Enable parallax for this section is on by default. It works only when the global Enable parallax effects setting is also on, and reduced-motion preferences disable the effect. The countdown remains useful when parallax is unavailable.

Section spacing uses Small, Medium, or Large, with Medium as the default. Top spacing and Bottom spacing are both enabled by default.

Desktop and mobile behavior

Supply a mobile image when the desktop crop hides the subject or leaves insufficient room for the copy. Review the longest timer labels, campaign text, and call to action at both sizes. The mobile image falls back to the desktop image when blank.

Common issues

Symptom	Safe check
The countdown is invalid	Include the full date, time, and timezone offset in End date and time.
The mobile crop is unclear	Add a dedicated Mobile image rather than forcing the desktop composition into a narrow frame.
The section remains visible after expiry	Confirm When countdown ends is set to Hide section and test outside Theme Editor preview.
Parallax does not move	Check both the section toggle and global Enable parallax effects, then check the device's reduced-motion preference.
The button is missing	Add both a meaningful Button label and the intended Button link.