Image banner
A large photo or a looping video with a heading, text and up to two buttons laid over it. Use it for a campaign, a new collection or a striking first impression.
- In the editor
- Image banner
- Where it goes
- Any page template, with Add section
- In the presets
- Index: About page; Poster: Home page, About page; Petal: Home page, About page
- Settings
- 33
- App blocks
- Yes
When to use it
An image banner says one thing loudly: a new season, a sale, a collection. As the first section of the page, it can carry the transparent header. Further down, it makes a strong break between product rows.
Set it up
- Upload an Image – at least 2400 px wide for full width. Add a Mobile image in portrait for phones, so the subject is not cropped away.
- Choose a Height: Small, Medium, Large or Full screen. Turn on Full width to run the image edge to edge.
- Write the Label (a small line above the heading), the Heading and the Text.
- Set up to two buttons, each with its own style: Primary, Secondary or Highlight.
Keep the text readable
Text on photos needs contrast. The Overlay darkens or tints the image under the text:
| Overlay style | Effect |
|---|---|
| Solid | An even tint over the whole image. |
| Gradient from bottom | Dark at the bottom, clear at the top – ideal with text at the bottom. |
| Gradient from left | Dark on the left, clear on the right – ideal with text on the left. |
| Vignette | Darker edges, a bright centre. |
| Duotone | Turns the photo into two tones of the overlay color, for a graphic, poster-like look. |
Set the Overlay color and Overlay opacity (0–90%). Instead of an overlay, you can put the text on a Content background: a Card in its own color scheme, or Frosted glass that blurs the photo behind the text.
Content position
Content position on desktop offers nine positions, from top left to bottom right; Content position on mobile offers top, middle or bottom. Text alignment is left or centered. Without a content background, the text uses Text color without background – white by default.
Video
Add a Video to play it muted on a loop over the image. The image stays as the poster while the video loads, and on slow connections. Shoppers get a small pause button, and the video does not play for those who reduce motion.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Image banner33 settings
| Setting | Options | Default |
|---|---|---|
| Image | Image | – |
| Mobile imageOptional. Shown on small screens. | Image | – |
| VideoOptional. Plays muted on a loop over the image, which stays as the poster and on slow connections. | Video file | – |
| Height | Small · Medium · Large · Full screen | Medium |
| Full width | Checkbox | Off |
| Overlay | ||
| Overlay style | Solid · Gradient from bottom · Gradient from left · Vignette · Duotone | Gradient from bottom |
| Overlay color | Color | #161616 |
| Overlay opacity | 0–90% | 35% |
| Content | ||
| Content position on desktop | Top left · Top center · Top right · Middle left · Middle center · Middle right · Bottom left · Bottom center · Bottom right | Bottom left |
| Content position on mobile | Top · Middle · Bottom | Bottom |
| Text alignment | Left · Center | Left |
| Content background | None · Card · Frosted glass | None |
| Content background color scheme | Color scheme | Scheme 2 |
| Text color without background | Color | #FFFFFF |
| Label | Text | – |
| Heading | Rich text (one line) | Sample text |
| Heading size | Extra large · Large · Medium | Large |
| Text | Rich text | Sample text |
| First button label | Text | Sample text |
| First button link | Link | – |
| First button style | Primary · Secondary · Highlight | Highlight |
| Second button label | Text | – |
| Second button link | Link | – |
| Second button style | Primary · Secondary · Highlight | Secondary |
| Color scheme | Color scheme | Scheme 2 |
| Section spacing | ||
| Top padding | 0–160px | 0px |
| Bottom padding | 0–160px | 0px |
| Top padding on mobile | 0–120px | 0px |
| Bottom padding on mobile | 0–120px | 0px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |