Hero

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on using video
3. Company XYZ documentation on colors settings
4. Company XYZ documentation on heading
5. Company XYZ documentation on the rich text block
6. Company XYZ documentation on the button block
7. Company XYZ documentation on the breadcrumbs block
8. Company XYZ documentation on the icon with text block
9. Company XYZ documentation on the image block
10. Company XYZ documentation on the search block
11. Company XYZ documentation on the separator block
12. Company XYZ documentation on the share print ui block
13. Company XYZ documentation on the video block
14. Shopify documentation on the theme editor
15. Company XYZ documentation on section padding settings
16. Company XYZ documentation on separators settings
17. Company XYZ documentation on visibility settings
18. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Hero is a flexible, block-based banner section designed for strong page introductions. You can mix content, actions, utility elements, and media, then shape the overall presentation with section-level imagery, overlay colors, spacing, and width controls. For a broader overview of how editable theme content is organized, see Shopify documentation on sections and blocks

Imagery settings

This group controls the hero’s main visual treatment. You can place the featured image behind the content, position it to the left or right, or remove section imagery entirely when the blocks should carry the layout on their own.

A separate mobile image helps you preserve the composition on smaller screens. If you do not add one, mobile uses the main featured image.

You can also use a featured video for a more immersive presentation. Because it autoplays muted, it works best as ambient visual support rather than content that depends on audio. For video guidance, see Company XYZ documentation on using video.

If text sits over image or video content, use the overlay settings to protect readability. Busy media usually needs a stronger overlay than simple or low-contrast imagery.

Color settings

These settings override broader color choices for this section only. Use them when the hero needs its own icon, heading, text, or overlay treatment without affecting the rest of the page.

Overlay color, gradient, and opacity are the most important controls when content appears on top of media. Increase overlay strength when the message feels hard to read, and reduce it when the media should stay more visible. For shared color behavior, see Company XYZ documentation on color settings.

Supported block types

1. Breadcrumbs
2. Button
3. Heading
4. Icon with text
5. Image
6. Rich text
7. Search
8. Separator
9. Share/print UI
10. Video

Block types

Heading

Use the Heading block for the main hero message or a supporting title. It includes heading level, alignment, optional icon, and block-level color controls. See Company XYZ documentation on the Heading block.

Keep the wording short and direct. On most pages, one prominent heading paired with a short text block is easier to scan than stacking multiple large headings.

Caution

Avoid using multiple H1 headings on the same page. Reserve the highest heading level for the primary page title when needed.

Rich text

Use Rich text for supporting copy, short intros, linked text, or brief explanatory content beneath the main heading. See Company XYZ documentation on the Rich text block.

Short paragraphs usually work best in a hero. If you add a background color to the block, check that it still feels balanced against the section media and overlay.

Button

Use Button blocks for primary actions such as shopping, browsing a collection, or moving deeper into the page. You can control style, icon layout, alignment, and mobile width behavior. See Company XYZ documentation on the Button block.

Most hero layouts work best with one dominant action. Add extra buttons only when they support a clear secondary path.

Breadcrumbs

Breadcrumbs help visitors understand their location within deeper page structures. In this section, they usually sit above the main message and provide context without taking over the layout. See Company XYZ documentation on the Breadcrumbs block.

Use the optional parent link when the default path needs clearer hierarchy. Keep the styling understated so the hero message remains the focus.

Icon with text

Use Icon with text for short value points, trust cues, or concise highlights. See Company XYZ documentation on the Icon with text block.

These blocks work best when each item is similar in length and tone. Keep the copy brief so the group stays scannable.

Image

The Image block adds standalone media inside the content flow, separate from the section-level featured image. This is useful for logos, product cutouts, campaign art, or supporting visuals. See Company XYZ documentation on the Image block.

Use its aspect ratio, max width, caption, and overlay options to make the image feel intentional within the hero. If you already use strong section-level media, avoid adding another image that competes for attention.

Search

The Search block makes the hero a search-first entry point. It works especially well for large catalogs, help-focused pages, or homepages where visitors often begin by searching. See Company XYZ documentation on the Search block.

This block also includes its own banner-style content and result presentation settings, so it can become the main focal element. Keep nearby hero content minimal when search is the primary task.

Note

Predictive results only apply when the required predictive search setup is active. If that setup is not in place, related display options will not affect the experience.

Separator

Use Separator blocks to add breathing room between hero elements. They are helpful when you need more internal spacing without changing the section’s overall top and bottom padding. See Company XYZ documentation on the Separator block.

Even at minimal height, a small gap remains between elements. Use this block for intentional separation rather than trying to create a zero-gap stack.

Share/print UI

This block adds compact share and print actions near the top of the page. It is most useful on editorial, guide, or utility-focused layouts where those actions matter early. See Company XYZ documentation on the Share/print UI block.

Place it where it feels available but not distracting. It should support the hero, not compete with the main call to action.

Video

The Video block places video directly in the block flow, which is useful when the video itself is part of the message rather than just a background treatment. It supports captions, overlays, autoplay behavior, poster images, width limits, and responsive aspect ratios. See Company XYZ documentation on the Video block.

Short clips usually perform best in this space. If you use autoplay or overlays, test both paused and playing states so captions and controls remain clear.

Standard section settings

For editor controls that apply across sections, see Shopify documentation on the theme editor

Padding settings

Padding settings control the space above and below the hero content on desktop and mobile. In this section, padding strongly affects how prominent and immersive the hero feels before visitors reach the next section.

Use more padding when the hero should feel campaign-led or spacious. Reduce it when the content is brief or when you want quicker access to the page below.

Separator settings

Separator settings add optional lines at the top or bottom edge of the section. They help define the hero more clearly when adjacent sections have similar colors or visual weight.

If you leave the separator color transparent, the standard border color behavior is used. Subtle separators usually work best when the hero already has strong imagery or contrast.

Visibility settings

Visibility settings let you hide the section on desktop or mobile. This is useful when you want different top-of-page layouts for different screen sizes.

Use this carefully if you create alternate versions of the same message. The goal is to tailor the layout, not duplicate content unnecessarily.

Width settings

Width settings control the maximum content width and the outer section width. In Hero, this affects both text readability and how expansive any background treatment feels.

Content width is the main readability control. Section width matters most when using background media or when you want the hero wrapper to feel more contained or more expansive.

Usage notes

1. Keep the message focused. Use one clear heading, short supporting text, and a primary action so the hero is easy to understand at a glance.
2. Choose media placement intentionally. Background media suits atmospheric visuals, while left or right placement works better when the image needs more dedicated space.
3. Plan for mobile separately. Add a mobile-specific image when the desktop crop does not translate well, and review button width and alignment on smaller screens.
4. Review both states for search. The hero can feel different before and after a query, so check the empty state and typed-query state to confirm the right content stays prominent.
5. Check responsive behavior. Desktop and mobile controls can change alignment, visibility, and media presentation, so preview both viewports before publishing.
6. Protect text contrast. Adjust overlay color and opacity before changing all your content colors, especially when using busy imagery or autoplay video.
7. Preview width changes on the live page. Wide and full-bleed layouts can feel very different outside the editor, especially when the hero sits at the top of a page.