Image banner is the theme's all-purpose hero: one image or video with text and buttons. It opens the home page of the Masthead and Almanac presets. The text is built from theme blocks, so you decide what goes in it: a heading, a paragraph, one button or two, or anything else.
Where to find it
In the theme editor, click Add section and choose Image banner. You can add it to the home page or any other page that takes sections, as many times as you like.
On mobile
Wide images rarely suit a phone. Two settings help:
- Mobile image: an optional second image, shown on phones in place of the main one. Use a portrait crop of the same shot.
- Mobile text position: Over image keeps the text on the image. Below image moves it under the image, which is easier to read when the image is busy.
Using a video
A video replaces the image. It plays muted and on a loop behind the text, with a pause button, and customers who prefer reduced motion see it paused.
With the transparent header
The transparent header works over an image banner when the banner is the first section on the home page, has an image or video, uses Text over image and Full width, and has Top spacing set to None. See Header.
Layout options
Layout changes how the image and text relate:
- Text over image: the text sits on the image, placed by Content position. The text is white, on an overlay you control.
- Split: the image and a text panel sit side by side.
- Framed: the image is inset, with space around it, and the text sits beside it.
- Text below image: the image comes first and the text follows under it.
In the split and framed layouts, Image position puts the image on the left or the right, and the text uses the section's color scheme instead of white.
Height sets how tall the banner is. Adapt to image gives the banner the shape of your image, so nothing is cropped. Width runs the banner edge to edge, or keeps it within the page width.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Image | Image. | The banner's image. Set its focal point so the subject stays in view when it is cropped. |
| Video | Video. | A Shopify-hosted video to use instead of the image. Plays muted and on a loop. |
| Overlay opacity | 0% to 90%. Default: 30%. | Darkens the image so white text stays readable. Used by Text over image. |
| Height | Adapt to image, Small, Medium or Large. Default: Large. | How tall the banner is. Adapt to image follows the image's own shape. |
| Width | Full width or Page width. Default: Full width. | Edge to edge, or within the page width. |
| Content position | Top left, Top center, Middle left, Middle center, Bottom left or Bottom center. Default: Bottom left. | Where the text sits on the image. |
| Layout | ||
| Layout | Text over image, Split, Framed or Text below image. Default: Text over image. | How the image and text are arranged. See Layout options above. |
| Image position | Left or Right. Default: Left. | Which side the image sits on, in the split and framed layouts. |
| Mobile | ||
| Mobile image | Image. | Optional. Shown on phones instead of the main image, cropped around its own focal point. |
| Mobile text position | Over image or Below image. Default: Over image. | Whether the text sits on the image or under it on phones. |
| Color scheme | Color scheme. | Used by the text panel in the split, framed and text-below layouts, and by the whole section while no image is added. Text over an image is white. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: None. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: None. | The space below the section. None lets it touch the one below. |
Blocks
Theme blocks
This section is filled with Masthead's theme blocks: headings, text, buttons, images, videos, products, collections, accordion rows, spacers and groups, in any order and nested inside each other. Theme blocks explains each one. The section holds up to 8 blocks at its top level.
App blocks
Apps that offer app blocks can be added here too. They appear under Apps when you click Add block.
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Image | 3000 x 1800 px (5:3 landscape) | Cropped to fill the banner at the height you choose. Keep the subject away from the edges and set a focal point. |
| Mobile image | 1200 x 1600 px (3:4 portrait) | Optional. A tighter, taller crop for phones. |
| Video | 1920 x 1080 px, under 20 seconds | Plays without sound. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Put the text where the image is calm. If it is busy everywhere, use Split or raise the overlay.
- One heading, one line of text and one button is usually enough.
- When the banner is the first section on a page, keep its heading block's Heading level on Automatic so it becomes the page's main heading.