Section: Hero

Everything you'll need to know on how to setup your Hero section.

The Hero section is the bold first impression of your store. Three layout modes ship out of the box: Single (full-bleed image or video with content overlaid — classic banner), Split (image on one side, content on the other — editorial), and Featured product (one product spotlighted with price and Add-to-cart). The section supports a mobile-specific image, ken-burns zoom, a word-reveal heading animation, four eyebrow styles, decorative grain/grid overlays, six shape dividers, up to two CTA buttons, and up to six feature pill blocks.

To activate this section, add it to your page. Steps below.

1) Click Add section in your left sidebar.

2) Search for Hero, then click it.

3) Done — choose a layout mode below and start configuring.

The Layout setting is the master switch — it decides which other settings are visible and how the Hero renders. Three options: Single banner (full-bleed image or video with content overlaid — the classic Hero), Split (image + content) (image fills one side, content the other), and Featured product (replaces content with one spotlighted product showing image, vendor, price and an Add-to-cart button). Default: Single banner.

Only visible when Layout is Split or Featured product. Choose whether the image sits on the Left or Right. Default: Right (content reads first on left-to-right languages).

Color scheme for the section. Pick from the schemes set up in Theme Settings → Colors. Controls fallback text and button colours.

Hero height on desktop in pixels (200–900 px, step 10). Default: 640.

Hero height on mobile in pixels (150–700 px, step 10). Default: 480.

Maximum width of the content column inside the Hero (480–1200 px, step 20). Default: 760. Narrower keeps text on a comfortable reading line; wider lets long headlines breathe.

Only visible when Layout is Single. Adds a subtle texture over the background: None, Grain (film noise, premium feel), or Grid (faint geometric lines). Default: None.

Only visible when Layout is Single. Shows a small animated chevron at the bottom of the Hero hinting visitors to scroll. Default: on.

Hidden when Layout is Featured product (the product image replaces the background).

Main background image. Recommended size: 2400 × 1080 px. Shown on screens wider than 768 px.

Optional portrait-friendly image for mobile devices. Recommended size: 900 × 1200 px (portrait). If empty, the desktop image is used and cropped to fit.

Only visible when Layout is Single. Upload a video to use as the background. Plays muted, autoplays and loops. If both an image and a video are set, the video takes priority.

Only visible when Layout is Single. Dark overlay on top of the image/video so text stays readable (0–80%, step 5). Default: 40%. Bump to 50–70% if your image is busy or pale.

Only visible when Layout is Single. Slow zoom-in effect on the background image — gives static photos a cinematic feel without needing video. Automatically respects Reduced motion in the visitor's OS. Default: on.

All settings under this group only apply when Layout is set to Featured product. They turn the Hero into a single-product spotlight with image, optional vendor, price and Add-to-cart button.

Pick the product to feature. The product's featured image fills one side of the Hero, and its title, price and Add-to-cart button render on the other side.

Small uppercase label above the product title. Default: Featured Product. Use it to flag context (Just dropped, Best seller, Limited edition).

Replace the product's title with custom copy. Leave empty to use the product's real title (recommended). Useful for marketing headlines that read better than the SKU-style title.

Replace the product's description with custom copy. Leave empty to use the product's short description (recommended). Keep it to 1–2 sentences — the Hero isn't a product page.

Add-to-cart button label. Default: Shop now. Falls back to a translated default when empty.

Tick to show the product price under the title. Default: on.

Tick to show the vendor (brand) above the title. Default: off. Useful for multi-brand stores; redundant for single-brand catalogues.

Adds a decorative SVG shape at the bottom edge of the Hero, blending into the next section. Works with any layout mode.

Six options: None, Wave (organic, soft), Curve (single arc), Slant (diagonal line), Triangle (sharp, modern), Arrow (centred point). Default: None.

Colour of the divider shape. Match this to the background colour of the section below the Hero so the transition looks intentional. Default: #ffffff.

Vertical size of the divider in pixels (20–150, step 5). Default: 60. Taller dividers make the transition more dramatic.

Mirror the divider horizontally. Useful for the slant and arrow shapes which are asymmetric.

Flip the divider upside down — turns a concave wave into a convex bump, etc.

Hidden when Layout is Featured product (the product data replaces these fields).

Small uppercase label above the heading. Default: New Collection. Leave empty to hide.

Visual treatment for the subheading: None (plain text), Line (small horizontal rule next to the label — default, editorial), Dot (bullet dot prefix), or Brackets (square brackets around it — bold/tech feel).

The main headline, rendered as H1 for SEO. Default: Crafted for everyday. Leave empty to hide. On the blog template, the blog title is shown automatically instead.

Animate the heading one word at a time as the Hero loads — creates a sophisticated entrance. Automatically respects Reduced motion in the visitor's OS. Default: on.

Supporting paragraph below the heading. Default copy provided. Leave empty to hide. Keep it short — 1–2 sentences max.

The main call to action of the Hero. Hidden when Layout is Featured product.

Label shown on the button. Default: Shop Now. Leave empty to hide the button entirely.

Where the button links. Use a collection, product, or any internal/external URL.

Optional second CTA — typically a less important link (Learn more, View collection). Hidden when Layout is Featured product.

Label for the secondary button. Default: Learn More. Leave empty to hide.

Where the secondary button links.

Applies to both buttons: Small, Medium (default), or Large.

Controls where the content sits inside the Hero. Hidden when Layout is Featured product.

Only visible when Layout is Single. Where the content block sits inside the Hero: Center, Left, Right, Top, or Bottom. Default: Center.

Text-align of the content block: Left, Center, or Right. Independent from Content position — you can position content on the right with centre-aligned text.

Entry animation of the content elements (subheading, heading, description, buttons) when the Hero loads.

Length of each element's entry animation. Range 3–20. Value divided by 10 — for example, 8 means 0.8 seconds. Higher = slower. Default: 8 (0.8s).

Stagger delay between subheading → heading → description → buttons. Range 1–5. Value divided by 10 — for example, 2 means 0.2 seconds. Default: 2 (0.2s).

Optional reassurance pills below the buttons — perfect for shipping/returns/security claims. Click Add block inside the section and choose Feature. Maximum: 6 blocks.

Optional small image rendered before the feature text. Ideal size: 24 × 24 px, PNG with a transparent background or SVG.

Short reassurance copy. Default: Free shipping over $50. Examples: 30-day returns, Secure checkout, Ships from Madrid.

Optional URL. When set, the pill becomes clickable (e.g. linking 30-day returns to your returns policy page).

Single is the default — best for brand-focused hero banners with a strong photo or video. Split is editorial — best when you want the product/lifestyle image and the headline to share equal weight. Featured product is conversion-focused — best when one hero product is the entire pitch (e.g. a product launch landing page).

Background videos require the Layout to be Single. They also always play muted on autoplay. Some browsers block autoplay in the draft preview — always test on the published storefront. If the video still doesn't play, ensure the file is MP4 H.264 and under 25 MB.

On the blog template the section automatically shows the blog title instead of the Heading field — by design, so the Hero stays in sync with each blog. To change it, edit the blog title in Online Store → Blog posts → Manage blogs.

Increase Overlay opacity to 50–70%, or pick a darker colour scheme. A dark overlay makes white text legible on any background. If the image is very busy, also try the Grain decorative layer — it adds enough texture to break up high-contrast spots.

The image is scaled to cover the Hero, which crops the edges. Make sure the subject of your mobile image is centred and upload a dedicated portrait image (e.g. 900 × 1200 px) instead of relying on the desktop image.

The word-reveal heading animation has a dedicated toggle (Word-by-word reveal). The other entry animations are always on but automatically skip for visitors who have Reduced motion enabled in their OS — this is intentional for accessibility. To make the animations near-instant, lower the duration setting to 3.

Yes — leave the Subheading, Heading, Description and both Button text fields empty. The Hero will render as a pure image/video banner with optional feature pills.