A promotion band with an optional countdown timer.
The Promo banner section on desktop.
Promote a sale, a limited roast or a pre-order with an image background and a countdown.
How to add it
In Shopify admin, go to Online Store → Themes and click Customize.
Open the page from the page picker at the top of the editor.
In the sidebar, click Add section and choose Promo banner.
Fill in the content, then click Save.
Tips
Timer end time uses your store’s time zone.
Choose what happens when the timer ends: hide it, hide the whole section, or show a message.
Screenshots
The Promo banner section on a phone.Promo banner settings in the theme editor.The countdown timer.
Settings
Setting
Options
What it does
Section appearance
Color scheme
Color scheme
Media
Background
Image
Mobile background
Image
Optional. Falls back to the desktop media when empty.
Prioritize image loading
On / Off
Turn on only when this section is above the fold (visible without scrolling), for example at the top of the home page. Loads its first images immediately instead of when they scroll into view.
Overlay color
Color
Overlay opacity
0–100 %
Tints the media with the overlay color so text stays readable. Lower it with care — check your text contrast.
Settings
Section height
Adaptive (fit content) · Small · Medium · Large
Mobile section height
Adaptive (fit content) · Small · Medium · Large
Content width
560–1600 px
Maximum width of the copy and countdown. Lower it for a narrower, more centered band.
Position
Content position
Top · Middle · Bottom
Horizontal position
Left · Center · Right
Content alignment
Left · Center · Right
Mobile content alignment
Left · Center · Right
Buttons
Button position
With the text · Under the timer
Under the timer needs a timer block. Without one, buttons stay with the text.
Button alignment
Left · Center · Right
Animations
Blocks
Click Add block under the section in the sidebar. Drag blocks to change their order.
Subheading
Setting
Options
What it does
Subheading
Text (bold, italic, links)
Subheading size
Small · Medium · Large
Heading
Setting
Options
What it does
Heading
Text (bold, italic, links)
Italicized words switch to the Accent font from Theme settings → Typography. They stay italic and keep the color of the text around them.
Heading size
Small · Medium · Large · Extra large
Heading level
H1 · H2 · H3 · H4 · H5 · H6
Adjust for page structure — one H1 per page. Size is controlled separately.
Text
Setting
Options
What it does
Text
Rich text
Text size
Small · Medium · Large
Button up to 2
Setting
Options
What it does
Button label
Text
Link
Link
Button style
Primary · Secondary · Ghost · Link
Button size
Small · Medium · Large
Open in a new tab
On / Off
Timer up to 1
Setting
Options
What it does
End date
Text
Format YYYY-MM-DD, for example 2026-12-31. Leave empty to hide the countdown.
End time
Text
24-hour format HH:MM, for example 23:59. Interpreted in your store's time zone.
Hide days when zero
On / Off
Hides the days unit once fewer than 24 hours remain.
When the timer ends
Hide the timer · Hide the whole section · Show a message
What happens the moment the countdown reaches zero, and on load if the end date has already passed.
