Skip to main content
The Main Blog template (main-blog) controls how your blog listing page displays articles. It features a customizable hero banner with images and filtering, plus full control over article card metadata and pagination.
Blog listing page overview

​
What this section controls

  • Hero banner with custom images and content
  • Tag-based filtering interface
  • Article cards with metadata display options
  • Articles per page pagination
  • Article excerpts, tags, dates, and authors
  • Tag count display per article

​
Getting started

1

Open Theme Customizer

In your Shopify admin, go to Online Store > Themes and click Customize on your active theme.
2

Navigate to your blog page

Use the page selector dropdown to select Blogs and choose your blog to preview.
3

Locate the template

The “Main Blog” section controls the blog listing template.
Main blog section location

​
Template settings

Upload separate hero images for mobile and desktop. Both images are required for the hero to display properly.Main image - Mobile:
  • Recommended size: 800x600px minimum
  • Portrait or square orientation works best
  • Optimized for vertical mobile viewports
Main image - Desktop:
  • Recommended size: 1920x600px minimum
  • Landscape orientation
  • Wide format for desktop hero banners
Image tips:
  • Use high-quality images that represent your blog content
  • Ensure sufficient contrast for overlaid text
  • Consider image focal point - text appears centered
  • Compress images before upload (under 500KB ideal)
Controls the darkness of the overlay on hero images (0-100%, default: 50%).Overlay purpose: Creates contrast between hero image and overlaid text for readability.Adjustment guidance:
  • 0-30%: Light overlay, for dark images with good text contrast
  • 40-60% (default: 50%): Balanced overlay for most images
  • 70-100%: Heavy overlay for very bright images or maximum text emphasis
Test with your specific images to ensure title and content remain readable.
Custom hero title text that replaces the default blog name.When to customize:
  • Create more engaging headline than blog name alone
  • Add context or value proposition (e.g., “Design Inspiration & Tips”)
  • Maintain consistency with overall brand messaging
Leave blank to use default blog name from Shopify settings.Character guidance: 30-60 characters works best for most displays.
Rich text description or subtitle below the hero title.Content ideas:
  • Brief blog description or mission statement
  • What readers will find (e.g., “Weekly insights on sustainable fashion”)
  • Call to action (e.g., “Discover our latest stories”)
  • Publication frequency (e.g., “New articles every Tuesday”)
Formatting: Supports rich text (bold, italic, links).Length: 1-2 sentences (100-200 characters) for optimal readability.
Displays tag filter buttons in the hero area. Enabled by default.When enabled: Readers can click tags to filter articles by topic.Filtering behavior:
  • Shows all tags used across blog articles
  • Clicking tag filters to show only articles with that tag
  • “All” button returns to full article list
When to disable:
  • Small blogs with few articles where filtering isn’t needed
  • Single-topic blogs without diverse tags
  • You prefer manual navigation over filtering
Recommended to keep enabled for blogs with 10+ articles and multiple topics.

​
Configuring tags for filtering

Tags are managed when creating/editing blog articles in Shopify admin.
1

Open article editor

Go to Shopify Admin → Online Store → Blog posts → [Select article].
2

Add tags

In the right sidebar under “Tags”, enter tags separated by commas.Tags automatically become filterable in your blog listing.
3

Use consistent naming

Create standardized tag names across articles:
  • “Fashion Tips” not “fashion”, “Fashion”, “tips”, “fashion-tips”
  • Capitalize consistently
  • Use 1-2 words per tag
  • Aim for 5-10 core tags across your blog
Tag best practices:
  • Limit to 3-7 tags per article
  • Create core topic tags and reuse them
  • Avoid one-off tags (consolidate similar tags)
  • Tags should represent browseable topics, not keywords

​
Best practices

Provide both hero images

Upload optimized mobile and desktop hero images. Missing either image will break hero layout. Desktop landscape (1920x600px), mobile portrait (800x600px).

Balance overlay opacity

Adjust overlay (40-60%) to ensure hero text remains readable against your images. Test across different devices and lighting conditions.

Write compelling hero content

Use custom title and content to set expectations and intrigue readers. Bland “Blog” title wastes valuable hero space.

Enable tag filtering

Keep tag filtering enabled for blogs with 10+ articles. Helps readers discover relevant content without scrolling through everything.

Show helpful metadata

Keep excerpt, tags, and date enabled for content blogs. Only minimal designs or image-focused blogs benefit from hiding these.

Optimize articles per page

Start with 15-20 articles per page. Adjust based on image sizes and page load performance. Monitor bounce rates.

Standardize tagging

Create 5-10 core tags and use consistently. Tag sprawl (50+ unique tags) defeats filtering purpose and looks messy.

Consider evergreen content

Hide dates on evergreen content blogs to maintain perceived freshness. Older valuable content shouldn’t seem outdated.

Compress hero images

Large hero images (over 500KB) significantly slow page load. Use TinyPNG or similar before upload. Target under 300KB.

Test tag count display

For articles with many tags (7+), use “Show first” to avoid cluttering cards. For 3-5 tags, “Show all” works well.