> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Page Banner
> Page header section with breadcrumbs, title, and content for standard pages
## 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
The Page Banner section is typically already included in the Page template. If not, add it through the Theme Customizer
Enable or disable breadcrumb navigation above the title (recommended: keep enabled for navigation)
Leave empty to use page title automatically, or override with custom text
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:** Narrow
Controls 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
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.
For most pages, leave Title and Content empty to auto-populate from page settings. This maintains consistency and simplifies content management across your site.
Narrow content width provides better readability. Use Fullwidth only for pages with very short titles/content where centered narrow column feels sparse.
If using custom content, keep it to 1-2 short paragraphs. Lengthy banner content overwhelms customers. Save detailed content for page body sections.
Informational pages (policies, FAQ): Professional, clear tone. Brand pages (About, Our Story): Personality-driven, engaging tone. Match banner to context.
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.
Page Banner is typically just the header. Ensure you have appropriate content sections below (Rich Text, Images, etc.) to complete the page.
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.
### Breadcrumb Structure
Breadcrumbs render as an ordered list with schema.org markup for SEO:
```html theme={null}
```
**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.
## Related Sections
* **[Rich Text](/themes/mojave/richtext)** - Add detailed content sections below Page Banner
* **[Accordions](/themes/mojave/accordions)** - Ideal below banner for FAQ or policy details
* **[About](/themes/mojave/about)** - Use on about pages for visual split-screen content after banner
* **[Images with Text](/themes/mojave/images-with-text)** - Add after banner for visual storytelling
* **[Contact Form](/themes/mojave/contact-form)** - Natural pairing on contact pages below banner
## Technical Notes
### Breadcrumb Schema Markup
The breadcrumbs use **JSON-LD structured data** for search engines:
```json theme={null}
{
"@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 **`
` heading tag**, following semantic HTML best practices:
* Only one `
` 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 (`
`)
* **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 `
`
* Check that page content (below banner) doesn't have additional `
` tags
* Use heading hierarchy: `
` for title, `
` for subheadings in content
* Edit page content in Admin to use proper heading levels