Promo banner announces a sale, a launch or an offer in a bold band of color, with an optional countdown to the moment it ends. Its content is built from theme blocks: usually a heading, a line of text and a button.
Where to find it
In the theme editor, click Add section and choose Promo banner. You can add it to the home page or any other page that takes sections, as many times as you like.
The countdown
Turn on Show countdown and enter the End date and time to show days, hours, minutes and seconds counting down.
- Type the date as
2026-12-31 23:59: year, month, day, then the time on a 24-hour clock. The time is read in your store's time zone. - The countdown runs once, to that one moment, then stops. It never restarts, so it always tells customers the truth.
- After the countdown ends decides what happens next: Hide this section removes the banner from your storefront, and Show a message replaces its content with the text in Message after it ends.
If the date can't be read, the theme editor shows a note in the banner so you can correct it; customers never see that note. A banner that has ended and is set to hide also shows a note in the editor only, so you can still find it and remove it.
Layout options
Text alignment sets the content to the left or the center. Add a background image with an overlay for a campaign look, or rely on a strong color scheme.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Text alignment | Left or Center. Default: Center. | Aligns the content to the left or the center. |
| Countdown | ||
| Show countdown | On or off. Default: off. | Shows a countdown to the date and time below. It counts down once, then stops. |
| End date and time | Text. | When the offer ends, in the format 2026-12-31 23:59, in your store's time zone. |
| After the countdown ends | Hide this section or Show a message. Default: Hide this section. | What the banner does once the countdown has ended. |
| Message after it ends | Text. | The message shown after the end, when Show a message is chosen. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
Theme blocks
This section is filled with Masthead's theme blocks: headings, text, buttons, images, videos, products, collections, accordion rows, spacers and groups, in any order and nested inside each other. Theme blocks explains each one. The section holds up to 8 blocks at its top level.
App blocks
Apps that offer app blocks can be added here too. They appear under Apps when you click Add block.
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Background image | 3000 x 1200 px | Optional. Cropped to the banner's size around its focal point; use the overlay to keep the text readable. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Set the end time to match the discount's end time in Shopify, so the countdown and the offer end together.
- Remove or update the banner after a sale. With Hide this section it disappears by itself, but it is still in your template.
- Use a color scheme you don't use elsewhere on the page, so the banner stands out.