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

# Article Template (main-article)

> Configure your blog post article page with featured images, metadata, social sharing, and comments

The Blog post template (main-article) controls how individual blog articles display on your store. It provides customization for featured images, article metadata, social sharing, and comment pagination through a flexible block system.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/mojave/main-article-overview.png" alt="Blog post article overview" />
</Frame>

## What this section controls

* Featured image display and sizing
* Article title with date and author
* Article content display
* Tag display (links or badges)
* Back to blog navigation
* Social media sharing buttons
* Comment pagination
* Third-party app integrations

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    In your Shopify admin, go to **Online Store > Themes** and click **Customize** on your active theme.
  </Step>

  <Step title="Navigate to an article page">
    Use the page selector dropdown to select **Blog posts** and choose any article to preview.
  </Step>

  <Step title="Locate the template">
    The "Blog post" section controls the main article template. Additional sections can be added below it.
  </Step>
</Steps>

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/mojave/main-article-location.png" alt="Blog post section location" />
</Frame>

## Template settings

<Tabs>
  <Tab title="Navigation & Sharing">
    <AccordionGroup>
      <Accordion title="Show back to Blog button">
        Displays a navigation link at the top of the article that returns readers to the parent blog. Enabled by default.

        **Benefits**:

        * Improves blog navigation and user experience
        * Encourages readers to browse more articles
        * Reduces bounce rate by providing clear exit path

        **When to disable**: If you prefer custom navigation or want readers to focus only on current article without distraction.
      </Accordion>

      <Accordion title="Show socials sharing">
        Displays social media sharing buttons allowing readers to share the article. Enabled by default.

        **Included networks** (based on theme settings social media configuration):

        * Facebook
        * Twitter/X
        * Pinterest
        * LinkedIn
        * Email

        **Benefits**:

        * Increases article reach through social sharing
        * Builds backlinks and referral traffic
        * Encourages reader engagement

        **Best practices**: Keep enabled for content marketing and traffic growth. Position near article end or after compelling content.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Comments">
    <AccordionGroup>
      <Accordion title="Comments per page">
        Controls how many comments display before pagination (2-20 comments, default: 5).

        **Sizing recommendations**:

        * **5-10 comments** (default: 5): Standard, keeps page manageable
        * **15-20 comments**: High-engagement blogs, reduces pagination clicks
        * **2-3 comments**: Long detailed comments, preserves page load speed

        **Requirements**:

        * Shopify blog comments must be enabled in blog settings
        * Comments are moderated through Shopify admin

        **Note**: Lower numbers improve page performance but increase pagination clicks. Higher numbers show more engagement but may slow page load.
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Block settings

Build your article page by adding and arranging blocks. Typical order: Featured Image → Title → Content → Tags.

<Tabs>
  <Tab title="Core Content Blocks">
    <AccordionGroup>
      <Accordion title="Featured image block">
        Displays the article's featured image. Limit 1 per article page.

        **Configuration**:

        * **Featured image height**: Choose aspect ratio for image display:
          * **Adapt to image**: Uses natural aspect ratio, no cropping
          * **Small (16:9)**: Widescreen format, good for landscape photography
          * **Medium (4:3)**: Balanced ratio, traditional photography format
          * **Large (3:4)**: Portrait format, taller images

        **Image source**: Automatically pulls from article.image set in blog post editor.

        **Best practices**:

        * Use 16:9 ratio for consistency across articles
        * Recommended size: 1200x675px minimum for crisp display
        * Optimize images before upload (compress to reduce file size)
        * Choose "Adapt to image" if you have varying image dimensions

        **Info**: For best results, use images with 16:9 aspect ratio. [Learn more about image aspect ratios](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)
      </Accordion>

      <Accordion title="Title block">
        Displays article title with optional metadata. Limit 1 per article page.

        **Configuration**:

        * **Show date**: Display article publish date (enabled by default)
        * **Show author**: Display article author name (enabled by default)

        **Metadata display**: Date and author appear below the article title.

        **When to show metadata**:

        * **Show both**: Multi-author blogs, time-sensitive content, news articles
        * **Date only**: Single-author blogs where authorship is implied
        * **Neither**: Timeless evergreen content where dates may reduce perceived value

        **SEO note**: Title automatically includes proper heading structure (H1) for search optimization.
      </Accordion>

      <Accordion title="Content block">
        Displays the main article content. Limit 1 per article page.

        No configuration needed - automatically renders full article content including:

        * Rich text formatting
        * Embedded images
        * Videos
        * Links
        * Lists and blockquotes

        **Content editing**: Edit article content in **Shopify Admin → Online Store → Blog posts → \[Article]**.
      </Accordion>

      <Accordion title="Tags block">
        Displays article tags as clickable links or visual badges. Limit 1 per article page.

        **Configuration**:

        * **Tags type**: Choose visual style:
          * **Links** (default): Plain text links with separators
          * **Badges**: Styled pill/badge buttons

        **Tag functionality**: Tags are clickable and filter the blog to show all articles with that tag.

        **Tag management**: Add tags when creating/editing articles in Shopify admin. Tags help with:

        * Article categorization
        * Content filtering for readers
        * Internal linking and navigation
        * SEO through topical grouping

        **Best practices**:

        * Use 3-7 tags per article
        * Create consistent tag naming conventions
        * Use badges for modern aesthetic, links for minimal design
        * Position tags at article end or near social sharing
      </Accordion>

      <Accordion title="@app block">
        Integration point for third-party blog apps. Unlimited blocks allowed.

        **Common blog apps**:

        * Comment systems (Disqus, Facebook Comments)
        * Related posts recommendations
        * Email subscription widgets
        * Reading time calculators
        * Table of contents generators
        * Social proof widgets

        No configuration needed - apps appear automatically when installed and configured.
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Managing blog comments

Article comments are managed through Shopify's built-in blog comment system.

<Steps>
  <Step title="Enable comments">
    Go to **Shopify Admin → Online Store → Blog posts → Manage blogs → \[Your blog] → Edit**.

    Check "Comments are" and choose moderation setting:

    * **Disabled**: No comments
    * **Moderate**: Approve before publishing
    * **Published automatically**: Immediate publishing
  </Step>

  <Step title="Moderate comments">
    View and manage comments at **Shopify Admin → Online Store → Blog posts → Comments**.

    You can approve, spam, or delete comments.
  </Step>

  <Step title="Configure pagination">
    Set "Comments per page" in the template settings. Lower numbers (5-10) are recommended for performance.
  </Step>
</Steps>

**Comment best practices**:

* Use moderation to prevent spam
* Respond to legitimate comments to encourage engagement
* Monitor comments regularly for quality discussions

## Best practices

<CardGroup cols={2}>
  <Card title="Consistent featured images" icon="image">
    Use the same aspect ratio across all articles (16:9 recommended). Creates cohesive visual experience and professional appearance.
  </Card>

  <Card title="Enable social sharing" icon="share-nodes">
    Keep social sharing enabled to amplify content reach. Position after article content when readers are primed to share valuable insights.
  </Card>

  <Card title="Show metadata strategically" icon="calendar">
    Show dates for time-sensitive content (news, updates). Hide dates for evergreen content to maintain perceived freshness.
  </Card>

  <Card title="Use tags effectively" icon="tags">
    Create 5-10 core topic tags and use consistently across articles. Avoid tag sprawl - consolidate similar tags (e.g., "Fashion Tips" not "fashion", "Fashion", "fashion-tips").
  </Card>

  <Card title="Optimize featured images" icon="gauge-high">
    Compress images before upload (aim for under 200KB). Use tools like TinyPNG or ImageOptim. Large images slow page load significantly.
  </Card>

  <Card title="Badge style for modern look" icon="certificate">
    Use badge-style tags for contemporary design. Link-style tags suit minimalist or text-heavy blogs.
  </Card>

  <Card title="Keep back to blog button" icon="arrow-left">
    The return navigation improves user experience and keeps readers engaged with more content. Only remove if you have custom navigation.
  </Card>

  <Card title="Moderate comments proactively" icon="comments">
    Set comments to moderated to prevent spam. Respond to genuine comments quickly to build community and encourage future engagement.
  </Card>

  <Card title="Block order matters" icon="layer-group">
    Standard order works best: Featured Image → Title → Content → Tags → Comments. Social sharing typically appears near content end.
  </Card>

  <Card title="Limit comments per page" icon="list-ol">
    Keep at 5-10 comments per page for optimal performance. Long comment threads slow page load and overwhelm readers.
  </Card>
</CardGroup>