> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.
![Compacted banner with a heading and a button](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/compacted-1_15kayiv.jpg)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Compacted banner**.
3. Under **General**, enter a **Heading**. To highlight part of it, put it between **\[** and **]**.
4. Choose a **Heading size**.
5. Under **Image**, select a **Background image**. The theme editor recommends 1600 x 200 px.
6. 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.
7. 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:**
1. Under **Button**, enter a **Label**.
2. Choose a **Style** and select a **Link**.
3. Click **Save**.

**To make the whole banner clickable:**
1. Under **Button**, clear the **Label**.
2. Under **Link**, select a **Link**.
3. 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
1. Under **Countdown timer**, select **Enable countdown timer**.
2. Enter an **End date** in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight.
3. Optional: enter an **End time** in the format HH:MM (24-hour clock).
4. Select **Hide the countdown when it ends** to remove it after the end date, or clear it to keep it on the banner.
5. Optional: enter an **End text** to show when the countdown ends.
6. 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
1. Under **Custom color**, select a **Mask overlay** color.
2. Drag **Overlay opacity** to darken or lighten the image, from 0 % to 90 %.
3. Optional: select a **Text overlay** color to change the color of the heading.
4. 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.
![Compacted banner on mobile, with the button under the heading](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/compacted-2_1kuh48s.jpg)

## 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
- [Shine Image Banner](https://doc.ecomx.co/en/article/shine-image-banner-12txcz9/)
- [Shine Slideshow Banner](https://doc.ecomx.co/en/article/shine-slideshow-1l5iab8/)
- [Shine Countdown Timer](https://doc.ecomx.co/en/article/shine-countdown-timer-1itlp4n/)
- [Shine Running Content](https://doc.ecomx.co/en/article/shine-running-content-zv5e35/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)

**In other themes:** [Blum Countdown Banner](https://doc.ecomx.co/en/article/blum-countdown-banner-section-yf2nwm/)