Hero Banner

What this section does

Full-width hero section with media support

Where it goes

• Can be used at most 1 time(s) on one page.
• This section is in every plan — no extra plugin needed.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Centered Flex

  Freecentered

  Flexible hero where the text and image follow the horizontal alignment

  Specific to this style: badge, title, subtitle, buttons, media

• Split Layout

  Freesplit

  Text on one side, full-height image on the other. Use Reverse Layout to swap sides.

  Specific to this style: badge, title, subtitle, buttons, media, reverseLayout, imageRatio

• Video Background

  Page Editorvideo-background

  Full-screen video with overlay text

  Specific to this style: badge, title, subtitle, buttons, media, overlayOpacity

• Mosaic Split

  Page Editormodern-dark

  Split hero with a text column and a 2×2 image mosaic, plus subtle animated gradient accents

  Specific to this style: badge, title, subtitle, buttons, galleryImages, showFloatingOrbs

• Media Gallery

  Page Editormedia-gallery

  Hero with media gallery grid

  Specific to this style: badge, title, subtitle, buttons, mediaItems, galleryColumns

• Image Links

  Page Editorimage-links

  Hero with 6 clickable image cards linking to pages

  Specific to this style: badge, title, subtitle, buttons, imageLinks

• Cards Hero

  Page Editorcards-hero

  Hero with featured product/category cards

  Specific to this style: badge, title, subtitle, buttons, imageLinks

• Image Gallery

  Page Editorimage-gallery

  Clean light-themed gallery with multiple images

  Specific to this style: badge, title, subtitle, buttons, galleryImages, galleryColumns

• Hercules Power

  Page Editorhercules-power

  Energy-packed hero design with strong visual impact

  Specific to this style: badge, title, subtitle, buttons, media

• Portrait Videos

  Page Editorportrait-videos

  Large 9:16 portrait videos shown beneath the text content. Reels/TikTok-style showcase.

  Specific to this style: badge, title, subtitle, buttons, portraitVideos, portraitVideoLayout

• Joy Blob

  Page Editorjoy-blob

  Morphing color blob with floating product images, stats row and dual CTA

  Specific to this style: badge, title, subtitle, buttons, blobColor1, blobColor2, blobColor3, blobColor4, enableMorph, enableFloat, floatingItems, stats

• Cinematic Luxe

  Page Editorcinematic-luxe

  Dark full-bleed cinematic hero with Ken Burns background, Pinyon Script accent, mask-wipe title reveal and color-flip cream CTAs

  Specific to this style: media, overlayOpacity, scriptAccent, badge, title, subtitle, buttons, kenBurnsEnabled

• Editorial

  Page Editoreditorial-marquee

  Asymmetric editorial split — oversized title, alignment-aware image montage, and a brand-keyword marquee beneath

  Specific to this style: badge, title, subtitle, buttons, galleryImages, marqueeItems, marqueeSpeed

• Bento Magnetic

  Page Editorbento-magnetic

  Headline left + modular bento card grid right; staggered scroll-reveal and magnetic CTA

  Specific to this style: badge, title, subtitle, buttons, bentoCards, cursorBlobEnabled, stats

• Stat Band

  Page Editorstat-band

  Centered headline with an integrated band of key metrics

  Specific to this style: badge, title, subtitle, buttons, media, stats

• Split Showcase

  Page Editorsplit-showcase

  Badge, headline with a highlighted word, subtitle and two CTAs beside a large image, with a metric row and a thumbnail strip beneath

  Specific to this style: badge, title, subtitle, buttons, media, reverseLayout, imageRatio, stats, stripImages

• Diagonal Split

  Page Editordiagonal-split

  Copy on the left, full-bleed media cut by a diagonal seam

  Specific to this style: badge, title, subtitle, buttons, media

• Spotlight Glow

  Page Editorspotlight-glow

  Dark stage with a radial spotlight and a glowing media frame

  Specific to this style: badge, title, subtitle, buttons, media

• Polaroid Stack

  Page Editorpolaroid-stack

  Copy on the left, tilted polaroid photo cards on the right

  Specific to this style: badge, title, subtitle, buttons, media, galleryImages

• Mega Type

  Page Editormega-type

  A giant edge-to-edge headline over a full-width media band

  Specific to this style: badge, title, subtitle, buttons, media

• Fullscreen Cover

  Page Editorfullscreen-cover

  Near-full-viewport cover image with a cinematic gradient and oversized headline

  Specific to this style: badge, title, subtitle, buttons, media

• Scroll Zoom

  Page Editorscroll-zoom

  Scroll-driven stage: inset media grows to full-bleed as the headline settles

  Specific to this style: badge, title, subtitle, buttons, media, overlayOpacity

• Index Reveal

  Page Editorindex-reveal

  Numbered collection index; hovering a row crossfades its full-bleed backdrop

  Specific to this style: badge, title, subtitle, imageLinks, overlayOpacity

• Cinematic Stats

  Page Editorcinematic-stats

  Full-bleed lifestyle image, left dark scrim, pill-chip eyebrow, big headline, dual CTA and a mini stats row

  Specific to this style: badge, title, subtitle, buttons, media, overlayDirection, overlayOpacity, statColor, stats

• Studio Split

  Page Editorstudio-split

  Huge headline left beside a large rounded photo card with a glass badge, a floating product chip and a meta-stats row

  Specific to this style: badge, title, subtitle, buttons, media, imageRadius, imageShadow, imageAspect, overlayBadgeText, emphasisStyle, nameFont, metaStats, showChip, chipImage, chipTitle, chipPrice

• Search Spotlight

  Page Editorsearch-spotlight

  Search-first hero: a headline over a full-width search field wired to the real product search, with popular-query chips underneath and optional background media.

  Specific to this style: badge, title, subtitle, searchPlaceholder, searchButtonText, suggestionsLabel, suggestions, searchWidth, overlayOpacity, buttons, media

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height