Hero banner

The Hero banner is the full-width opening image at the top of the home page (or any page that supports sections). It pairs a large editorial photograph with a brand name overlay.

Settings

Image

Background image — The desktop background image. Recommended: 2400 by 1600 px or larger.
Mobile image (optional) — A separate image used on mobile screens. Recommended: 3:4 or 4:5 portrait ratio. Falls back to main image.
Image focal point — The vertical focal point of the desktop image when cropped. Options: Top, Center, Bottom. Default: Center.
Mobile image focal point — The horizontal focal point of the mobile image. Options: Left, Right.
Color scheme — The color scheme applied to the brand text overlay. Default: scheme-1.
Overlay opacity — Darkness of the overlay layer applied on top of the image to improve text readability. Range: 0% to 80%. Default: 20%.

Brand name

Brand name — The large brand text shown over the image. Leave blank to use your store name. Default: ATELIER.
Font size scale — Scales the brand text. Range: 50% to 200%.
Text position — Position of the brand text on the image. Options: Bottom left, Bottom center.

Tips

Use a high-resolution image. The hero spans the full viewport on every screen. Anything smaller than 2400 px wide will look soft on large desktop displays.
Plan for the brand name overlay. Photographs with empty space at the bottom (sky, floor, plain background) work best. Busy compositions clash with the text.
Mobile portrait image — Wide desktop hero photos look squashed on mobile. Provide a portrait crop for the Mobile image to fix this.
Overlay opacity — Bump up to 30–40% if the brand name is hard to read against light photography.
One hero per home page. Multiple stacked hero banners feel disorienting.

When to use

The Hero banner is the visual anchor of the home page. It is intended to communicate brand at first glance — not to sell a specific product. For a featured product or collection promotion in the same visual style, use Brand image or Rich text with image instead.

When not to use

If your storefront is more catalog-driven than brand-driven, consider opening with a Collection list or New arrivals section instead, and use the hero on category landing pages only.