The Hero section opens a page with a large heading, a short paragraph, a photo or video, and up to two buttons. Merchants also call it a banner. To add one, click Add section in the editor and select one of the three Hero presets. It works best as the first section on your home page.
On a computer, the hero fills the screen below the header. On a phone, it is as tall as its content.
Presets
The Add section list shows three presets. Each one is a starting point, and its settings can change it into any of the others.
Hero, full screen
Hero, full screen, staggered
Hero, photo below the heading
Heading lines
Stacked, two lines
Staggered: left, center, right, three lines
Stacked, two lines
Photo or video
Behind the heading
Behind the heading
Below the heading
Button style
Links
Links
Buttons
Use it for
A brand line over a strong photo
A short three-word message
A photo that should not sit behind text
No preset comes with a photo. Until you choose one in Background image, the hero shows the page background.
Content
Setting
What it does
Heading
Each paragraph is one line of the heading, so press Enter to start a new line. A line you set in italics with the editor's italic button shows in thin letters. All other lines are bold.
Text
A short paragraph. With Along the bottom, it sits in the bottom right corner, across from the buttons. With Below the heading, it sits under the heading.
Second text
A second paragraph, placed before the last word with the second button. Shows when Copy and buttons is Beside the middle and the last word.
Note after the first word
A short line of small text to the right of the first line of the heading. Shows with Staggered: left, center, right.
Note before the last word
A short line of small text to the left of the last line. Shows with Staggered: left, center, right and Along the bottom.
Leave a note empty to hide it. Headings show in capital letters when Uppercase headings is on in Typography settings, as it is in the Checkmate style.
Heading layout
Setting
What it does
Heading lines
Stacked puts the lines one above the other. Staggered: left, center, right puts the first line at the left, the second in the center and the third at the right, and shows the middle line in slightly thinner letters. A staggered line never wraps, so keep each one to a short word or two.
Heading size
L is the default. M shows the heading at 80% of that size and S at 65%.
Heading alignment
Shows with Stacked. Left, Center or Right places the heading. Automatic centers it when the photo is below the heading, and aligns it left otherwise.
Copy and buttons
Shows with Staggered: left, center, right, unless Photo or video is Below the heading. Along the bottom puts both buttons in the bottom left corner and Text in the bottom right. Beside the middle and the last word puts Text and the first button at the end of the middle line, and Second text and the second button before the last word.
On a phone, a staggered heading lines up at the left, and each note sits under its word.
Media
Setting
What it does
Background type
Image shows a photo, Video plays a video you upload or link to, and YouTube or Vimeo plays a video from one of those sites. Color fills the section with one color, and None shows the page background.
Photo or video
Behind the heading puts the photo or video behind the text. Below the heading puts it in a box under the heading, and both buttons sit on the photo at its bottom. Shows when Background type is a photo or a video.
Background image
The photo. For a video, it is the still image shown before the video plays, and to visitors whose device is set to reduce motion.
Mobile image
A separate photo for phones, such as a taller crop. Leave it empty to use Background image on every screen. Shows when Background type is Image and Background image has a photo.
Background color
Shows with Color. Surface and Surface, stronger are the theme's two light background shades, and they turn dark in dark mode. Custom shows a color picker, and the color stays the same in both modes.
Text color
The color of the heading, the paragraph and the buttons over a photo, a video or a custom color. With Below the heading, it colors only the second button, because the heading sits on the page.
Background video
Shows with Video. A video you upload to Shopify.
Video file link
Shows with Video. A link to an MP4 file, used only when Background video is empty. For a file in Content > Files in your Shopify admin, copy its link there.
Video URL
Shows with YouTube or Vimeo. The video's address, such as https://www.youtube.com/watch?v= followed by the video's code.
Background width
Full stretches the photo or video to the edges of the screen. Inset leaves a margin on both sides and rounds the corners.
Overlay opacity
Darkens the photo or video, from 0% to 100%. Above 0%, the heading, the paragraph and the buttons switch to the colors they use in dark mode, so they stay readable.
A background video plays muted, in a loop, with no controls. To show a video with sound and a play button, use the Video section. These background settings appear in other sections too, and Section background settings covers them in more detail. Color settings explains dark mode.
Buttons
Setting
What it does
Button style
Buttons shows the first button filled, with an arrow in a circle, and the second as plain text that gets a light fill when the pointer is over it. Links shows both as large underlined words, the first one darker and followed by an arrow.
Button label and Button link
The first button. Leave the label empty to hide it.
Second button label and Second button link
The second button. Leave the label empty to hide it.
Spacing
Margin top and Margin bottom add space above and below the hero, from None to 120 px. The first section on a page never has space above it, whatever you choose. The sizes shrink on smaller screens, as Section layout settings explains.
Motion
Setting
What it does
Dark moment
Turns the page dark while the hero is in the middle of the screen.
Rise on scroll
The hero starts slightly smaller and lower, and grows into place as it scrolls into view.
Background parallax
Moves the photo or video a little slower than the page as customers scroll. On by default. Shows when Background type is Image or Video.
Chapter title
The name shown in the corner of the screen while this section is in view, when Chapter indicator is on in Animation settings.
Animate heading on load
Brings the heading in word by word when the page opens. Turn it off to show the heading at once.
To show the header over the hero's photo, turn on Transparent over the hero in the Header section. It works only when the hero is the first section on the page, its photo or video is Behind the heading with Full, and Overlay opacity is above 0%.
The Hero section opens a page with a large heading, a short paragraph, a photo or video, and up to two buttons. Merchants also call it a banner. To add one, click Add section in the editor and select one of the three Hero presets. It works best as the first section on your home page.
On a computer, the hero fills the screen below the header. On a phone, it is as tall as its content.
Presets
The Add section list shows three presets. Each one is a starting point, and its settings can change it into any of the others.
Hero, full screen
Hero, full screen, staggered
Hero, photo below the heading
Heading lines
Stacked, two lines
Staggered: left, center, right, three lines
Stacked, two lines
Photo or video
Behind the heading
Behind the heading
Below the heading
Button style
Links
Links
Buttons
Use it for
A brand line over a strong photo
A short three-word message
A photo that should not sit behind text
No preset comes with a photo. Until you choose one in Background image, the hero shows the page background.
Content
Setting
What it does
Heading
Each paragraph is one line of the heading, so press Enter to start a new line. A line you set in italics with the editor's italic button shows in thin letters. All other lines are bold.
Text
A short paragraph. With Along the bottom, it sits in the bottom right corner, across from the buttons. With Below the heading, it sits under the heading.
Second text
A second paragraph, placed before the last word with the second button. Shows when Copy and buttons is Beside the middle and the last word.
Note after the first word
A short line of small text to the right of the first line of the heading. Shows with Staggered: left, center, right.
Note before the last word
A short line of small text to the left of the last line. Shows with Staggered: left, center, right and Along the bottom.
Leave a note empty to hide it. Headings show in capital letters when Uppercase headings is on in Typography settings, as it is in the Checkmate style.
Heading layout
Setting
What it does
Heading lines
Stacked puts the lines one above the other. Staggered: left, center, right puts the first line at the left, the second in the center and the third at the right, and shows the middle line in slightly thinner letters. A staggered line never wraps, so keep each one to a short word or two.
Heading size
L is the default. M shows the heading at 80% of that size and S at 65%.
Heading alignment
Shows with Stacked. Left, Center or Right places the heading. Automatic centers it when the photo is below the heading, and aligns it left otherwise.
Copy and buttons
Shows with Staggered: left, center, right, unless Photo or video is Below the heading. Along the bottom puts both buttons in the bottom left corner and Text in the bottom right. Beside the middle and the last word puts Text and the first button at the end of the middle line, and Second text and the second button before the last word.
On a phone, a staggered heading lines up at the left, and each note sits under its word.
Media
Setting
What it does
Background type
Image shows a photo, Video plays a video you upload or link to, and YouTube or Vimeo plays a video from one of those sites. Color fills the section with one color, and None shows the page background.
Photo or video
Behind the heading puts the photo or video behind the text. Below the heading puts it in a box under the heading, and both buttons sit on the photo at its bottom. Shows when Background type is a photo or a video.
Background image
The photo. For a video, it is the still image shown before the video plays, and to visitors whose device is set to reduce motion.
Mobile image
A separate photo for phones, such as a taller crop. Leave it empty to use Background image on every screen. Shows when Background type is Image and Background image has a photo.
Background color
Shows with Color. Surface and Surface, stronger are the theme's two light background shades, and they turn dark in dark mode. Custom shows a color picker, and the color stays the same in both modes.
Text color
The color of the heading, the paragraph and the buttons over a photo, a video or a custom color. With Below the heading, it colors only the second button, because the heading sits on the page.
Background video
Shows with Video. A video you upload to Shopify.
Video file link
Shows with Video. A link to an MP4 file, used only when Background video is empty. For a file in Content > Files in your Shopify admin, copy its link there.
Video URL
Shows with YouTube or Vimeo. The video's address, such as
https://www.youtube.com/watch?v=followed by the video's code.Background width
Full stretches the photo or video to the edges of the screen. Inset leaves a margin on both sides and rounds the corners.
Overlay opacity
Darkens the photo or video, from 0% to 100%. Above 0%, the heading, the paragraph and the buttons switch to the colors they use in dark mode, so they stay readable.
A background video plays muted, in a loop, with no controls. To show a video with sound and a play button, use the Video section. These background settings appear in other sections too, and Section background settings covers them in more detail. Color settings explains dark mode.
Buttons
Setting
What it does
Button style
Buttons shows the first button filled, with an arrow in a circle, and the second as plain text that gets a light fill when the pointer is over it. Links shows both as large underlined words, the first one darker and followed by an arrow.
Button label and Button link
The first button. Leave the label empty to hide it.
Second button label and Second button link
The second button. Leave the label empty to hide it.
Spacing
Margin top and Margin bottom add space above and below the hero, from None to 120 px. The first section on a page never has space above it, whatever you choose. The sizes shrink on smaller screens, as Section layout settings explains.
Motion
Setting
What it does
Dark moment
Turns the page dark while the hero is in the middle of the screen.
Rise on scroll
The hero starts slightly smaller and lower, and grows into place as it scrolls into view.
Background parallax
Moves the photo or video a little slower than the page as customers scroll. On by default. Shows when Background type is Image or Video.
Chapter title
The name shown in the corner of the screen while this section is in view, when Chapter indicator is on in Animation settings.
Animate heading on load
Brings the heading in word by word when the page opens. Turn it off to show the heading at once.
Section motion settings describes Dark moment, Rise on scroll and Chapter title in detail.
To show the header over the hero's photo, turn on Transparent over the hero in the Header section. It works only when the hero is the first section on the page, its photo or video is Behind the heading with Full, and Overlay opacity is above 0%.