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

> Blog article template for displaying individual blog posts with comments and social sharing

The Main Article template displays individual blog posts with a flexible block-based layout, controlling featured images, article metadata, content, tags, social sharing, and commenting features to create engaging blog experiences. This modular template allows you to customize the order and display of article elements like title, image, content, and tags for optimal reading experience. Use this template to publish compelling blog content that engages readers, encourages sharing, and strengthens your brand's content marketing strategy.

***

## Template Settings

### Content Features

<AccordionGroup>
  <Accordion title="Back to Blog Button" icon="arrow-left">
    Display a navigation link back to the blog listing page.

    * **Type:** Checkbox
    * **Default:** Enabled

    <Note>
      The button typically appears at the top of the article, helping readers navigate back to browse more posts.
    </Note>
  </Accordion>

  <Accordion title="Social Sharing" icon="share-nodes">
    Enable social media sharing buttons for the article.

    * **Type:** Checkbox
    * **Default:** Enabled

    **Typically includes:**

    * Facebook
    * Twitter/X
    * Pinterest
    * Email
    * Copy link

    <Tip>
      Social sharing increases article reach and engagement. Keep enabled unless you have specific reasons to disable.
    </Tip>
  </Accordion>

  <Accordion title="Comments Per Page" icon="comments">
    Control how many comments display before pagination.

    * **Range:** 2-20 comments
    * **Step:** 1
    * **Default:** 5

    <Note>
      Lower values (5-10) keep page length manageable. Higher values (15-20) reduce pagination clicks but increase page length.
    </Note>
  </Accordion>
</AccordionGroup>

### Layout Settings

<AccordionGroup>
  <Accordion title="Section Width" icon="left-right">
    Control the reading width of the article content.

    * **Narrower** (default) - Optimal for long-form reading (\~650px)
    * **Narrow** - Slightly wider reading column (\~800px)
    * **Page** - Standard page width (\~1200px)
    * **Fluid** - Extends to container edges

    <Tip>
      **Narrower** is recommended for blog articles as it provides the most comfortable reading experience with optimal line length.
    </Tip>
  </Accordion>

  <Accordion title="Color Scheme" icon="palette">
    * Select from available theme color schemes
    * **Default:** scheme-1
  </Accordion>

  <Accordion title="Spacing" icon="arrows-up-down">
    * **Top Spacing**: 0, 1, 2 (default), 4, or 6
    * **Bottom Spacing**: 0, 1, 2 (default), 4, or 6
  </Accordion>

  <Accordion title="Borders" icon="border-top-left">
    * **None** (default)
    * **Top Border**
    * **Bottom Border**
    * **Both Borders**
  </Accordion>
</AccordionGroup>

***

## Blocks

The article template uses a flexible block system to control content layout and order.

### Featured Image Block

<Accordion title="Featured Image" icon="image">
  Displays the article's featured image at full width.

  * **Limit:** 1 per article
  * **No settings** - automatically pulls from article featured image
  * **Responsive:** Scales to fit screen width

  <Note>
    The featured image is set in the blog post editor (Shopify Admin → Content → Blog posts → Select post → Featured image).
  </Note>
</Accordion>

### Title Block

<Accordion title="Title" icon="heading">
  Displays the article title with optional metadata.

  **Limit:** 1 per article

  **Settings:**

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

  <CardGroup cols={2}>
    <Card title="Date Format" icon="calendar">
      Typically: "January 15, 2024" or "15 Jan 2024" depending on locale
    </Card>

    <Card title="Author Display" icon="user-pen">
      Shows author name set in blog post editor
    </Card>
  </CardGroup>

  <Tip>
    Displaying date and author builds credibility and helps readers assess content freshness.
  </Tip>
</Accordion>

### Content Block

<Accordion title="Content" icon="align-left">
  Displays the main article body content.

  * **Limit:** 1 per article
  * **No settings** - automatically renders article content from blog post editor
  * **Rich text support:** Headings, lists, images, videos, embeds, code blocks

  <Note>
    Content is authored in Shopify Admin → Content → Blog posts using the rich text editor.
  </Note>
</Accordion>

### Tags Block

<Accordion title="Tags" icon="tags">
  Displays article tags for categorization and filtering.

  **Limit:** 1 per article

  **Settings:**

  * **Tag Display Type:**
    * **Links** (default) - Clickable tags that filter blog by tag
    * **Text** - Static text labels (non-clickable)

  <CardGroup cols={2}>
    <Card title="Links Mode" icon="link">
      Tags are clickable, filtering blog to show all posts with that tag
    </Card>

    <Card title="Text Mode" icon="font">
      Tags are visual labels only, providing categorization without navigation
    </Card>
  </CardGroup>

  <Warning>
    Tags must be added to the blog post in Shopify Admin (Blog posts → Tags field). Empty tag field = no tags displayed.
  </Warning>
</Accordion>

### App Block

<Accordion title="App Blocks" icon="puzzle-piece">
  Supports third-party app integrations for articles.

  * **Limit:** Unlimited
  * **Common uses:**
    * Comment systems (Disqus, Commentbox)
    * Related posts widgets
    * Email subscription forms
    * Author bio boxes
    * Table of contents generators

  <Note>
    Apps must support article page integration. Check app documentation for compatibility.
  </Note>
</Accordion>

***

## Block Ordering

Customize the article layout by reordering blocks in the Theme Customizer:

### Recommended Order

<Steps>
  <Step title="Featured Image">
    Visual impact at the top
  </Step>

  <Step title="Title">
    Article headline with date/author
  </Step>

  <Step title="Content">
    Main article body
  </Step>

  <Step title="Tags">
    Categorization at the end
  </Step>

  <Step title="App Blocks">
    Comments, related posts, author bio (after content)
  </Step>
</Steps>

### Alternative Layouts

<CardGroup cols={2}>
  <Card title="Minimal" icon="minus">
    Title → Content

    (No image, tags, or metadata)
  </Card>

  <Card title="Content-First" icon="file-lines">
    Title → Content → Featured Image → Tags

    (Image below content)
  </Card>

  <Card title="Full-Featured" icon="star">
    Featured Image → Title (date + author) → Content → Tags → Social Sharing → Comments
  </Card>

  <Card title="News Style" icon="newspaper">
    Title (date + author) → Featured Image → Content → Tags
  </Card>
</CardGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Content writing" icon="pen">
    Use headings (H2, H3) to structure long articles, break into short paragraphs (3-5 sentences), include images throughout (not just featured image), use bullet points and numbered lists for scannability, add alt text to all images. Optimal length: 300-600 words (short), 800-1,500 (standard), or 2,000+ (long-form).
  </Card>

  <Card title="Featured image guidelines" icon="image">
    Use minimum width of 1200px for retina displays, 16:9 or 3:2 aspect ratio, JPG (photos) or PNG (graphics), under 200KB file size. Use high-quality relevant images, avoid generic stock photos, include branding if needed, ensure subject is centered for mobile safety.
  </Card>

  <Card title="SEO optimization" icon="magnifying-glass-chart">
    Write descriptive keyword-rich titles (50-60 characters), add meta description (150-160 characters), use heading hierarchy (H2 → H3 → H4), include internal links to related articles/products, add image alt text, use 3-5 tags per post, enable social sharing. Edit URL handles for cleaner links.
  </Card>

  <Card title="Commenting strategy" icon="comments">
    Moderate comments to prevent spam (Shopify Admin → Settings → Comments), respond to legitimate comments to encourage engagement. Set 5-10 comments per page for low traffic, 10-15 for high traffic. Consider third-party systems like Disqus for better spam filtering.
  </Card>

  <Card title="Social sharing" icon="share-from-square">
    Keep social sharing enabled on all articles, use compelling featured images for social previews, write engaging titles that encourage clicks, add Open Graph meta tags for better previews. Social previews use featured image, title, and meta description.
  </Card>

  <Card title="Tags strategy" icon="tag">
    Use 3-5 relevant tags per post consistently, create consistent tag naming (lowercase, no spaces), use tags for topics not keyword stuffing. Examples: "skincare-tips", "summer-fashion", "diy-tutorials". Choose Links (default) for tag-based navigation or Text for purely informational labels. Avoid too many tags.
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Company Blog" icon="building">
    News, updates, company culture posts with author attribution
  </Card>

  <Card title="Product Guides" icon="book-open">
    How-to articles, tutorials, and product education content
  </Card>

  <Card title="Lifestyle Content" icon="heart">
    Fashion lookbooks, recipes, travel guides with rich imagery
  </Card>

  <Card title="Thought Leadership" icon="lightbulb">
    Industry insights, opinion pieces, expert commentary
  </Card>

  <Card title="Customer Stories" icon="users">
    Testimonials, case studies, user-generated content features
  </Card>

  <Card title="SEO Content" icon="chart-line">
    Keyword-targeted articles to drive organic search traffic
  </Card>
</CardGroup>

***

## Related Templates & Sections

<CardGroup cols={2}>
  <Card title="Main Blog" icon="newspaper">
    Blog listing page showing all articles in reverse chronological order
  </Card>

  <Card title="Main Blog Banner" icon="image">
    Optional banner section for blog listing pages
  </Card>

  <Card title="Blog Articles Section" icon="grid-2">
    Can be added to article template to show related posts
  </Card>
</CardGroup>

***

## Advanced Enhancements

While the template provides core article functionality, enhance with additional sections:

<CardGroup cols={2}>
  <Card title="Related Products" icon="cart-shopping">
    Add Product Recommendations section to drive sales from content
  </Card>

  <Card title="Newsletter Signup" icon="envelope">
    Add Newsletter section at end of articles to capture readers
  </Card>

  <Card title="Author Bio" icon="user-circle">
    Use Rich Text section or app block for author information
  </Card>

  <Card title="Table of Contents" icon="list-ol">
    Use app blocks for long-form article navigation
  </Card>
</CardGroup>

<Tip>
  Add sections to the article template in Theme Customizer: **Online Store → Themes → Customize → Blog posts → Article** (select any article to edit template).
</Tip>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Featured Image Not Showing" icon="image-slash">
    **Possible Causes:**

    * Featured image not set in blog post editor
    * Featured Image block not added to template
    * Block is disabled or hidden

    **Solutions:**

    1. Add featured image in Shopify Admin → Content → Blog posts → Select post → Featured image
    2. Add Featured Image block to template
    3. Ensure block is visible (not hidden in Theme Customizer)
  </Accordion>

  <Accordion title="Tags Not Displaying" icon="tags">
    **Possible Causes:**

    * No tags added to blog post
    * Tags block not added to template

    **Solutions:**

    1. Add tags in blog post editor (Tags field)
    2. Add Tags block to article template
    3. Verify block settings (links vs text mode)
  </Accordion>

  <Accordion title="Comments Not Appearing" icon="comment-slash">
    **Check:**

    * Comments enabled in Shopify settings (Settings → Comments → Posts)
    * Article has comments (or submit test comment)
    * Comment moderation settings (auto-approve vs manual)

    <Note>
      New blogs start with zero comments. First comment must be approved before appearing (unless auto-approve is enabled).
    </Note>
  </Accordion>

  <Accordion title="Social Sharing Not Working" icon="share-nodes">
    **Verify:**

    * Social sharing is enabled in template settings
    * Browser isn't blocking social widgets
    * Social meta tags are configured correctly
    * Test share links in incognito mode
  </Accordion>
</AccordionGroup>

***

## Quick Summary

* **Purpose:** Individual blog article display template
* **Content Source:** Articles from Shopify blog posts
* **Layout:** Flexible block-based system
* **Available Blocks:** Featured Image, Title, Content, Tags, App blocks
* **Key Features:** Social sharing, comments, back to blog navigation
* **Recommended Width:** Narrower (optimal reading experience)
* **Comments:** 2-20 per page (default: 5)

<Note>
  Articles are created in **Shopify Admin → Content → Blog posts**, not in the Theme Customizer. The template controls how articles are displayed, not the article content itself.
</Note>