In the theme editor: CustomizeHome pageAdd sectionAtmosphere banner

Atmosphere banner

A wide atmosphere picture with text on it, to set the mood between sections.

Choose pictures with a calm area for the text, and set the text tone to light or dark to match.

Settings

Image: Image
Or an image from a collection: CollectionUsed only when no image is chosen above.
Image for phone: ImageOptional. A different crop for narrow screens.
Video: Video fileIf a video is chosen it replaces the image and starts only when it scrolls into view. The image stays as the poster.
Phone video: Video fileOptional. When empty the phone shows the regular video.
Image focus: Choice: Focal point of the image, Center, Top, BottomDefault: Focal point of the image

Shape on computer: Choice: Panorama (21:9), Cinema (5:2), Wide (16:9)Default: Cinema (5:2)
Shape on phone: Choice: Portrait (4:5), Square, Wide (16:9)Default: Portrait (4:5)

Heading: TextOptional. Leave all the text fields empty to show the image alone.
Short text: Text
Button text: TextOptional. The button also needs a link.
Button link: Link
Glass button: Slider, 0 to 90 %Default: 0 %0: a regular solid button. Above 0: dark translucent glass with a thin light edge, for a button on a picture. Higher is darker.
Text alignment: Choice: Start, Center, EndDefault: Center
Text height on the image: Choice: Top, Middle, BottomDefault: Middle
Text color: Choice: Light text, Dark textDefault: Light text
Image shading: Slider, 0 to 70 %Default: 0 %A dark veil over the image, so the text is easy to read. Zero means none.
Text opacity: Slider, 20 to 100 %Default: 100 %The heading and text over the picture. 100% is solid; lower lets the picture show through. The button stays solid.

Settings every section sharesWindow, Scrolling, Spacing, Colors, Text styling

The window, scrolling, spacing and color settings work the same way in every section. Read how they work.

Attach: Choice: Separate window, Attached to the window above, Attached to the window below, Attached above and belowDefault: Separate window
Image corners: Choice: Rounded, SquareDefault: Rounded

Next section covers it on scroll: On or offDefault: OffScrolling down, this section stays in place under the header and the next section rises over it. Scrolling back reverses it. Off in the editor, for visitors who asked for reduced motion and on very short screens.

Custom spacing for this section: On or offDefault: OffOff: the section spacing from theme settings, under Layout. On: the values here, above and below this section. On phones most sections use 65% of them.
Space above: Slider, 0 to 120 pxDefault: 32 px
Space below: Slider, 0 to 120 pxDefault: 32 px
Content width: Choice: Narrow, Standard, Wide, Full widthDefault: Wide

Color scheme: Color schemeSame as the page scheme: the section sits on the page background. Another scheme gives the section its own background, as a card inside the frame. Custom colors below override the scheme.
Use custom colors for this section: On or offDefault: OffOverrides the color scheme. Empty fields follow the scheme.
Background: ColorDefault: #F1F1EF
Text: ColorEmpty: automatic. Light on a dark background, dark on a light one.
Background style: Choice: Flat color, Lit stageDefault: Flat colorLit stage: a soft light from above that fades toward the bottom, made from the section color, light or dark. On a dark color, text and buttons turn light on their own.
Light color: ColorThe soft light from the top center. Empty: white.

Custom text styling for this section: On or offDefault: OffOtherwise the section uses the theme styling. Shopify fonts do not include Hebrew, so you choose between styles that work in Hebrew.
Heading style: Choice: Theme default, Light, Bold, SerifDefault: Theme default
Heading size: Slider, 70 to 160 %Default: 100 %
Heading color: ColorEmpty: automatic, uses the section color (light on a dark background).
Text style: Choice: Theme default, Light, Bold, SerifDefault: Theme default
Text size: Slider, 70 to 160 %Default: 100 %
Text color: ColorEmpty: automatic, uses the section color (light on a dark background).

Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.