Full Width Banner

​

What this section controls

• Edge-to-edge banners spanning the full viewport width
• Flexible media positioning (top, bottom, or background)
• Block-based content structure for precise control
• Desktop and mobile-specific layouts and media
• Transparent header integration when placed first on page

​

How the Full Width Banner works

• The section spans the full width of the viewport
• Media can be positioned above, below, or behind the content
• Content is built using blocks instead of fixed text fields
• Desktop and mobile layouts can be configured independently
• When placed at the top of the page, the banner can enable a transparent header

​

Getting started

​

Section settings

• Header integration
• Media position
• Desktop settings
• Mobile settings

​

Enable transparent header

When enabled, the header becomes transparent only if this section is the first section on the page.This allows the banner media to appear behind the header.

This setting only works when the section is placed first. Ensure sufficient contrast between the banner media and header navigation.

​

Media position

Controls where the media appears relative to the content.Available options:

• Top: Media appears above the content
• Bottom: Media appears below the content
• Background: Media appears behind the content

​

Section height

Controls the height of the banner.Available options:

• Auto: Height is determined by content
• Third: One-third of the viewport height
• Half: Half of the viewport height
• Full: Full viewport height

​

Vertical position

Controls how the banner content stretches vertically.Available options: Stretch, Start, Center, End

​

Content position

Controls vertical positioning of content.Options: Top, Center, Bottom

​

Content alignment

Controls horizontal alignment of content.Options: Start, Center, End

​

Image

Select an image for desktop devices.

​

Video

Select a Shopify-hosted video.

​

External video

Overrides both image and video.

External videos may negatively impact performance. Shopify-hosted videos are recommended.

​

Show video controls

Shows or hides video playback controls.Options: True / False

​

Tile aspect ratio

Controls the aspect ratio of images and videos.

Auto is recommended when the banner contains long text.

Available options: Auto, Square, Portrait, LandscapeEach group includes multiple ratio presets.

Mobile settings override desktop layout and media when defined.

​

Section height for mobile

Controls the banner height on mobile devices.Available options:

• Auto: Height is determined by content
• Third: One-third of the viewport height
• Half: Half of the viewport height
• Full: Full viewport height

​

Vertical position

Controls vertical behavior on mobile.Options: Stretch, Start, Center, End

​

Content position

Controls vertical positioning on mobile.Options: Top, Center, Bottom

​

Content alignment

Controls horizontal alignment on mobile.Options: Start, Center, End

​

Image

Select an image used on mobile devices.

​

Video

Select a video used on mobile devices.

​

External video

Overrides both image and video on mobile.

External videos may negatively impact performance.

​

Show video controls on mobile

Shows or hides video playback controls on mobile.Options: True / False

​

Tile aspect ratio

Controls the aspect ratio of mobile images and videos.Available options: Auto, Square, Portrait, Landscape

​

Content blocks

​

Best practices

• Use block order to control content hierarchy and reading flow
• Prefer Background media position for hero-style banners to create immersive experiences
• Avoid external videos unless necessary due to performance impact
• Use Auto height for content-heavy banners to ensure all content is visible
• Test contrast carefully when using transparent headers for navigation visibility
• Keep mobile content concise as vertical space is limited
• Use high-quality images that maintain clarity at full viewport width
• Consider load time when using full-width, high-resolution media

​

Related guides