Skip to main content
The Full width banner section creates impactful edge-to-edge banners that span the entire viewport width. It uses a block-based content system for precise control over text hierarchy and supports multiple layout options, video backgrounds, and transparent header integration. Full width banner section overview

​
What this section controls

This section controls full-width banner displays with the following capabilities:
  • Edge-to-edge banners spanning full viewport width
  • Block-based content system (subtitle, title, content, buttons)
  • Multiple layout options (full, 70/30, 30/70, split)
  • Separate desktop and mobile media
  • Transparent header integration when placed first
  • Granular content padding controls

​
How the Full width banner works

Unlike fixed-field banners, this section uses a block-based content system where you add individual blocks for subtitle, title, body text, and buttons. Each block can be added once (maximum 4 blocks total). This provides precise control over content structure and hierarchy while maintaining design flexibility.

​
Getting started

1

Open Theme Customizer

From Shopify admin, access the Theme Customizer.
2

Add Full width banner section

Add the section to your page, preferably as the first section for transparent header option.
3

Add content blocks

Click “Add block” and select Subtitle, Title, Content, or Buttons to build your banner content.
4

Configure media

Upload images or videos for both desktop and mobile displays.
Full width banner section in Theme Customizer

​
Section settings

​
Enable transparent header

When activated, the header becomes transparent and overlays the banner content.
The transparent header only works when the Full width banner is the first section on the page.This allows navigation to sit directly over the banner media for maximum visual impact.When to use:
  • Homepage banners
  • Campaign landing pages
  • Full-screen promotional sections
When to avoid:
  • Mid-page banners
  • When header navigation needs strong visibility
  • With busy background images lacking clear areas
Ensure sufficient contrast between header navigation and banner media when using transparent header.
Transparent header option

​
Block settings

Build banner content using individual blocks. Each block type can be added once, maximum 4 blocks total.

​
Subtitle block

Small text displayed above the main title.
Enter subtitle text (plain text only).Default: “Enter a subheading for your full width image”Best for:
  • Promotional tags (“Limited Time Offer”)
  • Category labels (“New Collection”)
  • Context setting (“Introducing”)
Limit to 1 subtitle block per banner. Keep text brief (3-5 words).

​
Best practices

Block hierarchy

Add blocks in order: Subtitle → Title → Content → Buttons for logical reading flow.

Strategic placement

Place as first section to enable transparent header integration for maximum impact.

Height balance

Use 50-70vh height for balanced visibility. Reserve 100vh for true hero sections only.

Mobile media

Always provide portrait-oriented mobile images. Cropped desktop images rarely work well.

Minimize blocks

Use only necessary blocks. Subtitle + Title + Buttons often sufficient without content block.

Content brevity

Keep all text concise. Banners are for impact, not detailed information.

Contrast check

Ensure text remains readable over all media, especially with transparent headers.

Padding control

Adjust content padding to prevent text from reaching banner edges on different screen sizes.

​
Common use cases

Use as first section with 100vh height and transparent header. Add subtitle (“New Collection”), title (“Summer Styles”), and 2 buttons (“Shop Now”, “Learn More”). Full width layout with prominent image.
Set 70vh height with 70/30 layout. Include title, content block with campaign details, and single filled button. Emphasize text over imagery.
Use 50vh height with split layout. Title only (category name), paired button for “Shop Collection”. Balanced image and text presentation.
60vh height, full width layout with centered content. Subtitle (“Limited Time”), bold title (“50% Off Sale”), single button. Strong image with overlay.
100vh height with video background. Minimal text (title + button only). Bottom-aligned content to avoid header overlap. Transparent header enabled.

Hero banner

Multi-slide banner with carousel functionality

Page banner

Simple page header banners