> ## 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.

# Main Blog Banner

> Blog page header banner displaying blog title and breadcrumbs

The Main Blog Banner template section displays a header banner at the top of blog listing pages showing the blog title and optional breadcrumb navigation. This simple presentation section improves site navigation and SEO by providing clear context for blog content while maintaining visual consistency across your storefront. Use this section on all blog listing pages for professional page structure and improved user orientation.

## What this section controls

This section controls blog page headers with the following capabilities:

* Automatic blog title display
* Optional breadcrumb navigation
* Three section width options (Narrow, Page, Fluid)
* Color scheme selection
* Top and bottom spacing controls (0-6 scale)
* Border options (None, Top, Bottom, Both)
* Template-only section (blog listing pages)
* Automatic content from blog settings

***

## Template Settings

The Main Blog Banner has basic layout and styling controls:

<AccordionGroup>
  <Accordion title="Section Width" icon="left-right">
    Control the width of the banner content:

    * **Narrow** - Narrower content width
    * **Page** (default) - Standard page width
    * **Fluid** - Extends to container edges

    <Tip>
      Page width provides good balance between readability and visual presence for blog titles.
    </Tip>
  </Accordion>

  <Accordion title="Color Scheme" icon="palette">
    * Select from available theme color schemes
    * **Default:** scheme-1

    <Note>
      Consider using a contrasting color scheme from the blog listing below to create visual separation.
    </Note>
  </Accordion>

  <Accordion title="Spacing" icon="arrows-up-down">
    * **Top Spacing**: 0, 1, 2 (default), 4, or 6
    * **Bottom Spacing**: 0, 1, 2 (default), 4, or 6
  </Accordion>

  <Accordion title="Borders" icon="border-top-left">
    * **None** (default)
    * **Top Border**
    * **Bottom Border**
    * **Both Borders**

    <Tip>
      Bottom border can help visually separate the banner from the article grid below.
    </Tip>
  </Accordion>
</AccordionGroup>

***

## Display Content

The banner automatically displays:

### Blog Title

<Accordion title="Title Display" icon="heading">
  * Displays the blog name (from blog settings in Shopify Admin)
  * Rendered as H1 heading for SEO
  * Centered alignment
  * Large, prominent typography

  <Note>
    The blog title is set in **Shopify Admin → Content → Blog posts → Manage blogs → Select blog → Title field**. It cannot be customized within the template.
  </Note>
</Accordion>

### Breadcrumbs (Optional)

<Accordion title="Breadcrumb Navigation" icon="chevrons-right">
  Displays breadcrumb trail if enabled in theme settings.

  * **Controlled by:** Theme settings (not section settings)
  * **Setting location:** Theme customizer → General settings → Breadcrumbs
  * **Visibility:** Desktop only (hidden on mobile)

  **Typical breadcrumb path:**

  ```
  Home > Blog
  ```

  or (if on tagged page):

  ```
  Home > Blog > Tag Name
  ```

  <Tip>
    Breadcrumbs improve navigation and provide SEO benefits by creating internal linking structure.
  </Tip>
</Accordion>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Blog Identity" icon="id-card">
    Clearly identifies the blog section of your site and sets context for readers
  </Card>

  <Card title="SEO Structure" icon="sitemap">
    Provides H1 heading and breadcrumbs for search engine optimization
  </Card>

  <Card title="Visual Separation" icon="layer-group">
    Creates clear header before article grid, improving page structure
  </Card>

  <Card title="Navigation Aid" icon="map-location-dot">
    Breadcrumbs help users understand their location within site hierarchy
  </Card>
</CardGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Color scheme selection" icon="palette">
    Use the same scheme as blog article cards for a cohesive look, or choose a contrasting scheme to create a distinct header section. Lifestyle blogs should consider softer, branded color schemes, while corporate blogs benefit from professional, neutral schemes that reflect your blog's dedicated brand identity.
  </Card>

  <Card title="Spacing strategy" icon="arrows-up-down">
    Default M (2) spacing works for most layouts, but increase bottom spacing to L or XL to create breathing room before the article grid. Reduce spacing to 0 if using borders for separation instead, and match spacing with your header section for visual consistency. The banner automatically includes large padding on mobile for better UX.
  </Card>

  <Card title="Blog title optimization" icon="heading">
    Keep your blog title concise at 1-4 words and make it descriptive of your content type, such as "Blog" (simple), "News & Updates" (informative), "Style Journal" (branded), or "The Edit" (creative). Choose something that scales across all contexts since it appears on all blog listing pages and in page titles.
  </Card>

  <Card title="Breadcrumb settings" icon="sliders">
    Enable breadcrumbs if you have a complex site structure, or disable them if navigation is obvious or your site is simple. Test on mobile where breadcrumbs auto-hide on small screens, and ensure breadcrumb styling matches your theme. Settings are controlled globally and affect all pages where breadcrumbs appear.
  </Card>
</CardGroup>

***

## Design Variations

<CardGroup cols={2}>
  <Card title="Minimal" icon="minimize">
    * Narrow width
    * Light neutral color scheme
    * No borders
    * Default spacing

    Clean, understated header
  </Card>

  <Card title="Prominent" icon="maximize">
    * Fluid width
    * Bold contrasting color scheme
    * Bottom border
    * L or XL bottom spacing

    Eye-catching blog header
  </Card>

  <Card title="Branded" icon="palette">
    * Page width
    * Custom brand color scheme
    * Matching spacing to blog cards
    * Optional bottom border

    On-brand blog identity
  </Card>

  <Card title="Corporate" icon="building">
    * Narrow width
    * Professional neutral scheme
    * Clean lines (no borders)
    * Minimal spacing

    Business-appropriate styling
  </Card>
</CardGroup>

***

## Related Templates

<CardGroup cols={2}>
  <Card title="Main Blog" icon="newspaper">
    The blog listing template that appears below this banner
  </Card>

  <Card title="Main Article" icon="file-lines">
    Individual article template (doesn't use this banner)
  </Card>

  <Card title="Page Banner Section" icon="image">
    Similar banner section used on other page types
  </Card>
</CardGroup>

***

## Technical Details

### Automatic Content

The banner automatically pulls:

* **Blog title:** From `blog.title` Liquid object
* **Breadcrumbs:** From theme settings and current URL structure

### CSS Classes

The banner uses:

* `page-banner` - Base banner styling
* `page-banner--padding-lg-mobile` - Mobile padding adjustment
* `center` - Centered text alignment
* `color-{{ scheme }}` - Color scheme class

### SEO Impact

<AccordionGroup>
  <Accordion title="H1 Heading" icon="hashtag">
    The blog title is rendered as an H1 tag, which is important for SEO:

    * Only one H1 per page (search engine best practice)
    * Contains blog name for keyword relevance
    * Provides clear page topic signal
  </Accordion>

  <Accordion title="Breadcrumb Structured Data" icon="code">
    When breadcrumbs are enabled:

    * Creates navigational hierarchy
    * May appear in search results (Google rich snippets)
    * Improves crawlability and site architecture understanding
    * Provides additional internal links
  </Accordion>
</AccordionGroup>

***

## Customization Options

While the template is simple, you can enhance it:

<CardGroup cols={2}>
  <Card title="Add Description" icon="text">
    Use theme code to add blog description below title (requires development)
  </Card>

  <Card title="Add Search" icon="magnifying-glass">
    Consider adding a search bar for large blogs (requires custom code)
  </Card>

  <Card title="Above Banner" icon="arrow-up">
    Add sections above the banner (promotional banners, announcements)
  </Card>

  <Card title="Below Banner" icon="arrow-down">
    Add sections between banner and blog listing (featured posts, newsletter)
  </Card>
</CardGroup>

***

## Quick Summary

* **Purpose:** Blog page header banner
* **Content:** Blog title (H1) + optional breadcrumbs
* **Settings:** Width, color scheme, spacing, borders
* **Configuration:** Minimal (content is automatic)
* **Title Source:** Blog settings in Shopify Admin
* **Breadcrumbs:** Controlled by global theme setting
* **SEO:** Provides H1 heading and breadcrumb navigation

<Note>
  This is a template section, meaning it only appears on blog listing pages, not on individual article pages.
</Note>