Hero banner
A large banner, usually the first thing someone sees at the top of a page. One background image (or video), a heading, a short line of text, and up to two buttons.
What it’s for. Setting the tone and pointing people somewhere — a new set in stock, a sale, “we buy cards,” your weekly tournament. It runs in one of two modes: a single banner, or a slideshow that rotates through several slides.
When to use it. Usually once, near the top of your homepage (it can also sit at the top of a collection or regular page). It’s the loudest thing on the page, so two stacked heroes just split attention — if you have several things to promote, use slideshow mode instead of adding more heroes.
Single banner vs slideshow
- Single banner — one image or video, one set of text and buttons. This is the only mode that supports a video background (hosted file, YouTube, or Vimeo) and a whole-banner link (the entire hero becomes one clickable link).
- Slideshow — turn on “Enable slideshow,” then add Slide blocks. Each slide has its own image, text, and buttons. You get auto-rotate (3–10s), fade or slide transitions, and optional arrows and dots. Slides don’t support video.
Ways to use it
- Single promo — one image, a headline like “Lorcana: Set 5 in stock,” and a “Shop now” button to the collection.
- Whole banner as a link — set a banner link and skip the buttons; the entire hero clicks through. Good for a single “tap to shop” campaign image.
- Rotating announcements — slideshow mode with a few slides for multiple releases or events.
- Video moment — a short muted, looping clip of the shop or a product behind your text.
Tips
- Set a separate mobile image. A wide desktop banner crops badly on phones, and text can land on a busy part of the picture.
- If text is hard to read over a busy image, raise the overlay — it fades the image toward your store’s background color so the text stands out. (Text and overlay both follow your theme colors, so this works in light or dark stores.)
- If your art is getting cropped in a way you don’t like, change Image fit: “Show entire image” letterboxes it instead of cropping, and “Fit to image” sizes the banner to the picture itself. Pair “Fit to image” with the Boxed layout and a corner radius for a framed, rounded banner.
- Short headlines win. The hero is a glance, not a paragraph.
Settings
Slideshow
| Setting | Type | What it does |
|---|---|---|
| Enable slideshow mode | On / off | Default: false |
| Auto-advance slides | On / off | Default: true |
| Time between slides | Slider | Default: 5 |
| Transition style | Dropdown | Fade, Slide |
| Show navigation dots | On / off | Default: true |
| Show navigation arrows | On / off | Default: true |
Single hero content
These settings are used when slideshow is disabled or no slides are added.
| Setting | Type | What it does |
|---|---|---|
| Background image | Image | — |
| Mobile image | Image | Optional image for mobile screens (749px and below). Falls back to desktop image if not set. |
| Heading | Text | Default: Welcome to our store |
| Subheading | Multi-line text | Default: Discover our latest collection of products |
Buttons
| Setting | Type | What it does |
|---|---|---|
| Primary button text | Text | Default: Shop now |
| Primary button link | Link | Default: /collections/all |
| Secondary button text | Text | — |
| Secondary button link | Link | — |
Banner link
| Setting | Type | What it does |
|---|---|---|
| Banner click-through URL | Link | Makes the entire banner clickable. CTA buttons will still work independently. |
Video background
| Setting | Type | What it does |
|---|---|---|
| Video type | Dropdown | None, Hosted video (MP4), YouTube, Vimeo |
| Video URL | Text | Enter the video URL. For hosted: direct MP4 link. For YouTube/Vimeo: the video page URL. |
| Autoplay | On / off | Default: true |
| Loop | On / off | Default: true |
| Muted | On / off | Required for autoplay in most browsers |
Style
| Setting | Type | What it does |
|---|---|---|
| Text alignment | Dropdown | Left, Center, Right |
| Content position | Dropdown | Anchors the heading, text and buttons to the top, middle or bottom of the hero. (Top, Middle, Bottom) |
| Overlay opacity | Slider | Default: 40 |
| Layout | Dropdown | Full width, Boxed (page margins) |
| Boxed: top & bottom spacing | Slider | Sides use the page margin automatically. Scaled down on mobile. |
| Corner radius | Slider | Default: 0 |
| Image fit | Dropdown | Fill crops to the chosen height. Show entire image letterboxes. Fit to image sizes the hero to the image itself — pair it with the Boxed layout + corner radius for a framed banner. (Fill (crop to fit), Show entire image, Fit to image (no crop, sizes the banner)) |
| Minimum height (desktop) | Slider | Default: 500 |
| Minimum height (mobile) | Slider | Default: 400 |
Blocks
This section supports blocks — repeatable content items you add, configure, and reorder inside the section.
Block: Slide
| Setting | Type | What it does |
|---|---|---|
| Background image | Image | — |
| Mobile image | Image | Optional image for mobile screens (749px and below). Falls back to desktop image if not set. |
| Heading | Text | Default: Slide heading |
| Subheading | Multi-line text | Default: Slide description text goes here |
| Primary button text | Text | Default: Shop now |
| Primary button link | Link | — |
| Secondary button text | Text | — |
| Secondary button link | Link | — |
| Text alignment | Dropdown | Left, Center, Right |
| Content position | Dropdown | Anchors this slide’s heading, text and buttons to the top, middle or bottom. (Top, Middle, Bottom) |
| Text color | Color | Overrides the theme color for this slide’s heading, text and buttons. Leave empty to use the theme default. |
| Overlay color | Color | Tints this slide’s image. Strength is controlled by the section’s overlay opacity. Leave empty to use the theme default. |
Was this page helpful?
Spotted something wrong, or want to suggest an improvement? Email support → — your message goes straight to engineering.