Skip to main content

​
What It Does

The Page Banner section creates a formatted header area at the top of standard pages, displaying breadcrumb navigation, page title, and optional introductory content. It provides consistent page headers across your site with options to customize or default to page-level content.

​
Getting Started

1

Add to Page Template

The Page Banner section is typically already included in the Page template. If not, add it through the Theme Customizer
2

Configure Breadcrumbs

Enable or disable breadcrumb navigation above the title (recommended: keep enabled for navigation)
3

Customize Title (Optional)

Leave empty to use page title automatically, or override with custom text
4

Set Content Width

Choose Narrow (default, centered column) or Fullwidth (spans entire page width)

​
Settings

Type: Checkbox
Default: Enabled (checked)Show breadcrumb navigation trail above the page title, helping customers understand their location in site hierarchy and providing easy navigation back to parent pages.

​
What Breadcrumbs Show

Breadcrumbs display the navigation path from homepage to current page:Standard page breadcrumbs:
Home > About Us
Home > Shipping Policy
Home > Blog > Article Title
The breadcrumbs automatically generate based on:
  • Where the customer navigated from
  • Page type (standard page, blog article, etc.)
  • Site structure and navigation

​
When to Enable Breadcrumbs

Enable (Default - Recommended):
  • Navigation utility: Helps customers orient themselves and navigate back
  • SEO benefit: Search engines use breadcrumbs for understanding site structure
  • Professional appearance: Standard web convention for information pages
  • Deep pages: Especially valuable on blog articles, policies, or nested pages
Best for:
  • About pages
  • Policy pages (Shipping, Returns, Privacy)
  • Blog articles
  • FAQs or Help pages
  • Any page 2+ levels deep in site structure

​
When to Disable Breadcrumbs

Disable:
  • Minimalist aesthetic: Clean, sparse page designs
  • Landing pages: Pages designed as entry points (not part of navigation flow)
  • Single-level pages: Homepage or other top-level pages where breadcrumbs add no value
  • Custom navigation: When you’ve built custom navigation and breadcrumbs are redundant
Best for:
  • Brand story pages (full immersive experience)
  • Campaign landing pages
  • Contest/giveaway pages
  • Pages accessed directly from external links (not via site navigation)

​
SEO Considerations

Breadcrumbs provide SEO value beyond navigation:
  • Rich snippets: Google may display breadcrumbs in search results
  • Crawl efficiency: Helps search engines understand site structure
  • Link equity: Creates internal linking between pages
Even if aesthetically you prefer not to show breadcrumbs, the SEO benefits often outweigh the visual preference. Consider enabling and styling breadcrumbs subtly rather than disabling entirely.
Type: Text field
Default: Empty (uses page title)
Info: “Defaults to page title”Custom title text to display instead of the default page title. Leave empty to automatically use the page’s title.

​
How Title Works

When Empty (Default Behavior): The section automatically displays the title you set in:
  • Shopify Admin > Online Store > Pages > [Page Name] - uses the “Title” field
  • Blog Articles: Uses article title
This is recommended for most use cases because:
  • Maintains consistency (page title and banner title match)
  • Simplifies management (one place to update titles)
  • SEO-friendly (title matches metadata)
When Custom Text Added: Overrides the default page title with your custom text. The page’s original title (from Admin) is still used for:
  • Browser tab/title bar
  • Search engine results
  • Social media shares
  • Navigation menus
Only the visible banner title on the page changes.

​
When to Use Custom Title

Use custom title when:Long-form page titles:
  • Page title (for SEO/metadata): “Shipping & Delivery Information - Continental US”
  • Banner title: “Shipping Information”
Creative formatting:
  • Page title: “About XYZ Company”
  • Banner title: “About Us
    Crafting Quality Since 1995”
Context-specific phrasing:
  • Page title: “Return Policy”
  • Banner title: “Returns & Exchanges”
Brand voice adjustment:
  • Page title: “Contact Us” (formal, searchable)
  • Banner title: “Let’s Talk!” (friendly, on-brand)
Don’t use custom title when:
  • Titles are already concise and clear
  • You want SEO and visible title to match exactly
  • Managing multiple pages (extra work to keep two titles in sync)

​
Multi-line Titles

The text field supports line breaks for multi-line titles:
Our Story
Handcrafted With Love
Best practice: Keep secondary line shorter and in a complementary tone (tagline or context).
Type: Rich text editor
Default: Empty (uses page content)
Info: “Defaults to page content”Optional introductory content displayed below the title. Leave empty to automatically show the page’s content from Shopify Admin.

​
How Content Works

When Empty (Default Behavior): The banner displays content from:
  • Shopify Admin > Pages > [Page Name] - uses the “Content” field
  • Blog articles: Uses article excerpt or beginning of content
Typical behavior:
  • For pages with long content, only the first 1-3 paragraphs appear
  • Content may be truncated with “Read more” or shown in full depending on theme configuration
When Custom Text Added: Completely replaces the default page content in the banner only. The original page content (from Admin) can still be displayed in:
  • Subsequent page sections (if template includes additional content sections)
  • RSS feeds
  • Search results

​
When to Use Custom Content

Use custom content when:Banner-specific intro:
  • Page has detailed content below, need brief banner intro
  • Example: “Welcome to our Shipping Policy. Find estimated delivery times for your region below.”
Enhanced formatting:
  • Page Admin content is plain text, want rich formatting in banner
  • Add bold emphasis, links, or styled paragraphs
Context-setting:
  • Provide page context beyond what’s in page content
  • Example on About page: “Founded in Portland in 2015, we’re on a mission to make sustainable fashion accessible.”
Multi-purpose pages:
  • Page serves both navigation landing and detail purposes
  • Banner content provides navigation context, page content has details
Don’t use custom content when:
  • Page content is already well-formatted and appropriate for banner
  • You want to maintain single source of truth (easier content management)
  • Page is simple with short content (no need for separate banner intro)

​
Rich Text Features

The Content field supports:
  • Paragraphs (line breaks)
  • Bold and italic text
  • Links to other pages or external URLs
  • Lists (bulleted or numbered)
Avoid:
  • Very long content (3+ paragraphs become overwhelming in banner)
  • Images (not supported in this field, use dedicated image sections instead)
  • Complex formatting (keep banner content simple and scannable)
Type: Select dropdown
Options: Narrow, Fullwidth
Default: NarrowControls the maximum width of the banner content area (title, breadcrumbs, content text).

​
Width Options

Narrow (Default) ← Recommended
  • Content constrained to centered column (typically 800-1000px max width)
  • Prevents excessively long line lengths on large screens
  • Better readability: Optimal line length for reading (60-80 characters per line)
  • Creates focused, centered page headers
Best for:
  • Standard informational pages (About, Policies, FAQ)
  • Blog articles
  • Pages with significant text content
  • Most use cases (default for good reason)
Fullwidth
  • Content spans entire page width (edge-to-edge with page padding)
  • Creates more expansive, dramatic header feel
  • Caution: Long line lengths on large monitors reduce readability
Best for:
  • Pages with minimal banner content (short title, no content text)
  • Aesthetic preference for larger, bolder headers
  • Pages viewed primarily on mobile (line length less of an issue)
  • When you have very short title/content that looks lost in narrow column

​
Readability Guidelines

Why Narrow is Default: Typography research shows optimal reading line length is 60-80 characters. On large desktop monitors (1920px+), fullwidth content can exceed 120+ characters per line, which:
  • Slows reading speed
  • Increases eye strain
  • Reduces comprehension
  • Feels overwhelming
Narrow width prevents this by constraining content to readable line lengths while still being visually prominent.

​
Mobile Behavior

On mobile devices, both options behave similarly:
  • Content spans full screen width (with standard page padding)
  • Narrow vs Fullwidth distinction is negligible on small screens
The Content Width setting primarily affects desktop experience (1200px+ screens).

​
Combining with Content Length

Short content + Narrow: May feel sparse (consider Fullwidth) Short content + Fullwidth: Balanced, bold statement Long content + Narrow: Optimal readability Long content + Fullwidth: Poor readability on large screens (avoid)

​
Best practices

Keep Breadcrumbs Enabled

Leave breadcrumbs enabled for SEO and navigation utility unless you have strong aesthetic reasons to remove them. They add minimal visual weight and significant functional value.

Use Default Title and Content

For most pages, leave Title and Content empty to auto-populate from page settings. This maintains consistency and simplifies content management across your site.

Stick with Narrow Width

Narrow content width provides better readability. Use Fullwidth only for pages with very short titles/content where centered narrow column feels sparse.

Keep Banner Content Concise

If using custom content, keep it to 1-2 short paragraphs. Lengthy banner content overwhelms customers. Save detailed content for page body sections.

Match Banner Tone to Page Purpose

Informational pages (policies, FAQ): Professional, clear tone. Brand pages (About, Our Story): Personality-driven, engaging tone. Match banner to context.

Test Custom Titles for Scannability

If using custom titles, ensure they’re still clear and searchable. Overly creative banner titles can confuse if they don’t match what customers searched for.

Coordinate with Page Sections Below

Page Banner is typically just the header. Ensure you have appropriate content sections below (Rich Text, Images, etc.) to complete the page.

Preview on Multiple Screen Sizes

Always preview page banners on desktop, tablet, and mobile. Content Width and breadcrumb visibility can look different across devices.

​
Common Use Cases

​
Standard About Page Header

Settings:
  • Enable breadcrumbs: Checked
  • Title: Empty (uses “About Us” from page title)
  • Content: Empty (uses page content intro)
  • Content width: Narrow
Result: Clean, professional page header with automatic title/content, optimal readability, breadcrumb navigation

​
Shipping Policy with Custom Banner Intro

Settings:
  • Enable breadcrumbs: Checked
  • Title: Empty (uses “Shipping Policy” page title)
  • Content: “We offer free shipping on orders over $50 to the Continental US. See detailed delivery times below.”
  • Content width: Narrow
Result: Custom banner intro sets expectations, detailed policy content follows in page sections below

​
Minimalist Brand Story Page

Settings:
  • Enable breadcrumbs: Unchecked (clean aesthetic)
  • Title: “Our Beginning”
  • Content: “Every great brand starts with a story. Here’s ours.”
  • Content width: Fullwidth
Result: Bold, immersive header without breadcrumbs, sets tone for brand storytelling page

​
FAQ/Help Center Landing Page

Settings:
  • Enable breadcrumbs: Checked
  • Title: “How Can We Help?”
  • Content: “Find answers to common questions below, or contact us directly.”
  • Content width: Narrow
Result: Friendly, supportive tone, breadcrumbs for navigation, narrow for readability with FAQ accordions below

​
Contact Page Header

Settings:
  • Enable breadcrumbs: Checked
  • Title: Empty (uses “Contact Us” page title)
  • Content: “We typically respond within 24 hours on business days.”
  • Content width: Narrow
Result: Sets response time expectations immediately, standard professional header

​
Layout Behavior

​
Desktop Layout (1200px+)

The Page Banner section displays as a vertically-centered content area: With Breadcrumbs: 
[Breadcrumbs: Home > Current Page]
          ↓
[Page Title (Large Heading)]
          ↓
[Content Text (1-2 paragraphs)]
          ↓
[Visual spacing before next section]
Content Width Impact:
  • Narrow: Content constrained to centered column (~800-1000px)
  • Fullwidth: Content spans full page width (minus page margins)

​
Mobile Layout (Under 768px)

On mobile, the layout stacks vertically with full-width content (both Narrow and Fullwidth behave similarly): 
[Breadcrumbs]
[Title]
[Content]
Mobile Optimizations:
  • Title font size reduces for mobile screens
  • Content text size adjusts for mobile readability
  • Breadcrumbs may simplify (show only parent, not full trail)
  • Spacing compresses vertically to reduce scrolling

​
Default Content Behavior

When Title/Content are empty (default): The section automatically pulls content from the page’s Shopify Admin settings:
  • Title field → Displays page title
  • Content field → Displays page content (typically first few paragraphs shown in banner)
This happens server-side during page render—no JavaScript delays or content flashes. Breadcrumbs render as an ordered list with schema.org markup for SEO: 
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/pages/about">About</a></li>
  </ol>
</nav>
Last item (current page) is not clickable and styled differently to indicate current location.

​
Vertical Spacing

The Page Banner section includes:
  • Top padding: Spacing above breadcrumbs/title
  • Bottom padding: Spacing below content before next section
  • Internal spacing: Between breadcrumbs, title, and content
Spacing is responsive—tighter on mobile, more generous on desktop.
  • Rich Text - Add detailed content sections below Page Banner
  • Accordions - Ideal below banner for FAQ or policy details
  • About - Use on about pages for visual split-screen content after banner
  • Images with Text - Add after banner for visual storytelling
  • Contact Form - Natural pairing on contact pages below banner

​
Technical Notes

The breadcrumbs use JSON-LD structured data for search engines: 
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://yourstore.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "About Us",
      "item": "https://yourstore.com/pages/about"
    }
  ]
}
This helps Google display rich breadcrumb snippets in search results.

​
Title Hierarchy

The page title uses an <h1> heading tag, following semantic HTML best practices:
  • Only one <h1> per page (the main page title)
  • Screen readers announce this as the primary page heading
  • SEO best practice for page structure
Important: If you use custom title, ensure the text is still semantically appropriate as the page’s primary heading.

​
Content Sanitization

When using the Page Admin content (not custom content), Shopify automatically sanitizes the HTML to prevent:
  • Script injection
  • Malicious code
  • Unsafe HTML tags
Custom content in the banner is also sanitized, but supports safe rich text formatting (bold, italic, links, paragraphs).

​
Template Context

The Page Banner section is designed for Page templates (main-page.liquid) but can be added to other templates:
  • Works on: Page, Article, Collection, Custom page templates
  • Not ideal for: Product pages (use product-specific sections), Cart, Checkout
The section adapts its breadcrumb generation based on template type.

​
Default Content Fallback

If page has no content in Admin:
  • Section displays only breadcrumbs and title
  • Content area is hidden (not shown as empty space)
  • No error or placeholder message
If page has no title in Admin:
  • Section uses template name as fallback (e.g., “Page” or “Article”)
  • Generally not recommended—always set page titles in Admin

​
Performance Considerations

The Page Banner section:
  • No images: Fast loading, no external resources
  • Static content: Renders server-side, no JavaScript dependencies
  • Lightweight HTML: Minimal DOM elements
  • CSS-based styling: No layout reflow issues
Performance impact: Negligible. Adding this section doesn’t affect page load times.

​
Accessibility Features

The section follows accessibility best practices:
  • Semantic HTML: Proper heading hierarchy (<h1>)
  • Breadcrumb ARIA: aria-label="Breadcrumb" for screen reader context
  • Keyboard navigation: All links are keyboard-accessible
  • Focus styles: Visible focus indicators on breadcrumb links
  • Skip links compatible: Works with skip-to-content links
Screen readers announce the breadcrumb trail before the main page title, providing navigation context.

​
Customization Options

Theme code customization: To adjust default styling (requires theme code editing):
  • Breadcrumb styling: Edit page-banner.liquid CSS
  • Title font size: Modify heading size classes
  • Content width values: Adjust max-width in CSS for Narrow option
  • Spacing: Change padding values in section CSS
Liquid variables available:
  • page.title - Page title from Admin
  • page.content - Page content from Admin
  • template.name - Current template name
  • request.path - Current page path (for breadcrumbs)

​
Troubleshooting

Breadcrumbs not showing:
  • Verify “Enable breadcrumbs” is checked
  • Check that page is not the homepage (breadcrumbs hide on homepage)
  • Ensure theme’s breadcrumb template file (breadcrumbs.liquid snippet) exists
  • Clear browser cache and hard refresh
Custom title not displaying:
  • Ensure you’ve clicked Save after entering custom title
  • Verify text was entered in “Title” field (not “Content” field)
  • Check that section is published (not in draft mode)
  • Preview page to confirm changes are live
Content looks different than Shopify Admin:
  • Banner content may truncate long Admin content (by design)
  • If using custom content, verify you’re editing the correct field
  • Rich text formatting in Admin may not fully transfer to banner
  • Some HTML from Admin may be sanitized (removed) for security
Content width not changing:
  • Preview on desktop screen (1200px+) where width difference is visible
  • Mobile devices show similar width for both options (expected)
  • Hard refresh browser to clear cached CSS
  • Verify you’re adjusting “Content Width” setting (not other width settings)
Breadcrumbs show wrong path:
  • Breadcrumbs generate based on navigation history and page type
  • If customer arrived from external link, breadcrumbs may simplify
  • Collection breadcrumbs depend on which collection customer came from
  • This is expected Shopify behavior, not a bug
Title and content both missing:
  • Check that page has title and content set in Shopify Admin > Pages
  • Verify you’re editing the correct page template
  • Ensure Page Banner section is actually on the template (check Theme Customizer)
  • Try entering custom text temporarily to confirm section is working
SEO: Page shows duplicate H1 tags:
  • Only the Page Banner title should be <h1>
  • Check that page content (below banner) doesn’t have additional <h1> tags
  • Use heading hierarchy: <h1> for title, <h2> for subheadings in content
  • Edit page content in Admin to use proper heading levels