> ## 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 Image Banner

**Theme:** Shine · **Section type:** All-template section

An Image banner section shows one large image with a heading, text, buttons, and an optional countdown on top. Use it to open your homepage or to introduce a collection or promotion.

> **Note:** You can add this section to any template, except the header and footer. The section comes with a Subheading, Heading, Description, Buttons, and Countdown timer block. Each section holds 1 Countdown timer.
![Image banner with a heading, text, and two buttons on the Serene preset](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/image-banner-1_kybf5.jpg)

**What you can do**
- Add the section and your image
- Add your text and buttons
- Add a countdown timer
- Make the text easy to read
- See what customers see
- Change the height and content position
- Fix common problems

---

## Add the section and your image
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Image banner**.
3. Under **Image**, select a **Background image**. The theme editor recommends 1600 x 800 px.
4. Optional: select a **Mobile background image**. The theme editor recommends 750 x 1100 px. If you don't add one, mobile shows the background image.
5. Click **Save**.

> **Tip:** Keep the important part of the image away from the edges. With a fixed section height, the image is cropped to fill the banner, so the sides or the top and bottom can be cut off.

## Add your text and buttons
1. Click the **Heading** block and enter the **Text**. To highlight part of the heading, put it between **\[** and **]**.
2. Choose a **Heading size**.
3. Click the **Subheading** and **Description** blocks and enter their text.
4. Click the **Buttons** block. Under **Button 1**, enter a **Label**, choose a **Style**, and select a **Link**.
5. Optional: under **Button 2**, enter a label, choose a **Style**, and select a **Link**.
6. To change the order of the text and buttons, drag the blocks in the left sidebar.
7. Click **Save**.

To make the whole banner clickable instead, remove the **Buttons** block. Then click the section and, under **Link**, select a **Link**.

> **Note:** The section **Link** is inactive while the section has a **Buttons** block, even if the button labels are empty.

## Add a countdown timer
1. Click the **Countdown timer** block. If the section doesn't have one, click **Add block** > **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 remove the block after the promotion ends.

## Make the text easy to read
1. Click the **Image banner** section.
2. Under **Custom color**, select a **Mask overlay** color. If you don't select one, the overlay uses the background color of the section's color scheme.
3. Drag **Overlay opacity** to darken or lighten the image, from 0 % to 90 %.
4. Optional: select a **Text overlay** color to change the color of the banner text.
5. Click **Save**.

## What customers see
- **Large screens:** the image fills the width of the page, with the text and buttons at the content position you chose.
- **Phones and tablets:** below 1025 px, the banner shows the mobile background image, and the **Mobile screen** height and content position apply.
- **Buttons and link:** customers click a button to open its link. If the section has no **Buttons** block, clicking anywhere on the banner 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.
![Image banner on mobile, showing the mobile layout](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/image-banner-2_w9vl2d.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |

### Image
| Setting | What it does |
| ---- | ---- |
| Background image | Sets the banner image. 1600 x 800 px is recommended. |
| Mobile background image | Replaces the image on screens below 1025 px. 750 x 1100 px is recommended. If you don't add one, the background image is used. |

### Large screen and Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section height | Sets the height of the banner: Adapt to content, 50% screen, 70% screen, Fill screen, or Adapt to image. The section grows if the content needs more space. When the banner is the first section, the screen-based heights don't include the header. |
| Content position | Places the text and buttons at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |

### Link
| Setting | What it does |
| ---- | ---- |
| Link | Makes the whole banner clickable. It works only when the section has no Buttons block. |

### 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 banner text. |

### Subheading, Heading, and Description block settings
| Setting | What it does |
| ---- | ---- |
| Text | Sets the text of the block. In the Heading block, put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the size of the heading: Headline, H1, H2, or H3. Appears only in the Heading block. |

### Buttons block settings
| Setting | What it does |
| ---- | ---- |
| Label (Button 1) and Button (Button 2) | 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. |

### Countdown timer block settings
| Setting | What it does |
| ---- | ---- |
| 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. |
| Countdown background | Sets the background color of the timer. |
| Countdown number | Sets the color of the numbers. |
| End text (Custom color) | Sets the color of the end text. |

## Troubleshooting
**Clicking the banner doesn't open my link.**
The section Link works only when the section has no Buttons block. Remove the Buttons block, or set the button links instead.

**The image is cut off.**
With a fixed **Section height**, the image is cropped to fill the banner. Choose **Adapt to image**, or use an image with the same shape as the banner. On mobile, add a **Mobile background image**.

**The countdown shows 00 or is gone.**
The end date has passed. Enter a new **End date** in the format YYYY-MM-DD, or remove the **Countdown timer** block.

**The text is hard to read on the image.**
Increase **Overlay opacity**, choose a darker **Mask overlay**, or set a **Text overlay** color.

## Related articles
- [Shine Slideshow Banner](https://doc.ecomx.co/en/article/shine-slideshow-1l5iab8/)
- [Shine Video Banner](https://doc.ecomx.co/en/article/shine-video-banner-4gepr1/)
- [Shine Compacted Banner](https://doc.ecomx.co/en/article/shine-compacted-banner-1jn034g/)
- [Shine Countdown Timer](https://doc.ecomx.co/en/article/shine-countdown-timer-1itlp4n/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)

**In other themes:** [Blum Image Banner](https://doc.ecomx.co/en/article/blum-image-banner-jzf00j/) · [Electro Image Banner](https://doc.ecomx.co/en/article/electro-how-to-use-electro-image-banner-section-mxjav/) · [Normcore Image Banner](https://doc.ecomx.co/en/article/normcore-image-banner-11u9o2q/)