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

# Blog Template (main-blog)

> Blog listing page template displaying article feeds with tag filtering and pagination

The Main Blog template displays a paginated feed of blog articles with optional tag-based filtering and the ability to inject promotional cards within the article grid. This template combines content discovery through article browsing with marketing opportunities through strategically placed text cards. Use this template to create an engaging content hub that showcases your editorial content while providing curated reading experiences through tag filtering and promotional highlights.

***

## Template Settings

### Content Display

<AccordionGroup>
  <Accordion title="List Of" icon="filter">
    Control which articles to display:

    * **All** (default) - Show all articles from the blog
    * **Selected** - Display only specific articles chosen via article blocks

    <Note>
      Use "Selected" mode when you want manual control over which articles appear and in what order.
    </Note>
  </Accordion>

  <Accordion title="Tag Filtering" icon="tags">
    Enable tag-based filtering for readers.

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

    When enabled, displays clickable tag filters above the article grid, allowing readers to view articles by category/topic.

    <Tip>
      Tag filtering is essential for blogs with 20+ articles across multiple categories. Disable for simple single-topic blogs.
    </Tip>
  </Accordion>

  <Accordion title="Articles Per Page" icon="list-ol">
    Control how many articles display before pagination.

    * **Range:** 3-50 articles
    * **Step:** 1
    * **Default:** 20

    <CardGroup cols={2}>
      <Card title="Low Count (3-12)" icon="minimize">
        Faster load, more pages, good for image-heavy posts
      </Card>

      <Card title="High Count (20-50)" icon="maximize">
        Fewer pages, more scrolling, ideal for text-focused content
      </Card>
    </CardGroup>
  </Accordion>

  <Accordion title="Pagination Style" icon="ellipsis">
    Choose how additional articles load:

    * **Default** (default) - Traditional page numbers (1, 2, 3...)
    * **Load More** - "Load More" button for progressive loading

    <Note>
      "Load More" provides smoother UX and keeps users on the same page, while traditional pagination is better for SEO crawling.
    </Note>
  </Accordion>
</AccordionGroup>

### Article Card Appearance

<AccordionGroup>
  <Accordion title="Show Excerpt" icon="align-left">
    Display article excerpt/summary on listing cards.

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

    <Tip>
      Excerpts give readers context before clicking. For best results, write custom excerpts in blog post settings rather than relying on auto-generated ones.
    </Tip>
  </Accordion>

  <Accordion title="Show Date" icon="calendar">
    Display publish date on article cards.

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

    <Note>
      Showing dates builds trust for timely content (news, trends) but may make evergreen content seem outdated.
    </Note>
  </Accordion>

  <Accordion title="Show Author" icon="user-pen">
    Display article author on cards.

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

    Useful for multi-author blogs or building personal brand. Disable for anonymous/corporate blogs.
  </Accordion>

  <Accordion title="Content Alignment" icon="align-center">
    Control text alignment on article cards:

    * **Left** - Left-aligned text
    * **Center** (default) - Centered text
    * **Right** - Right-aligned text

    <Tip>
      Center alignment works best for grid layouts with images. Left alignment suits list-style layouts with larger text blocks.
    </Tip>
  </Accordion>
</AccordionGroup>

### Layout Settings

<AccordionGroup>
  <Accordion title="Section Width" icon="left-right">
    * **Page Width** (default) - Contained within page margins
    * **Fluid Width** - Extends to container edges
    * **Full Width** - Edge-to-edge browser width
  </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

### Text Card Block

Inject promotional content cards within the article grid.

<Accordion title="Text Card Settings" icon="rectangle-ad">
  **Limit:** 1 per blog template

  **Settings:**

  * **Title:** Rich text heading (default: "Behind the brand: Find out more about our brand")
  * **Button Label:** CTA text (default: "Read more")
  * **Button URL:** Destination link (default: `/`)
  * **Button Style:** Filled, Outlined (default), or Default
  * **Position:** Grid position 1-28 (default: 8)
  * **Color Scheme:** Independent color scheme (default: scheme-1)

  <Tip>
    **Strategic Positioning:**

    * Position 1-3: High visibility (above the fold)
    * Position 7-9: Natural break after first row
    * Position 15-20: Mid-feed engagement
  </Tip>

  <Note>
    The text card appears at the specified position in the article grid. For example, position 8 means it appears as the 8th item in the grid (after 7 articles).
  </Note>
</Accordion>

### Article Block

Manually select specific articles to display (when "Selected" mode is active).

<Accordion title="Article Settings" icon="newspaper">
  **Settings:**

  * **Article:** Article picker to select specific blog post

  **Use Cases:**

  * Feature specific articles regardless of publish date
  * Create curated article collections
  * Highlight evergreen content
  * Manual article ordering

  <Warning>
    Article blocks only work when **List Of** is set to "Selected". In "All" mode, articles display chronologically by publish date.
  </Warning>
</Accordion>

***

## Display Modes Comparison

<CardGroup cols={2}>
  <Card title="All Articles Mode" icon="list">
    **When to Use:**

    * Standard blog with regular publishing
    * Chronological order is desired
    * Minimal manual curation needed

    **Behavior:**

    * Shows all published articles
    * Reverse chronological order (newest first)
    * Automatic updates as new articles publish
    * Tag filtering works
  </Card>

  <Card title="Selected Articles Mode" icon="hand-pointer">
    **When to Use:**

    * Featured article showcase
    * Curated reading lists
    * Landing pages with specific content
    * Manual article prioritization

    **Behavior:**

    * Shows only articles added via blocks
    * Custom order (block order)
    * Manual updates required for new articles
    * Great for themed collections
  </Card>
</CardGroup>

***

## Tag Filtering Features

When tag filtering is enabled:

<AccordionGroup>
  <Accordion title="How It Works" icon="filter-circle-dollar">
    * All unique tags from blog articles display as clickable filters
    * Clicking a tag filters grid to show only articles with that tag
    * "All" or "View All" button returns to unfiltered view
    * URL updates with tag parameter for shareable filtered views
  </Accordion>

  <Accordion title="Tag Display" icon="tags">
    Tags appear as:

    * Horizontal list above article grid (desktop)
    * Scrollable list or dropdown (mobile)
    * Alphabetically sorted or by frequency (theme-dependent)
    * Active tag highlighted/selected
  </Accordion>

  <Accordion title="SEO Benefits" icon="magnifying-glass-chart">
    * Tag filtering creates unique URLs (e.g., `/blogs/news/tagged/skincare`)
    * Indexed as separate pages by search engines
    * Helps with topic authority and keyword targeting
    * Provides internal linking structure
  </Accordion>
</AccordionGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Article grid layout" icon="grid">
    Use 2-3 columns on desktop and single column on mobile with consistent card heights for clean alignment. Use 12-15 articles per page for most blogs, 20-30 for high-volume content sites, or 6-9 for image-heavy lifestyle blogs. Use high-quality featured images with same aspect ratio.
  </Card>

  <Card title="Text card strategy" icon="bullseye">
    Promote email newsletter signup, about/brand story pages, popular products related to blog topics, lead magnets (ebooks, guides), or social media follows. Position at 7-9 for high visibility after first row, 15-20 for engaged readers. Avoid position 1-3 to let articles lead.
  </Card>

  <Card title="Tag organization" icon="folder-tree">
    Use 3-5 tags per article consistently, create tag taxonomy (e.g., "skincare-tips", "product-reviews"), use lowercase hyphenated format, avoid one-off tags (minimum 3+ articles per tag), and review tags quarterly to consolidate similar ones. Too many unique tags (50+) creates fragmentation.
  </Card>

  <Card title="Pagination considerations" icon="forward">
    Default pagination is better for SEO (crawlable pages) with clear progress indicator and ability to jump to specific pages. Load More offers better mobile UX with no page reloads, higher engagement, and infinite scroll feel, but may hurt SEO if not implemented correctly.
  </Card>

  <Card title="Content strategy" icon="pen-fancy">
    Publish consistently (weekly, bi-weekly, monthly schedule), write compelling titles and excerpts, use high-quality featured images, apply tags consistently for filtering, promote via email and social, and interlink articles with product pages to drive sales from content marketing.
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Lifestyle Blog" icon="heart">
    Image-heavy cards with excerpts, tag filtering by category (fashion, beauty, home)
  </Card>

  <Card title="News/Updates" icon="newspaper">
    Date-prominent cards, high articles per page (30-50), default pagination
  </Card>

  <Card title="Educational Content" icon="graduation-cap">
    Author-focused cards, tag filtering by topic, text card for course promotion
  </Card>

  <Card title="Product Guides" icon="book">
    Centered alignment, excerpts enabled, text card linking to product collections
  </Card>

  <Card title="Company Blog" icon="building">
    Author attribution, tag filtering by department, professional styling
  </Card>

  <Card title="Curated Collection" icon="star">
    Selected mode with hand-picked articles, no tag filtering, custom order
  </Card>
</CardGroup>

***

## Related Templates & Sections

<CardGroup cols={2}>
  <Card title="Main Article" icon="file-lines">
    Individual article template where readers land after clicking blog cards
  </Card>

  <Card title="Main Blog Banner" icon="image">
    Optional banner section that can be added above blog listing
  </Card>

  <Card title="Blog Articles Section" icon="newspaper">
    Reusable section for displaying article grids on other pages
  </Card>
</CardGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="No Articles Showing" icon="eye-slash">
    **Possible Causes:**

    * Blog has no published articles
    * Template set to "Selected" mode with no article blocks
    * Articles exist but aren't published

    **Solutions:**

    1. Publish articles in Shopify Admin → Content → Blog posts
    2. Switch to "All" mode or add article blocks
    3. Verify articles are in the correct blog (if multiple blogs exist)
  </Accordion>

  <Accordion title="Tag Filter Not Appearing" icon="filter-slash">
    **Check:**

    * Tag filtering is enabled in template settings
    * Articles have tags assigned
    * At least 2+ different tags exist across articles

    <Note>
      If all articles have the same single tag, or no tags, the filter may not display.
    </Note>
  </Accordion>

  <Accordion title="Text Card Not Showing" icon="rectangle-xmark">
    **Verify:**

    * Text card block is added to template
    * Position is within articles per page range (e.g., position 8 but only 5 articles = won't show)
    * Enough articles exist to reach the position
  </Accordion>

  <Accordion title="Pagination Issues" icon="circle-exclamation">
    **Common Problems:**

    * Load More button not working (JavaScript error)
    * Wrong number of articles per page (cache issue)
    * Pagination showing when it shouldn't (fewer articles than per-page setting)

    **Solutions:**

    1. Clear browser cache and test
    2. Check browser console for JavaScript errors
    3. Verify articles\_per\_page setting matches expected behavior
  </Accordion>
</AccordionGroup>

***

## Quick Summary

* **Purpose:** Blog listing page (article index/archive)
* **Display Modes:** All articles (automatic) or Selected articles (manual)
* **Filtering:** Optional tag-based filtering
* **Pagination:** 3-50 articles per page, traditional or load more style
* **Card Features:** Excerpt, date, author, custom alignment
* **Blocks:** Text card (promotional), Article (for selected mode)
* **Text Card Position:** Inject promotional cards at positions 1-28 in grid

<Note>
  Blog articles are created in **Shopify Admin → Content → Blog posts**. This template controls how the blog listing displays, not individual article content.
</Note>