Page Hero

What this section does

Hero/header section for any page

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

  Freecentered

  Center-aligned badge, bold title and subtitle

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Split

  Freesplit

  Left-aligned text with right decorative illustration

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor, splitTagLabel

• Minimal

  Page Editorminimal

  Compact, clean heading with breadcrumb styling

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, textAlign, textColor, accentColor

• Gradient

  Page Editorgradient

  Vibrant gradient background with bold display title

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Magazine

  Page Editormagazine

  Editorial layout with large accent label, separator and title

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, buttons, accentLabel, accentColor, textAlign, textColor

• Hero Image

  Page Editorhero-image

  Full-width background image with centered text overlay

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, image, overlayOpacity, accentColor, textAlign, textColor

• Image Bottom

  Page Editorimage

  Full-width background image with text anchored at the bottom

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, image, overlayOpacity, accentColor, textAlign, textColor

• Wave

  Page Editorwave

  Gradient hero with an elegant SVG wave divider at the bottom

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor, showGlow

• Neon

  Page Editorneon

  Dark cinematic hero with glowing neon text and grid pattern

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Bold

  Page Editorbold

  Oversized display typography that makes the title impossible to miss

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Floating

  Page Editorfloating

  Centered title with animated floating category pill tags

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, floatingTags, accentColor, textAlign, textColor

• Diagonal

  Page Editordiagonal

  Bold two-panel layout split by a sharp diagonal — accent color floods the left, content lives right

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, buttons, accentColor, textAlign, textColor

• Retro

  Page Editorretro

  Newspaper brutalist design with thick borders and a flat color block — strong editorial identity

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Stack

  Page Editorstack

  Three rotated cards create depth — the front card holds your title and badge

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Billboard

  Page Editorbillboard

  Gigantic split typography: outline text stacked over solid accent — impossible to miss

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Typewriter

  Page Editortypewriter

  Animated cycling words — the headline continuously morphs through your categories

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, typewriterWords, accentColor, textAlign, textColor

• Glassmorphism

  Page Editorglass

  Colorful blurred blobs behind a frosted glass content card — premium and modern

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Geometric

  Page Editorgeometric

  Large CSS-drawn geometric shapes frame bold editorial left-aligned text

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Split Image

  Page Editorsplit-image

  Full-bleed image on the left, bold headline on the right — dramatic visual divide

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, image, overlayOpacity, accentColor, textAlign, textColor

• Aurora

  Page Editoraurora

  Animated northern-lights gradient pulsing behind oversized gradient-clipped text

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Sporty

  Page Editorsporty

  Full-bleed image with bottom-left anchored bold text. Athletic inner-page hero matching the sporty slider visual language.

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, image, overlayOpacity, accentColor, textAlign, textColor

• Joy Gradient

  Page Editorjoy-gradient

  Playful lilac→aqua collection banner with a rounded bottom, blurred decorative circles and floating fruit icons

  Specific to this style: showBadge, badgeText, title, highlightedWord, subtitle, crumbText, gradFrom, gradTo, inkColor, bottomRadius

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