Hero Banners

The hero section is the main banner area on your storefront homepage. It supports single images, carousels, and video backgrounds.

Creating a Hero

Go to Admin → Hero
If no hero exists, click Create Hero
Configure the hero settings:

Setting	Description	Default
Name	Internal name for the hero	—
Display Type	`carousel`, `single`, or `slideshow`	`carousel`
Autoplay	Auto-advance slides	`true`
Autoplay Interval	Seconds between slides	`5`
Show Indicators	Show dot indicators	`true`
Show Navigation	Show prev/next arrows	`true`
Aspect Ratio	Image aspect ratio (e.g., `16/9`)	`16/9`
Max Height	Maximum height in pixels	—
Visibility	`public`, `private`	`public`
Active	Enable/disable the hero	`true`

Adding Slides

Each hero has one or more slides (hero items):

Click Add Slide
Configure the slide:

Setting	Description
Background Type	`image`, `video`, or `color`
Background Image	Image URL
Background Video	Video URL (MP4/WebM)
Background Color	CSS color for solid backgrounds
Overlay Color	Color overlay on top of background
Overlay Opacity	Opacity of the overlay (0–1)
Title	Main heading text
Subtitle	Secondary text
Description	Additional text
CTA Button	Call-to-action text + URL
Secondary CTA	Secondary button text + URL
Content Position	Where text appears on the slide
Text Alignment	Left, center, right
Mobile Image	Separate image for mobile devices
Hide on Mobile	Hide slide on small screens
Hide on Desktop	Hide slide on large screens

Scheduling

Slides can be scheduled with start and end dates:

Field	Description
Starts At	Slide becomes visible at this date/time
Ends At	Slide is hidden after this date/time

Leave both empty for always-visible slides. Use for seasonal promotions, flash sales, or timed campaigns.

Storefront Display

The hero and its items are available via the storefront API. Use the storefront components:

<HeroRoot>
  <Carousel>
    <CarouselContent>
      <HeroItems>
        <CollectionView>
          <CarouselItem>
            <div class="relative">
              <HeroBackground class="w-full aspect-video object-cover" />
              <div class="absolute inset-0 flex items-center">
                <div class="max-w-xl px-8">
                  <HeroTitle class="text-4xl font-bold text-white" />
                  <HeroSubtitle class="text-xl mt-2 text-white/80" />
                  <HeroCtaPrimary class="mt-6" />
                </div>
              </div>
            </div>
          </CarouselItem>
        </CollectionView>
      </HeroItems>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</HeroRoot>