Shine Compacted Banner
Theme: Shine · Section type: All-template section
A Compacted banner is a short, full-width strip with a heading, one button, and an optional countdown on a background image. Use it for a promotion, a sign-up offer, or a sale reminder that shouldn't take up much space.
Note: You can add this section to any template and to the footer, but not to the header. The section has no blocks: you set everything in the section settings.
What you can do
- Add the section and your heading
- Add a button or make the whole banner clickable
- Add a countdown timer
- Make the text easy to read
- See what customers see
- Change the colors and image
- Fix common problems
Add the section and your heading
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Compacted banner.
- Under General, enter a Heading. To highlight part of it, put it between [ and ].
- Choose a Heading size.
- Under Image, select a Background image. The theme editor recommends 1600 x 200 px.
- Optional: select a Mobile background image. The theme editor recommends 750 x 100 px. If you don't add one, mobile shows the background image.
- Click Save.
Add a button or make the whole banner clickable
The banner can show one button, or open a link when customers click anywhere on it.
To show a button:
- Under Button, enter a Label.
- Choose a Style and select a Link.
- Click Save.
To make the whole banner clickable:
- Under Button, clear the Label.
- Under Link, select a Link.
- Click Save.
Note: The button appears only when both the Label and the Heading have text. The section Link is inactive while the button Label has text.
Add a countdown timer
- Under Countdown timer, select Enable countdown timer.
- Enter an End date in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight.
- Optional: enter an End time in the format HH:MM (24-hour clock).
- Select Hide the countdown when it ends to remove it after the end date, or clear it to keep it on the banner.
- Optional: enter an End text to show when the countdown ends.
- Click Save.
Caution: A countdown that has ended can mislead customers. Update the end date or turn off Enable countdown timer after the promotion ends.
Make the text easy to read
- Under Custom color, select a Mask overlay color.
- Drag Overlay opacity to darken or lighten the image, from 0 % to 90 %.
- Optional: select a Text overlay color to change the color of the heading.
- Click Save.
What customers see
- Large screens: the heading sits on the left with the countdown next to it, and the button sits on the right.
- Phones and tablets: below 1025 px, the banner shows the mobile background image, and the countdown moves under the heading. On narrow phones, the button moves under the heading too.
- Button and link: customers click the button to open its link. If the banner has no button, clicking anywhere on it opens the section's Link.
- Countdown: the timer counts down the days, hours, minutes, and seconds to the end date. When it ends, it disappears or shows 00, depending on Hide the countdown when it ends, and the end text appears if you added one.
Settings reference
General
Setting | What it does |
|---|---|
Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
Heading | Sets the banner heading. Put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
Heading size | Sets the size of the heading: H2, H3, H4, or H5. |
Image
Setting | What it does |
|---|---|
Background image | Sets the banner image. 1600 x 200 px is recommended. |
Mobile background image | Replaces the image on screens below 1025 px. 750 x 100 px is recommended. If you don't add one, the background image is used. |
Countdown timer
Setting | What it does |
|---|---|
Enable countdown timer | Shows a countdown next to the heading. |
Hide the countdown when it ends | Removes the timer from the banner after the end date. |
End date | Sets the end date in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight. |
End time (optional) | Sets the end time in the format HH:MM (24-hour clock). If you leave it empty, the countdown ends at 23:59. |
End text | Shows a message when the countdown ends. If you leave it empty, no message appears. |
Link
Setting | What it does |
|---|---|
Link | Makes the whole banner clickable. It works only when the button Label is empty. |
Button
Setting | What it does |
|---|---|
Label | Sets the button text. If you leave it empty, the button is hidden. |
Style | Shows the button as Filled, Outlined, or Text link. |
Link | Sets the page that the button opens. |
Custom color
Setting | What it does |
|---|---|
Mask overlay | Sets the color of the layer over the image. See "Make the text easy to read" above. |
Overlay opacity | Sets how strong the overlay is, from 0 % to 90 %. |
Text overlay | Changes the color of the heading. |
Countdown background | Sets the background color of the timer. |
Countdown number | Sets the color of the numbers. |
End text | Sets the color of the end text. |
Troubleshooting
The button doesn't appear.
The button shows only when both the button Label and the section Heading have text. Add a heading, or use the section Link instead.
Clicking the banner doesn't open my link.
The section Link works only when the button Label is empty. Clear the Label, or set the button Link instead.
The countdown shows 00 or is gone.
The end date has passed. Enter a new End date in the format YYYY-MM-DD, or turn off Enable countdown timer.
The image looks cut off.
The banner is short and wide, so the image is cropped to fill it. Use an image close to 1600 x 200 px, and add a Mobile background image for phones.
Related articles
In other themes: Blum Countdown Banner
Updated on: 22/10/2026
Thank you!