Article Page Template

The article page displays individual blog posts with full content, images, author information, tags, and comments. It's the detailed view where customers read complete blog articles.

Overview

The article page shows a single blog post with all its content, metadata, and interactive features. It displays the article title, featured image, author, publication date, reading time, full content, tags, and comments section. The page is optimized for reading with a constrained content width.

Where to Use

The article page template (article.json) is automatically used for all blog posts created in Shopify admin. When customers click on an article from the blog listing page, they'll see this template.

Access the page:

  • Clicking article from blog listing page
  • Direct URL: /blogs/blog-handle/article-handle
  • Search results
  • Tag/category links

Settings

Content

Heading Size

  • What it does: Controls the size of the article 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

Heading Alignment

  • What it does: Controls how the article title is aligned
  • Options: Left, Center, Right
  • Default: Left
  • Tip:
    • Left: Standard, readable (recommended)
    • Center: Balanced, centered layout
    • Right: Unique, right-aligned design

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

Content Width

  • What it does: Controls the maximum width of article content
  • Range: 600-1200px
  • Step: 20px
  • Default: 760px
  • Tip:
    • 600-700px: Narrow, focused reading
    • 760px: Standard, optimal for reading (recommended)
    • 800-1000px: Wider, more space
    • 1200px: Very wide, maximum width

Colors

Color Scheme

  • What it does: Selects a color scheme for the article 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

Image Border Radius

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

Padding

Top Padding

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

Bottom Padding

  • What it does: Space below the article 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 articles:

Show Author

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

Show Date

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

Show Reading Time

  • What it does: Calculates and displays estimated reading time
  • Default: Enabled (true)
  • Location: Theme settings → Blog settings
  • Calculation: Based on word count (200 words per minute)

Show Tags

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

Show Categories

  • What it does: Displays blog category
  • Default: Enabled (true)
  • Location: Theme settings → Blog settings

Enable Comments

  • What it does: Enables comment system on articles
  • Default: Enabled (true)
  • Location: Theme settings → Blog settings

Moderate Comments

  • What it does: Requires comment approval before publishing
  • Default: Enabled (true)
  • Location: Theme settings → Blog settings

How It Works

Page Structure

The article page displays in this order:

  1. Featured Image: Article featured image (if available)
  2. Article Header: Category, title, meta information
  3. Article Content: Full article content (rich text)
  4. Tags: Article tags (if enabled and available)
  5. Comments: Comments section (if enabled)

Article Header

The header displays:

  • Category: Blog name (if show_categories enabled)
  • Title: Article title (H1)
  • Meta Information: Author, date, reading time (if enabled)

Article Content

The content area displays:

  • Full Article: Complete article content from Shopify admin
  • Rich Text: All formatting preserved (headings, lists, links, images)
  • Images: Inline images from article content
  • Links: Clickable links in content

Featured Image

  • Display: Large image at top of article
  • Source: Article featured image from Shopify admin
  • Ratio: Controlled by theme settings (landscape default)
  • Responsive: Adapts to screen size

Reading Time

  • Calculation: Automatic based on word count
  • Formula: Word count ÷ 200 words per minute
  • Display: "X min read" format
  • Minimum: Shows at least 1 minute

Tags

  • Display: Clickable tag links
  • Function: Links to filtered blog view
  • Style: Pill-shaped buttons
  • Visibility: Only shows if tags exist

Comments

  • Display: List of approved comments
  • Form: Comment submission form
  • Moderation: Comments require approval if enabled
  • Pagination: Comments paginated (10 per page)

Common Use Cases

Standard Article

  • Layout: 760px content width, left-aligned title
  • Settings: All metadata enabled, comments enabled
  • Use Case: Most blog articles with standard display

Long-Form Article

  • Layout: 760px content width, left-aligned title
  • Settings: Reading time enabled, all metadata shown
  • Use Case: Detailed, long articles

Image-Heavy Article

  • Layout: 1000px content width, center-aligned title
  • Settings: Large featured image, image border radius
  • Use Case: Photography, visual content

News Article

  • Layout: 760px content width, left-aligned title
  • Settings: Date emphasized, author shown
  • Use Case: News updates, announcements

Tips & Best Practices

✅ Do's

  • Use featured images: Make articles visually appealing
  • Write clear titles: Help customers understand content
  • Use proper formatting: Headings, lists, paragraphs
  • Add tags: Help customers find related content
  • Enable comments: Encourage engagement
  • Show reading time: Help customers plan reading
  • Use appropriate content width: Optimal for reading
  • Test on mobile: Ensure mobile experience is good
  • Optimize images: Fast loading is crucial

❌ Don'ts

  • Don't skip featured images: Visual content improves engagement
  • Don't use too wide content: Harder to read
  • Don't forget formatting: Use headings and lists
  • Don't skip tags: Help with discoverability
  • Don't disable comments unnecessarily: Reduces engagement
  • Don't use low-quality images: Article images are important
  • Don't forget mobile: Test on phones and tablets
  • Don't use unformatted text: Use rich text formatting

Content Width Guide

600-700px (Narrow)

When to Use:

  • ✅ Focused reading experience
  • ✅ Text-heavy articles
  • ✅ Minimal distractions
  • ✅ Mobile-first design

Benefits:

  • Optimal line length for reading
  • Less eye strain
  • Focused content

760px (Recommended)

When to Use:

  • ✅ Most articles
  • ✅ Standard blog posts
  • ✅ Balanced layout

Benefits:

  • Optimal reading width
  • Standard choice
  • Works for most content

800-1000px (Wide)

When to Use:

  • ✅ Image-heavy articles
  • ✅ Wide content needs
  • ✅ More visual space

Benefits:

  • More space for images
  • Better for visual content
  • Wider layout

1200px (Very Wide)

When to Use:

  • ✅ Maximum width
  • ✅ Large images
  • ✅ Wide content

Benefits:

  • Maximum space
  • Best for large images
  • Very wide layout

Heading Alignment Guide

Left (Recommended)

When to Use:

  • ✅ Most articles
  • ✅ Standard blog posts
  • ✅ Text-focused content

Benefits:

  • Standard, readable
  • Natural reading flow
  • Works for most articles

Center

When to Use:

  • ✅ Special articles
  • ✅ Announcements
  • ✅ Visual content

Benefits:

  • Balanced, centered
  • Attention-grabbing
  • Unique appearance

Right

When to Use:

  • ✅ Unique design
  • ✅ Right-aligned layout
  • ✅ Creative articles

Benefits:

  • Unique design
  • Right-aligned appearance
  • Creative layout

Comments System

How Comments Work

  1. Customer submits comment: Fills out comment form
  2. Comment submitted: Comment is saved
  3. Moderation (if enabled): Comment requires approval
  4. Comment published: Comment appears on article
  5. Comment display: Shows author, date, and content

Comment Form Fields

  • Name: Commenter's name (required)
  • Email: Commenter's email (required)
  • Comment: Comment text (required)

Comment Moderation

  • Enabled: Comments require approval before publishing
  • Disabled: Comments publish immediately
  • Approval: Done in Shopify admin
  • Spam protection: Built-in spam filtering

Examples

Example 1: Standard Article

Settings:

  • Heading Size: 3XL
  • Heading Alignment: Left
  • Content Width: 760px
  • Image Border Radius: 16px
  • Padding: 40px top/bottom
  • All metadata enabled

Result: Standard article page with optimal reading width and all features

Example 2: Long-Form Article

Settings:

  • Heading Size: 4XL
  • Heading Alignment: Left
  • Content Width: 760px
  • Image Border Radius: 12px
  • Padding: 40px top/bottom
  • Reading time enabled

Result: Long-form article optimized for reading

Example 3: Image-Heavy Article

Settings:

  • Heading Size: 3XL
  • Heading Alignment: Center
  • Content Width: 1000px
  • Image Border Radius: 24px
  • Padding: 40px top/bottom
  • Large featured image

Result: Visual article with wide content and large images

Example 4: News Article

Settings:

  • Heading Size: 3XL
  • Heading Alignment: Left
  • Content Width: 760px
  • Image Border Radius: 8px
  • Padding: 40px top/bottom
  • Date emphasized

Result: News article with standard layout and date focus

Troubleshooting

Article Not Showing

  • Check: Verify article is published in Shopify admin
  • Check: Ensure article is not password-protected
  • Check: Verify article URL is correct
  • Check: Check article visibility settings

Content Not Displaying

  • Check: Verify article has content in Shopify admin
  • Check: Ensure article is published
  • Check: Check article section settings
  • Check: Verify content is saved

Images Not Showing

  • Check: Verify article has featured image
  • Check: Ensure images are published
  • Check: Test with different articles
  • Check: Verify image files are not corrupted

Comments Not Showing

  • Check: Verify "Enable Comments" is enabled in theme settings
  • Check: Ensure blog has comments enabled
  • Check: Check comment moderation settings
  • Check: Verify comments are approved (if moderation enabled)

Reading Time Not Showing

  • Check: Verify "Show Reading Time" is enabled in theme settings
  • Check: Reading time calculates automatically
  • Check: Requires article content to calculate
  • Check: Global setting applies to all articles

Tags Not Showing

  • Check: Verify "Show Tags" is enabled in theme settings
  • Check: Ensure article has tags assigned
  • Check: Add tags in article settings
  • Check: Tags appear automatically if available

Creating Articles in Shopify Admin

Adding a New Article

  1. Go to Online Store → Blog posts in Shopify admin
  2. Click Add blog post
  3. Select blog
  4. Enter article title
  5. Add article content (rich text)
  6. Add featured image
  7. Set author and publication date
  8. Add tags and categories
  9. Configure SEO settings
  10. Publish article

Editing Article Content

  1. Go to Online Store → Blog posts
  2. Select the article
  3. Edit title and content
  4. Update featured image
  5. Modify tags and categories
  6. Update SEO settings
  7. Save changes

Article Settings

Content:

  • Title: Article title
  • Content: Rich text article content
  • Excerpt: Article summary/preview
  • Featured Image: Main article image

Metadata:

  • Author: Article author name
  • Publication Date: When article was published
  • Tags: Article tags for categorization
  • Blog: Which blog article belongs to

SEO:

  • Page title: SEO title (different from display title)
  • Meta description: Search result description
  • URL handle: Article URL slug

Related Templates

  • Blog Page (blog.json) - Blog listing page
  • Home Page - Can feature articles
  • Page Template - Custom content pages

Related Sections

  • Article Section - Article display (this section)
  • Blog Section - Blog listing
  • Featured Blog - Feature articles on other pages

Next Steps:

  • Learn about Blog Page Template (blog listing)
  • Learn about Home Page Template
  • Create articles in Shopify admin
  • Customize your article page layout and settings
  • Add blog links to navigation menus
  • Configure comment moderation settings