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.

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.

Settings reference

General

Image

Large screen and Mobile screen

Link

Custom color

Subheading, Heading, and Description block settings

Buttons block settings

Countdown timer block settings

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
• Shine Video Banner
• Shine Compacted Banner
• Shine Countdown Timer
• Shine Typography

In other themes: Blum Image Banner · Electro Image Banner · Normcore Image Banner

Updated on: 22/10/2026