Banner

A single, still hero image with a heading, a line of text, and a button — the most common way to open a homepage.

The simple, fast hero:

• One image, no rotation — the lightest, fastest opener, and usually the best one.
• Two looks, set by the Layout setting: Standard lays your heading, text, and button bottom-left over a gentle dark-to-clear gradient, so they stay readable on any photo; Split (editorial) sets your text in a calm glass column beside the image, with a caption band along the bottom — a quiet, magazine-style hero.
• Reusable anywhere — homepage, a landing page, a collection or product page.

Need more than one story at the top of the page? Use the Slideshow instead — it rotates through several slides, shares this same image, height, and video foundation, and offers the same editorial split as a rotating style.

Try it

Switch the Layout between Standard and Split, change the height and overlay, switch the color scheme, and watch the preview update. Use the screen-size buttons in the preview header to see how the hero reflows on a phone, and the light/dark toggle to check both modes.

The demo opens in the Split (editorial) layout — the way the Uisce home-design hero ships. Edit the Eyebrow, Project theme, Location, and Duration chip fields and watch the glass column and the sea-glass caption band update; clear any one and that piece simply disappears, never an empty label. Use Image side to flip the photo to the other side, or switch Layout back to Standard for the classic full-bleed hero with your content over it.

Use the preset buttons above the preview to see the banner in each preset's own voice — all five presets are live: the Uisce home-design hero, the Gaoth pet-care hero, the Talamh heritage-garden hero, the Tine trade-hardware hero, and the Neart wellness-ritual hero, each with its real image, copy, colour, and heading font.

←Banner

Color scheme

Layout

StandardSplit (editorial)

Standard shows the image full-bleed with your content over it. Split (editorial) sets your text in a glass column beside the image, with a caption band along the bottom — a calm, magazine-style hero.

Editorial split

Image side

Image right, text leftImage left, text right

Which side the photo sits on. The text column takes the other side. Mirrors automatically for right-to-left languages.

Eyebrow

A small label above the heading, set in the accent colour (e.g. "Coastal home design"). Leave blank to hide.

Watermark

A large faint number or short word set behind the text, for an editorial accent (e.g. "01"). Leave blank to hide.

Project theme

A theme or style word shown in the caption band along the bottom of the hero, under a "Project theme" label (e.g. "Coastal minimalism"). Leave blank to hide.

Location

A place shown beside the project theme in the caption band, under a "Location" label (e.g. "County Kerry, Ireland"). Leave blank to hide.

Duration chip

A short pill at the end of the caption band, for a timeframe or process (e.g. "8–12 week build"). Leave blank to hide.

Image

image — unsupported in docs panel (image_picker)

Video

Video source

No videoShopify-hosted videoYouTubeVimeo

Plays behind a play button. Visitors click to start the video, so the image stays the fastest-loading element.

Layout

Height on desktop

MediumTallFull screen

Height on mobile

MediumTallFull screen

Overlay opacity

0%

Darkens the banner image for text readability. 0 = no overlay, 100 = fully opaque.

Storefront preview

Coastal home design

01

Uisce Home Design

Coastal calm, project-managed renovations, and considered interiors for Irish homes that need more than a standard contractor.

Book a Consultation

Project themeCoastal minimalism

LocationCounty Kerry, Ireland

8–12 week build

How it works

The banner fills the full width of the page with your image and layers your content on top. The image loads immediately — it's the first big thing a visitor sees, so it's treated as the page's main image and given priority. A built-in bottom-up gradient keeps light text legible without hiding the photo, and you can add more darkening with the overlay slider when a photo is especially busy or bright.

Your heading, text, and button are added as blocks: click Add block on the banner and add a Heading, Text, or Button. Each has its own content and link.

The Split (editorial) layout

Set Layout to Split (editorial) and the banner becomes a calm, two-part editorial hero — the look the Uisce home-design banner ships:

• Text in a glass column, photo beside it — your heading, text, and button move off the photo into a frosted glass column painted in the section's color scheme; the photo fills the rest of the frame at a generous, asymmetric crop. Nothing sits over the image, so the photo stays clean and the type stays crisp without an overlay. Image side chooses whether the photo sits on the right (the default) or the left, and the whole layout mirrors automatically in right-to-left languages.
• A caption band along the bottom — a slim sea-glass "waterline" band names a Project theme and Location as a labelled pair, with an optional Duration chip at the end for a timeframe or process. Each is its own setting and shows only when you fill it: leave them all blank for a clean column-and-photo hero, or fill the ones that fit — never an empty label or a broken row.
• An accent eyebrow and a faint numeral — a small uppercase Eyebrow in the accent colour leads the column above the heading, and an optional Watermark (a number or short word, "01") sits large and faint behind the text — the magazine touches that make it read as an editorial spread.

The Split layout is still a single, still hero — no rotation, no pager — so it keeps the banner's speed and its reserved height (no layout jump). On a phone the two halves stack: the photo on top with the caption band riding its lower edge, then the column below with a full-width button. Want the same editorial split to rotate through several stories? Use the Slideshow — its Split style wraps this exact layout in slide-to-slide rotation.

One upload fits every screen

• Focal point — drag the focal point on your image in Shopify and the crop follows it on every screen size. No aspect-ratio choices to make.
• Optional mobile image — if a wide photo loses its subject on a narrow phone, add a separate Mobile image and the banner swaps to it below 750px, falling back to the desktop image when empty. (An art-directed mobile image is an extra Dawn and Refresh don't offer — reach for it only when you need it.)

Height

Height is chosen separately for desktop and mobile — Medium, Tall, or Full screen. The height is reserved before the image arrives, so the page never jumps as it loads. Heights are named, never raw aspect ratios.

Video

The banner can play a looping background video instead of a still image, from any of three privacy-respecting sources — upload (hosted by Shopify), YouTube (youtube-nocookie.com), or Vimeo (do-not-track on). It shows a poster image with a play button first; the video itself only loads on interaction, so it never slows the first paint, and reduced-motion visitors simply see the poster.

Settings

Setting	What it does
Color scheme	Colors the section — one scheme, so your text stays legible.
Layout	Standard shows the image full-bleed with content over it; Split (editorial) sets your text in a glass column beside the image, with a caption band along the bottom — a calm, magazine-style hero.
Image side	Split layout only — which side the photo sits on (the text column takes the other). Defaults to Image right, text left; mirrors automatically for right-to-left languages.
Eyebrow	Split layout only — a small accent-colour label above the heading, for example "Coastal home design". Leave blank to hide.
Watermark	Split layout only — a large faint number or short word set behind the text, for example "01". Leave blank to hide.
Project theme	Split layout only — a theme or style word in the caption band, under a "Project theme" label, for example "Coastal minimalism". Leave blank to hide.
Location	Split layout only — a place shown beside the project theme in the caption band, for example "County Kerry, Ireland". Leave blank to hide.
Duration chip	Split layout only — a short pill at the end of the caption band, for example "8–12 week build". Leave blank to hide.
Image	The background photo. Drag its focal point in Shopify to set the crop.
Mobile image	Optional separate crop for phones; falls back to the desktop image when empty.
Image alt text	Describes the photo for screen readers and when an image fails to load.
Video	Use a looping background video instead of an image (upload, YouTube, or Vimeo).
Height on desktop	Medium, Tall, or Full screen — the hero height on computers.
Height on mobile	Medium, Tall, or Full screen — the hero height on phones.
Overlay opacity	A dark layer over the image so light text stays readable (0–100%).

Accessibility & performance

• Loads eagerly — the hero image is treated as the page's main image, so it paints fast.
• No layout jump — the height is reserved before the image arrives, so nothing shifts.
• Readable text over any photo — a built-in bottom-up gradient guarantees contrast; the overlay slider adds more when needed.
• Respects reduced motion — a video banner stays on its poster for visitors who've asked for reduced motion.
• Right-to-left ready — built from logical CSS, so the bottom-left content (Standard) or the glass column, hairline, and caption band (Split) mirror correctly in Arabic, Hebrew, Persian, and Urdu.

Tips

• Keep the heading short — 5–8 words. Long headings wrap awkwardly at hero size on a phone.
• Use 30–50% overlay for busy or bright photos to keep text crisp; leave it at 0 for calm imagery where the built-in gradient is enough.
• Add a mobile image only when a wide photo loses its subject on a phone — otherwise the focal point handles it.
• One clear call to action. A single button reads as premium; two compete.