Skip to main content
The Page banner section creates versatile hero banners that automatically adapt to different template types (pages, collections, products, blogs). It displays titles, descriptions, media backgrounds, breadcrumb navigation, optional collection menus, and an FAQ search feature. This section is essential for creating impactful page headers that provide context, visual appeal, and wayfinding across your entire site. Page banner section overview

​
What this section controls

This section controls page hero banners with the following capabilities:
  • Automatic page title display with custom overrides
  • Optional default or custom descriptions
  • Separate desktop and mobile media (images, videos)
  • Transparent header integration
  • Breadcrumb navigation
  • Collection navigation menu
  • FAQ page search functionality
  • Flexible content positioning and alignment
  • Multiple section height options

​
How the Page banner works

The Page banner intelligently adapts to your template type:
  • Page templates: Displays page title and description
  • Collection templates: Shows collection title, description, and optional menu
  • Product templates: Displays product title and description
  • Blog templates: Shows blog title and description
Content defaults to template metadata but can be overridden with custom text. Media positioning options allow background overlays, top placement, or bottom placement with separate desktop and mobile configurations.

​
Getting started

1

Open Theme Customizer

From Shopify admin, access the Theme Customizer.
2

Navigate to target template

Go to the page, collection, product, or blog template you want to customize.
3

Add or customize Page banner

Add the Page banner section (usually as first section) or customize existing instance.
4

Configure content

Set custom heading/description or use template defaults.
5

Add media

Upload images or videos for desktop and mobile displays.
6

Adjust positioning

Configure content alignment, media position, and section height.
Page banner in Theme Customizer

​
Section settings

​
Best practices

Template defaults

Enable “Show default description” to automatically pull content from pages/collections/products/blogs.

Mobile-specific media

Always provide portrait-oriented mobile images for optimal vertical screen display.

Height balance

Use 50svh height for most pages. Reserve 100svh for homepage or major campaigns.

Transparent header

Enable only with background media and ensure sufficient text-to-image contrast.

Breadcrumb navigation

Keep breadcrumbs enabled for SEO benefits and improved user navigation.

Desktop descriptions only

Hide descriptions on mobile (default) to conserve vertical space on small screens.

FAQ search targeting

Only enable FAQ search on actual FAQ or help pages—not general pages.

Collection menus

Use page menu for collection subcategory filtering or related page navigation.

​
Common use cases

Enable default description. Background media position. 50svh height. Upload collection banner image (desktop 1920×600px, mobile 800×1000px). Page menu with subcollections. Breadcrumbs enabled. Center alignment.
Show default description (desktop only). Background media with product lifestyle image. Auto height. Breadcrumbs enabled. No page menu. Center content position and alignment.
Custom title: “How can we help?”. Enable FAQ search bar. Placeholder: “Search for ‘shipping’ or ‘returns’”. No media or background color scheme only. Auto height. Center alignment.
Custom title and content. Background media 100svh height. Transparent header enabled. Team photo background (desktop 1920×1080px, mobile 800×1200px). Bottom content position for readability.
Default blog title and description. Top media position. Auto height. Blog featured image (16:9 aspect). Breadcrumbs enabled. No page menu. Standard page width.

Hero banner

Multi-slide carousel banners with slideshow

Full width banner

Edge-to-edge banners with block-based content