Hero - Basic

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on customizing sections
3. Company XYZ documentation on colors settings
4. Company XYZ documentation on section padding settings
5. Company XYZ documentation on separators settings
6. Company XYZ documentation on visibility settings
7. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Hero - Basic highlights the page title and key supporting details at the top of article and blog pages. It can also pull in the featured image when one is available, making it easy to create a stronger visual header without adding extra content blocks. For an overview of how theme sections are organized, see Shopify documentation on sections and blocks

Core settings

These settings shape the overall structure of the hero and decide how much supporting information appears around the title.

1. Featured image placement sets the visual tone of the header. Use a background image for a more immersive look, choose left or right placement when you want a clearer split between image and text, or remove the image entirely for a simpler editorial layout.
2. Text alignment affects how formal, dramatic, or readable the header feels. Left alignment is usually the easiest to scan for article content, while centered text can work well for a more styled presentation.
3. Page details let you show or hide elements such as breadcrumbs, author, date, tags, sharing, and printing. Enable only the details that help visitors understand or use the page so the header stays focused.
4. Excerpt display adds a short summary when excerpt content exists. The expandable option is useful when you want to include more context without letting a long summary dominate the top of the page.

If you show both a long excerpt and several metadata items, the hero can become crowded quickly. When the title is already descriptive, a shorter summary usually works better.

Color settings

Color settings let you override the section’s default color treatment for this hero only. This is especially useful when the featured image or background treatment needs stronger contrast than the rest of the page design. See Company XYZ documentation on color settings.

1. Heading and text colors should be adjusted together so the title remains the strongest element while secondary details stay readable.
2. Icon color helps utility elements such as share or print actions stay visible without overpowering the main content.
3. Overlay color, gradient, and opacity are most important when the featured image is used as a background. Use them to improve readability while keeping enough image detail to support the design.

Tip

Start by setting the overlay strength before changing text colors. In most cases, a well-balanced overlay solves readability issues more cleanly than using overly bright or dark text colors.

Standard section settings

If you want a broader overview of section controls in the theme editor, see Shopify documentation on customizing sections

Padding settings

Padding settings control the space above and below the hero content on desktop and mobile. Use more padding when the section includes a background image or excerpt so the header feels intentional rather than cramped. Reduce padding when you want a tighter, more utility-focused page header.

Separator settings

Separator settings let you add a line above or below the section. In this hero, separators work well when you want a clearer break between the page header and surrounding content. If you leave the separator color transparent, the theme’s default border color behavior is used.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This can help when an image-heavy header feels effective on larger screens but too tall on smaller ones. Make sure the page still has clear title context on any device where the hero is hidden.

Width settings

Width settings control the maximum width of the content and the outer width of the section itself. Narrower content widths can improve readability for titles and excerpts, while wider section widths make a stronger impact when you use a background image. Check width changes on the live page view when possible, since editor framing can make spacing feel different.

Usage notes

1. Choose image placement intentionally. Background images create a stronger visual statement, while side placement or no image keeps the title and details easier to scan.
2. Keep supporting details selective. Show only the metadata and utility actions that add real value so the header does not compete with the page content.
3. Use excerpts for context, not repetition. A good excerpt should add a helpful summary instead of restating the title in longer form.
4. Prioritize contrast. When using a background image, adjust overlay and text colors together so the heading stays easy to read across the full image area.
5. Review mobile layout carefully. Check spacing, visibility, and excerpt length on smaller screens so the header feels balanced and does not push the main content too far down.
6. Compare both viewports. Desktop and mobile controls can produce different alignment, visibility, and media behavior, so review the hero on both screen sizes before publishing.
7. Use local overrides sparingly. Blank or default-style values usually preserve fallback styling, while explicit colors, gradients, or media choices make this hero feel more independent from the rest of the page.