Countdown banner

Display a live countdown timer for an upcoming event or promotion

Key features

Background image or autoplay video

Countdown timer styles

Alternate section content when timer ends

Flexible overlay content

Custom layout and styles

Blocks

Content

After countdown content

Section height

---

You can set the section height in pixels to be the exact same height on all devices or as a percentage to adapt to the section height of the screen height.

_{Click section to find settings}

Section height	Adapt to screen height (50 - 100%) Fixed height (300 - 800px)
Mobile section height	Adapt to screen height (50 - 100%) Fixed height (300 - 800px)

Countdown timer

---

Select an end date and time for your countdown timer. Choose to hide the timer when the countdown or add a message when the countdown is complete.

Timer

_{Click section to find settings}

Year	Enter the year of the end-date.
Month	Select the month of the end-date.
Day	Select the day of the end-date.
Hour	Select the hour of the end-time.
Minute	Select the minutes of the end-time.
Time zone	Choose to display the timer according to your Shop time zone or the Visitor time zone.
When complete	Leave timer at zero Hide timer

Layout

_{Click section to find settings}

Position	Top / Middle / Bottom
Mobile position	Top / Bottom
Mobile alignment	Left / Center / Right
Timer text size
Mobile timer text size
Label size
Vertical gap
Horizontal gap

Background media

---

Display an image, solid color, or autoplay video (without sound) as the section background.

_{Click section to find settings}

Media type	Color Image Video

Image

_{Click section to find settings}

Image
Custom mobile image

Color

_{Click section to find settings}

Background color	Color scheme Custom
Color scheme	Match section Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Custom	Background Text

Video

_{Click section to find settings}

Video
Video focal point
Custom mobile video
Mobile video focal point

Overlay colors

_{Click section to find settings}

Overlay opacity	0 - 100%
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2

Content block

---

Add heading text with buttons that overlay the section background media.

Layout

_{Click section to find settings}

Position	Top / Middle / Bottom
Mobile positioning	Top / Middle / Bottom Left / Center / Right
Mobile alignment	Left / Center / Right
Max width	300 - 1440px

Content

_{Click Content block to find settings}

Overline
Overline size	1 - 4
Heading
Heading size	1 - 6
Text
Text size	1 - 4

Buttons

Add a primary and secondary button.

_{Click Content block to find settings}

Link
Label
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft

After countdown content

You can display alternate content after the timer reaches zero.

• Click the After countdown content block to add content for when the timer ends. The block include the same content fields and options.

• Toggle on Enable "After Countdown" content after adding content.

Section styles

---

Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.

_{Click section to find settings}

Content area

Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Set content to page width
Border
Corner radius	Available for Full width padded and Page width options.
Dropshadow

Section

Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more