Blog Page Template

The blog page displays a list of blog articles in a grid layout. It's perfect for showcasing your blog content, news, updates, and articles to customers.

Overview

The blog page shows all articles from a blog in a customizable grid layout. Each article is displayed as a card with image, title, author, date, excerpt, and "Read more" link. The page includes pagination for blogs with many articles.

Where to Use

The blog page template (blog.json) is automatically used for all blogs created in Shopify admin. When customers visit a blog URL, they'll see this template.

Creating blogs:

  1. Go to Online Store → Blog posts in Shopify admin
  2. Click Manage blogs
  3. Create a new blog or use existing
  4. The blog page automatically uses this template

Access the page:

  • Direct URL: /blogs/blog-handle
  • Navigation links (if added to menu)
  • Links from other pages
  • Search results

Settings

Content

Heading Size

  • What it does: Controls the size of the blog title
  • Options: XL, 2XL, 3XL, 4XL
  • Default: 3XL
  • Tip:
    • XL: Subtle, minimal
    • 2XL: Standard, balanced
    • 3XL: Prominent, attention-grabbing (recommended)
    • 4XL: Very large, bold statement

Show Article Images

  • What it does: Displays featured images on article cards
  • Default: Enabled (true)
  • Tip:
    • Images make articles more visually appealing
    • Can be disabled for text-focused blogs
    • Images come from article featured image

Image Ratio

  • What it does: Controls how article images are displayed
  • Options: Square, Portrait, Landscape, Wide
  • Default: Landscape
  • Tip:
    • Square: Consistent, balanced (1:1)
    • Portrait: Tall images (3:4)
    • Landscape: Wide images (4:3) - recommended
    • Wide: Very wide images (16:9)

Layout

Full Width Section

  • What it does: Makes section background extend full width
  • Default: Disabled (false)
  • Tip:
    • Enabled: Background extends full width, content stays constrained
    • Disabled: Standard page width
    • Use for visual impact

Columns

  • What it does: Number of article columns in grid
  • Options: 2, 3, 4 columns
  • Default: 3 columns
  • Tip:
    • 2 columns: Larger cards, easier to read
    • 3 columns: Balanced, good default (recommended)
    • 4 columns: Dense grid, more articles visible
    • Responsive: 1 column on mobile, 2 on tablet

Articles Per Page

  • What it does: Controls how many articles display before pagination
  • Range: 6-24 articles
  • Step: 3 articles
  • Default: 12 articles
  • Tip:
    • 6: Few articles, faster loading
    • 12: Balanced, good default (recommended)
    • 18-24: More articles, more scrolling

Colors

Color Scheme

  • What it does: Selects a color scheme for the blog page
  • Controls background color, text colors, and link colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that complements your blog content

Styling

Card Border Radius

  • What it does: Controls corner rounding on article cards
  • Range: 0-32px
  • Default: 12px
  • Tip:
    • 0px: Sharp corners, modern
    • 8-12px: Subtle rounding (recommended)
    • 16-24px: More rounded, friendly
    • 32px: Very rounded, soft appearance

Padding

Top Padding

  • What it does: Space above the blog content
  • Range: 0-100px
  • Default: 40px
  • Tip: More padding creates more breathing room from header/navigation

Bottom Padding

  • What it does: Space below the blog content
  • Range: 0-100px
  • Default: 40px
  • Tip: Adjust to balance spacing with footer

Global Blog Settings

These settings are controlled in theme settings and apply to all blogs:

Show Author

  • What it does: Displays article author on cards
  • Default: Enabled (true)
  • Location: Theme settings → Blog settings

Show Date

  • What it does: Displays publication date on cards
  • Default: Enabled (true)
  • Location: Theme settings → Blog settings

Show Excerpt

  • What it does: Displays article excerpt/preview on cards
  • Default: Enabled (true)
  • Location: Theme settings → Blog settings

How It Works

Page Structure

The blog page displays in this order:

  1. Blog Header: Blog title (H1)
  2. Article Grid: Articles displayed in responsive grid
  3. Pagination: Page navigation (if multiple pages)

Article Cards

Each article card displays:

  • Article Image: Featured image (if enabled and available)
  • Article Title: Clickable title linking to article
  • Article Meta: Author and date (if enabled)
  • Article Excerpt: Preview text (if enabled)
  • Read More Link: Link to full article

Grid Layout

Articles are displayed in a responsive grid:

  • Mobile: 1 column
  • Tablet: 2 columns
  • Desktop: Configurable columns (2, 3, or 4)

Pagination

When articles exceed the "Articles per page" setting:

  • Pagination controls appear
  • Customers can navigate between pages
  • Shows current page and total pages
  • Maintains layout and styling

Article Order

Articles are displayed in reverse chronological order:

  • Newest first: Most recent articles appear first
  • Oldest last: Older articles appear later
  • Order: Based on publication date

Common Use Cases

Standard Blog

  • Layout: 3 columns, 12 articles per page
  • Settings: Images enabled, author/date/excerpt shown
  • Use Case: Most blogs with standard article display

News Blog

  • Layout: 2 columns, 9 articles per page
  • Settings: Images enabled, date emphasized
  • Use Case: News updates, announcements

Image-Focused Blog

  • Layout: 2-3 columns, 6-9 articles per page
  • Settings: Large images, landscape ratio
  • Use Case: Photography, visual content

Text-Focused Blog

  • Layout: 2 columns, 12 articles per page
  • Settings: Images disabled, excerpt emphasized
  • Use Case: Long-form articles, written content

Tips & Best Practices

✅ Do's

  • Use featured images: Make articles visually appealing
  • Write good excerpts: Help customers understand articles
  • Show author/date: Build trust and context
  • Use appropriate columns: Balance visibility with readability
  • Test on mobile: Ensure mobile experience is good
  • Use consistent styling: Maintain visual consistency
  • Show pagination: Essential for blogs with many articles
  • Optimize images: Fast loading is crucial
  • Write clear titles: Help customers find relevant content

❌ Don'ts

  • Don't use too many columns on mobile: Keep mobile readable
  • Don't skip images: Visual content improves engagement
  • Don't forget pagination: Essential for large blogs
  • Don't use low-quality images: Article images are important
  • Don't skip excerpts: Help customers understand articles
  • Don't use inconsistent styling: Maintain visual consistency
  • Don't forget mobile: Test on phones and tablets
  • Don't use too many articles per page: Can slow down loading

Columns Guide

2 Columns

When to Use:

  • ✅ Fewer articles
  • ✅ Larger article cards
  • ✅ More detailed previews
  • ✅ Text-focused blogs

Benefits:

  • Larger cards, easier to read
  • More space for content
  • Better for detailed articles

3 Columns (Recommended)

When to Use:

  • ✅ Most blogs
  • ✅ Balanced layout
  • ✅ Standard article display

Benefits:

  • Balanced appearance
  • Good default choice
  • Works for most blogs

4 Columns

When to Use:

  • ✅ Many articles
  • ✅ Dense grid layout
  • ✅ Image-focused blogs

Benefits:

  • More articles visible
  • Dense grid
  • Efficient use of space

Articles Per Page Guide

6 Articles

  • Best for: Small blogs, premium feel, fast loading
  • Benefits: Fast loading, less scrolling, focused browsing
  • Considerations: More pagination clicks, fewer articles visible

9 Articles

  • Best for: Medium blogs, balanced experience
  • Benefits: Good balance, reasonable loading
  • Considerations: Standard choice

12 Articles (Recommended)

  • Best for: Most blogs, standard display
  • Benefits: Good balance, standard choice
  • Considerations: Works for most blogs

18-24 Articles

  • Best for: Large blogs, maximum visibility
  • Benefits: Many articles visible, fewer pages
  • Considerations: Slower loading, more scrolling

Image Ratio Guide

Square (1:1)

  • Best for: Consistent appearance
  • Benefits: Uniform grid, balanced look
  • Considerations: May crop images

Portrait (3:4)

  • Best for: Tall images, vertical content
  • Benefits: Shows more vertical content
  • Considerations: Less common for blogs

Landscape (4:3) (Recommended)

  • Best for: Most blog images
  • Benefits: Standard blog image ratio
  • Considerations: Works for most content

Wide (16:9)

  • Best for: Wide images, hero-style
  • Benefits: Modern, cinematic look
  • Considerations: May crop portrait images

Examples

Example 1: Standard Blog

Settings:

  • Heading Size: 3XL
  • Show Images: Enabled
  • Image Ratio: Landscape
  • Columns: 3
  • Articles Per Page: 12
  • Card Border Radius: 12px
  • Padding: 40px top/bottom

Result: Standard blog page with 3-column grid, images, and pagination

Example 2: News Blog

Settings:

  • Heading Size: 4XL
  • Show Images: Enabled
  • Image Ratio: Landscape
  • Columns: 2
  • Articles Per Page: 9
  • Card Border Radius: 8px
  • Padding: 40px top/bottom

Result: News-focused blog with larger cards and emphasis on dates

Example 3: Image-Focused Blog

Settings:

  • Heading Size: 3XL
  • Show Images: Enabled
  • Image Ratio: Wide
  • Columns: 2
  • Articles Per Page: 6
  • Card Border Radius: 16px
  • Padding: 40px top/bottom

Result: Visual blog with large images and spacious layout

Example 4: Text-Focused Blog

Settings:

  • Heading Size: 3XL
  • Show Images: Disabled
  • Columns: 2
  • Articles Per Page: 12
  • Card Border Radius: 8px
  • Padding: 40px top/bottom

Result: Text-focused blog without images, emphasis on content

Troubleshooting

Articles Not Showing

  • Check: Verify blog has articles in Shopify admin
  • Check: Ensure articles are published
  • Check: Check blog settings in Shopify admin
  • Check: Verify articles are assigned to blog

Images Not Showing

  • Check: Verify "Show Article Images" is enabled
  • Check: Ensure articles have featured images
  • Check: Test with different articles
  • Check: Verify image files are not corrupted

Pagination Not Showing

  • Check: Verify articles exceed "Articles per page" setting
  • Check: Test with blog that has many articles
  • Check: Pagination appears automatically when needed

Grid Columns Not Working

  • Check: Verify column settings are set correctly
  • Check: Test on different screen sizes
  • Check: Clear browser cache
  • Check: Verify CSS is loading correctly

Author/Date Not Showing

  • Check: Verify global blog settings (show_author, show_date)
  • Check: Check theme settings → Blog settings
  • Check: Ensure articles have author/date information
  • Check: Global settings apply to all blogs

Excerpt Not Showing

  • Check: Verify "Show Excerpt" is enabled in theme settings
  • Check: Ensure articles have excerpts or content
  • Check: Excerpts are generated from article content if no excerpt set
  • Check: Global setting applies to all blogs

Creating Blogs in Shopify Admin

Adding a New Blog

  1. Go to Online Store → Blog posts in Shopify admin
  2. Click Manage blogs
  3. Click Add blog
  4. Enter blog title and description
  5. Configure SEO settings
  6. Save blog

Adding Articles

  1. Go to Online Store → Blog posts
  2. Click Add blog post
  3. Enter article title and content
  4. Add featured image
  5. Set author and publication date
  6. Add tags and categories
  7. Publish article

Blog Settings

SEO:

  • Blog title: SEO title
  • Meta description: Search result description
  • URL handle: Blog URL slug

Content:

  • Blog description: Appears on blog page
  • RSS feed: Automatic RSS feed generation

Related Templates

  • Article Page (article.json) - Individual blog post
  • Home Page - Can feature blog posts
  • Page Template - Custom content pages

Related Sections

  • Blog Section - Blog listing (this section)
  • Article Section - Individual article display
  • Featured Blog - Feature blog posts on other pages

Next Steps:

  • Learn about Article Page Template (individual blog posts)
  • Learn about Home Page Template
  • Create blogs and articles in Shopify admin
  • Customize your blog page layout and settings
  • Add blog links to navigation menus