Cover hero opens a page like the cover of a magazine: one photo or video across the full width, a short issue label, a large headline, and up to three numbered cover lines that link into your store. It is the opening section of the Broadsheet preset's home page.
Where to find it
In the theme editor, click Add section and choose Cover hero. You can add it to the home page or any other page that takes sections, as many times as you like.
Using a video
A video replaces the image. It plays muted and on a loop, with no controls, as a moving backdrop. Customers get a pause button, and customers who have asked their device to reduce motion see the video paused from the start. Use a short, quiet clip; the headline has to stay readable over every frame.
With the transparent header
A cover hero is one of the three sections the transparent header works over. Put it first on the home page, give it an image or video, set Top spacing to None, and turn on Transparent on home page hero in the header. Header has the full list of conditions.
Layout options
- Height: Medium, Large or Full screen. Full screen fills the screen below the header, whatever the device.
- Headline position and Headline alignment move the headline to the top, middle or bottom, and to the left, center or right. Use them to keep the headline clear of your subject's face.
- Cover lines position puts the cover lines down the left or right side, or in a row along the bottom. On mobile they always sit at the bottom.
Over a photo or video, the text is always white, so the image needs to be dark enough behind it. That is what the overlay settings are for. The color scheme is only used while the section has no image or video.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Image | Image. | The cover photo. Set its focal point so the subject stays in view on every screen size. |
| Video | Video. | A Shopify-hosted video to use instead of the image. Plays muted and on a loop. |
| Overlay | ||
| Overlay color | Color. Default: #000000. | The color laid over the image or video. Black suits most photos. |
| Overlay opacity | 0% to 90%. Default: 20%. | How strong the overlay is. Raise it until the headline reads clearly. |
| Gradient behind cover lines | On or off. Default: off. | Adds a shade, in the overlay color, only on the side or bottom where the cover lines sit. Useful on light photos where a stronger overlay would dull the whole image. |
| Height | Medium, Large or Full screen. Default: Full screen. | How tall the cover is. |
| Masthead | ||
| Issue label | Text. | A short line above the headline, like the issue number on a magazine. Leave empty to hide it. |
| Headline | Text. | The cover's main line. Select a word and make it italic for emphasis. When the cover is the first section on the page, this is the page's main heading. |
| Headline size | Large or Extra large. Default: Extra large. | How large the headline is set. |
| Headline position | Top, Middle or Bottom. Default: Top. | Where the headline sits from top to bottom. |
| Headline alignment | Left, Center or Right. Default: Center. | Where the headline sits from left to right. |
| Cover lines | ||
| Cover lines position | Left, Right or Bottom. Default: Left. | Where the cover lines sit on desktop. |
| Cover line font | Heading, Body or Accent. Default: Heading. | Which of your three typefaces the cover lines use. |
| Color scheme | Color scheme. | Used only while no image or video is added. Over media the text 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
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 3 blocks.
Cover line
One line on the cover, numbered 01, 02, 03 in order. Give it a link to send customers to a collection, product or page.
| Setting | Options | What it does |
|---|---|---|
| Kicker | Text. | A word or two above the line, such as "Inside" or "New". Optional. |
| Text | Text. | The cover line itself. A few words work best. |
| Link | Link. | Where the line links to. Without a link the line is shown as plain text. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Cover image | 3000 x 2000 px (3:2 landscape) | The image fills the section and is cropped to fit, so a phone shows a tall slice of it. Keep the subject near the middle and set a focal point. |
| Video | 1920 x 1080 px, under 20 seconds | Uploaded to Shopify. Plays without sound, so it needs none. |
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
- Choose a photo with a calm area, such as sky or a plain wall, where the headline can sit.
- Keep the headline to two or three words at Extra large. Longer headlines read better at Large.
- Write cover lines like a magazine would: "The new tailoring", not "Shop tailoring".
- Use one cover hero per page, at the top.