> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hero alt

> Alternative hero banner with adjustable height and side-by-side text and media layout

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

<AccordionGroup>
  <Accordion title="Banner height">
    **Hero alt banner height** — Control the vertical height of the hero section as a percentage of the viewport height.

    Range: 40vh to 100vh (default: 50vh)

    Step: 10vh increments

    <Tip>
      Use 50vh (half screen) for balanced layouts that don't dominate the page. Use 100vh (full screen) for dramatic, immersive hero experiences.
    </Tip>
  </Accordion>

  <Accordion title="Section width">
    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
  </Accordion>

  <Accordion title="Color scheme">
    Select the background and text color scheme for the section (default: scheme-1).
  </Accordion>

  <Accordion title="Spacing">
    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.
  </Accordion>

  <Accordion title="Section border">
    Add decorative borders:

    * **None** (default) — No borders
    * **Top** — Border above the section
    * **Bottom** — Border below the section
    * **Both** — Borders above and below
  </Accordion>
</AccordionGroup>

## Block: Text

The text content block displays promotional messaging and call-to-action. Limited to **1 block** per section.

<AccordionGroup>
  <Accordion title="Content">
    **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."
  </Accordion>

  <Accordion title="Call-to-action button">
    **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.
  </Accordion>
</AccordionGroup>

## Block: Media

The media block displays an image alongside the text content. Limited to **1 block** per section.

<AccordionGroup>
  <Accordion title="Image">
    Upload an image using Shopify's image picker. This image appears in a side-by-side layout with the text block.

    <Tip>
      Use high-quality images that complement your promotional message. Ensure images are optimized for web to maintain fast loading times.
    </Tip>
  </Accordion>
</AccordionGroup>

## 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

<CardGroup cols={2}>
  <Card title="Height selection" icon="arrows-up-down">
    Use 50vh for balanced layouts that leave room for content below. Reserve 100vh for landing pages or major promotional campaigns.
  </Card>

  <Card title="Image quality" icon="image">
    Use high-resolution images (at least 2000px wide) to support full-width displays on large screens without quality loss.
  </Card>

  <Card title="Text brevity" icon="align-left">
    Keep title and subtitle concise for maximum impact. Long text blocks can overwhelm the hero layout.
  </Card>

  <Card title="Button clarity" icon="hand-pointer">
    Use action-oriented button text like "Shop Now", "Learn More", or "Get Started" rather than generic "Click Here".
  </Card>

  <Card title="Button separator" icon="minus">
    Keep the button separator enabled for visual hierarchy, especially when using default or outlined button styles.
  </Card>

  <Card title="Mobile testing" icon="mobile">
    Preview on mobile devices where the side-by-side layout may stack vertically. Ensure content remains readable.
  </Card>
</CardGroup>

## 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

| Feature        | Hero alt              | Hero banner                   |
| -------------- | --------------------- | ----------------------------- |
| Max blocks     | 2 blocks              | Unlimited slides              |
| Layout         | Side-by-side          | Full-width image with overlay |
| Height control | Adjustable (40-100vh) | Typically fixed or auto       |
| Complexity     | Simplified, focused   | Feature-rich with slideshows  |
| Best for       | Direct messaging      | Multiple products/messages    |

Use **Hero alt** for simpler, more focused promotional messaging. Use **Hero banner** for complex slideshows or multiple promotional messages.

## Related sections

<CardGroup cols={2}>
  <Card title="Hero banner" icon="image" href="/themes/sahara/sections/hero-banner">
    Full-featured hero section with slideshow capabilities
  </Card>

  <Card title="Full width banner" icon="panorama" href="/themes/sahara/sections/full-width-banner">
    Simple full-width banner section
  </Card>
</CardGroup>