Skip to main content
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:
Control the width of the banner content:
  • Narrow - Narrower content width
  • Page (default) - Standard page width
  • Fluid - Extends to container edges
Page width provides good balance between readability and visual presence for blog titles.
  • Select from available theme color schemes
  • Default: scheme-1
Consider using a contrasting color scheme from the blog listing below to create visual separation.
  • Top Spacing: 0, 1, 2 (default), 4, or 6
  • Bottom Spacing: 0, 1, 2 (default), 4, or 6
  • None (default)
  • Top Border
  • Bottom Border
  • Both Borders
Bottom border can help visually separate the banner from the article grid below.

​
Display Content

The banner automatically displays:

​
Blog Title

  • Displays the blog name (from blog settings in Shopify Admin)
  • Rendered as H1 heading for SEO
  • Centered alignment
  • Large, prominent typography
The blog title is set in Shopify Admin → Content → Blog posts → Manage blogs → Select blog → Title field. It cannot be customized within the template.

​
Use Cases

Blog Identity

Clearly identifies the blog section of your site and sets context for readers

SEO Structure

Provides H1 heading and breadcrumbs for search engine optimization

Visual Separation

Creates clear header before article grid, improving page structure

Navigation Aid

Breadcrumbs help users understand their location within site hierarchy

​
Best practices

Color scheme selection

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.

Spacing strategy

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.

Blog title optimization

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.

Breadcrumb settings

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.

​
Design Variations

Minimal

  • Narrow width
  • Light neutral color scheme
  • No borders
  • Default spacing
Clean, understated header

Prominent

  • Fluid width
  • Bold contrasting color scheme
  • Bottom border
  • L or XL bottom spacing
Eye-catching blog header

Branded

  • Page width
  • Custom brand color scheme
  • Matching spacing to blog cards
  • Optional bottom border
On-brand blog identity

Corporate

  • Narrow width
  • Professional neutral scheme
  • Clean lines (no borders)
  • Minimal spacing
Business-appropriate styling

Main Blog

The blog listing template that appears below this banner

Main Article

Individual article template (doesn’t use this banner)

Page Banner Section

Similar banner section used on other page types

​
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

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

​
Customization Options

While the template is simple, you can enhance it:

Add Description

Use theme code to add blog description below title (requires development)

Add Search

Consider adding a search bar for large blogs (requires custom code)

Above Banner

Add sections above the banner (promotional banners, announcements)

Below Banner

Add sections between banner and blog listing (featured posts, newsletter)

​
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
This is a template section, meaning it only appears on blog listing pages, not on individual article pages.