Skip to main content
The Hero alt section provides an alternative hero banner design featuring a side-by-side layout with text content and media. Unlike the standard hero banner, this section offers a customizable viewport height and supports a maximum of two blocks for simpler, more focused messaging. Use this when you want a cleaner, less complex hero than the full hero banner provides.

​
What this section controls

This section controls hero banner displays with the following capabilities:
  • Adjustable viewport height (40vh to 100vh)
  • Side-by-side text and media layout
  • Maximum of 2 content blocks (1 text + 1 media)
  • Three width options (Page width, Fluid, Full width)
  • Text content with heading, description, and CTA buttons
  • Media support for images and videos
  • Color scheme and spacing controls

​
Section settings

Choose the overall container width:
  • Page width (default) — Standard container width
  • Fluid — Wider, edge-to-edge within padding
  • Full width — Complete edge-to-edge layout
Select the background and text color scheme for the section (default: scheme-1).
Control vertical spacing above and below the section with options from None to XL (0, S, M, L, XL). Default is M for both top and bottom.
Add decorative borders:
  • None (default) — No borders
  • Top — Border above the section
  • Bottom — Border below the section
  • Both — Borders above and below

​
Block: Text

The text content block displays promotional messaging and call-to-action. Limited to 1 block per section.
Subtitle — Secondary text appearing above the main title (default: “Highlight your promotion”)Title — Main heading text using textarea for multi-line support (default: “Highlight an image”)Content — Descriptive text with rich text formatting support. Default: “Add text to describe your promotion.”
Button style — Choose the visual appearance:
  • Filled (default) — Solid background button
  • Outlined — Border-only button
  • Default — Text-style link button
Button text — The button label (default: “View more”)Button URL — Destination link (default: /)Button separator — Enable a visual separator line above the button (enabled by default). This creates visual distinction between content and the call-to-action.

​
Block: Media

The media block displays an image alongside the text content. Limited to 1 block per section.
Upload an image using Shopify’s image picker. This image appears in a side-by-side layout with the text block.
Use high-quality images that complement your promotional message. Ensure images are optimized for web to maintain fast loading times.

​
Default configuration

The section preset includes both required blocks:
  • Text block — With subtitle, title, content, and button
  • Media block — For image display
This creates a complete side-by-side hero layout ready for customization.

​
Best practices

Height selection

Use 50vh for balanced layouts that leave room for content below. Reserve 100vh for landing pages or major promotional campaigns.

Image quality

Use high-resolution images (at least 2000px wide) to support full-width displays on large screens without quality loss.

Text brevity

Keep title and subtitle concise for maximum impact. Long text blocks can overwhelm the hero layout.

Button clarity

Use action-oriented button text like “Shop Now”, “Learn More”, or “Get Started” rather than generic “Click Here”.

Button separator

Keep the button separator enabled for visual hierarchy, especially when using default or outlined button styles.

Mobile testing

Preview on mobile devices where the side-by-side layout may stack vertically. Ensure content remains readable.

​
Use cases

  • Product launches — Announce new products with compelling imagery and promotional text
  • Seasonal campaigns — Highlight holiday sales or seasonal collections
  • Brand storytelling — Share brand values or mission with supporting visuals
  • Collection promotions — Feature specific product collections with targeted messaging
  • Landing pages — Create focused landing page heroes for marketing campaigns
  • Event announcements — Promote sales events, webinars, or special occasions
  • Value propositions — Communicate key benefits with visual reinforcement

​
Comparison with standard hero

FeatureHero altHero banner
Max blocks2 blocksUnlimited slides
LayoutSide-by-sideFull-width image with overlay
Height controlAdjustable (40-100vh)Typically fixed or auto
ComplexitySimplified, focusedFeature-rich with slideshows
Best forDirect messagingMultiple products/messages
Use Hero alt for simpler, more focused promotional messaging. Use Hero banner for complex slideshows or multiple promotional messages.

Hero banner

Full-featured hero section with slideshow capabilities

Full width banner

Simple full-width banner section