Hero - Basic

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Hero – Basic section creates a visually impactful hero area, helping to focus attention and add immediate context to articles, blog pages, and landing experiences. It includes flexible options for displaying your titles, author information, navigation breadcrumbs, and other details. Designed for a strong first impression, you can adapt Hero – Basic to fit your brand, storytelling, and communication priorities.

⚠️ Important: Hero – Basic enables you to create engaging introductions that support visual appeal, branding, and seamless reader navigation.

Key components and functionality

Section overview

Hero – Basic features extensive options for controlling your hero header’s look and which meta information is included. These highly adaptable settings provide clarity and enhance user engagement while supporting your content's core message.

Hero layout and content display

This collection of settings determines the overall look and function of the hero, balancing imagery with crucial information at the top of your page.

Featured image placement

Select how and where a featured image appears in the hero area. This decision directly shapes the section’s visual structure.

1. Background
   The featured image spans the hero's background for a full-bleed immersive effect.

2. Left
   The image appears on the left, creating a dynamic split visual.

3. Right Default: right
   The image displays on the right, offering a classic hero layout.

4. No image
   The image is omitted, so focus remains on headings and meta details.

Text alignment

Choose how the hero's text content is aligned (left, center, or right) to best complement your image placement and overall style for optimal readability and impact.

Show author

Control whether the author's name appears in the hero area. Use this for a personal or professional touch based on your content strategy. Default: enabled

Show breadcrumbs

Toggle breadcrumb navigation to guide users and clarify their current location in your site. Default: enabled

Show date

Display or hide the published date for the article or blog post, keeping readers informed about content relevancy. Default: enabled

Show excerpt

Decide if a summary or teaser excerpt shows in the hero, encouraging clicks and further reading.

1. Showing an excerpt can grab attention and drive visitor engagement.

2. Default: disabled

   1. For clarity, keep excerpts concise if using a background image.

Expandable

Let you make hero text expandable or collapsible, minimizing visual clutter while keeping in-depth context readily available when needed.

Show print button

Add a print icon to offer users a one-click option to print the hero section. Default: disabled

Show share button

Enable a share icon for visitors to easily distribute the page across their preferred platforms. Default: enabled

Show tags

Show associated content tags in the hero section, supporting content discovery and navigation. Default: enabled

Supported block types

Hero – Basic does not use separate content blocks. Instead, all content is managed and customized directly through the section’s own settings for a simpler editing workflow.

Usage notes

⚠️ Important: To maximize performance and accessibility, use properly sized images, include relevant alt text, and confirm that overlay and text color combinations are readable on all backgrounds.

1. Preview your section on both desktop and mobile to confirm responsive behavior and consistent visual appeal.

2. Display metadata like author, date, and tags only when they add value; avoid unnecessary elements to keep the hero focused.

3. Use the expandable content feature for lengthy introductions, keeping the hero tidy but informative.

4. Test overlay and alignment options when a background image is used to help your content remain legible and visually engaging.

💡 Tip: Mix and match alignment, image placement, and excerpt settings for an eye-catching hero section that highlights your most important content. Fine-tune each setting for the best user experience.

Default options are shown in italic text. Adjust settings according to your goals for maximum impact.