Hero Section — Configuration Guide

This guide explains how to configure the Hero section in the theme editor. The section is empty-state safe and its behavior/styling is provided by theme assets.

Location

Theme editor: Add the "Hero" section to a page and configure settings and slides.
Section source: See sections/hero.liquid.

Section Settings

Height: Controls vertical size (small, medium, large, full). Applies classes like hero--height-small.
Overlay style: Visual overlay (none, light, medium, dark, gradient_tb, gradient_bt). Applies classes like hero--overlay-none.
Show arrows: When enabled and there are multiple slides, renders previous/next arrow markup.
Show pagination dots: When enabled and there are multiple slides, renders dot controls markup.
Show slide counter: When enabled and there are multiple slides, renders a simple counter (e.g., 1 / N).
Auto-rotate slides: Optional flag to designate autoplay intent.
Auto-rotate interval (seconds): Interval for auto-rotation; accepts 6–12 seconds.
Transition type: Visual transition hint (fade, slide).

Note: Settings above map to data attributes and classes in markup only. Behaviour (e.g., actual sliding/autoplay) is not wired in this task.

Slide Blocks (type: `slide`)

Each slide supports the following optional content. Missing values are safely ignored.

Desktop image (image_desktop): Preferred image for larger screens.
Mobile image (image_mobile): Source for small screens; if desktop is missing, mobile is used as fallback.
Content alignment (horizontal) (content_align_h): Positions content (left, center, right).
Content alignment (vertical) (content_align_v): Positions content (top, middle, bottom).
Content container style (content_container_style): Wraps content for readability (none, card).
Eyebrow (eyebrow): Optional short label shown above the heading.
Heading (heading): Primary title.
Subheading (subheading): Supporting text.
Primary CTA label/url (primary_cta_label, primary_cta_url): Renders only if both label and URL are provided.
Secondary CTA label/url (secondary_cta_label, secondary_cta_url): Renders only if both label and URL are provided.

Empty-State Safety

If no slides are added, the section renders without slide/content markup.
If images are missing, textual content and CTAs still render when provided.
Image alt text uses the uploaded asset’s alt; missing values default to an empty string.

Practical Tips

Prefer high-resolution images for desktop (e.g., ~2000px width) and appropriately sized mobile images (~750–1100px widths).
Keep copy concise to avoid overflow at smaller heights.
Use alignment settings to ensure content remains readable on varying imagery.