Countdown bar

Display a compact countdown timer for an upcoming event or promotion

Key features

Background image

Countdown timer styles

Alternate section content when timer ends

Flexible overlay content

Custom layout and styles

Blocks

Content

After countdown content

Section layout

---

_{Click section to find settings}

Vertical padding	0 - 20
Mobile vertical padding	0 - 10
Horizontal gap	Global Custom (0 - 10)
Mobile horizontal gap	0 - 10
Mobile alignment	Left / Center / Right

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}

Timer placement	Default / First / Last
Mobile timer placement	Default / First / Last
Font	Heading Body
Timer text size	20 - 80px
Mobile timer text size	20 - 60px
Label size	1 - 4
Vertical gap	0 - 10
Horizontal gap	0 - 10

Background image

---

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.

Content

_{Click Content block to find settings}

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