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

> Configure your blog listing page with hero banner, article cards, and tag filtering

The Main Blog template (main-blog) controls how your blog listing page displays articles. It features a customizable hero banner with images and filtering, plus full control over article card metadata and pagination.

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

## What this section controls

* Hero banner with custom images and content
* Tag-based filtering interface
* Article cards with metadata display options
* Articles per page pagination
* Article excerpts, tags, dates, and authors
* Tag count display per article

## 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 your blog page">
    Use the page selector dropdown to select **Blogs** and choose your blog to preview.
  </Step>

  <Step title="Locate the template">
    The "Main Blog" section controls the blog listing template.
  </Step>
</Steps>

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

## Template settings

<Tabs>
  <Tab title="Blog Hero">
    <AccordionGroup>
      <Accordion title="Hero images (Required)">
        Upload separate hero images for mobile and desktop. **Both images are required** for the hero to display properly.

        **Main image - Mobile**:

        * Recommended size: 800x600px minimum
        * Portrait or square orientation works best
        * Optimized for vertical mobile viewports

        **Main image - Desktop**:

        * Recommended size: 1920x600px minimum
        * Landscape orientation
        * Wide format for desktop hero banners

        **Image tips**:

        * Use high-quality images that represent your blog content
        * Ensure sufficient contrast for overlaid text
        * Consider image focal point - text appears centered
        * Compress images before upload (under 500KB ideal)
      </Accordion>

      <Accordion title="Image overlay transparency">
        Controls the darkness of the overlay on hero images (0-100%, default: 50%).

        **Overlay purpose**: Creates contrast between hero image and overlaid text for readability.

        **Adjustment guidance**:

        * **0-30%**: Light overlay, for dark images with good text contrast
        * **40-60%** (default: 50%): Balanced overlay for most images
        * **70-100%**: Heavy overlay for very bright images or maximum text emphasis

        Test with your specific images to ensure title and content remain readable.
      </Accordion>

      <Accordion title="Title">
        Custom hero title text that replaces the default blog name.

        **When to customize**:

        * Create more engaging headline than blog name alone
        * Add context or value proposition (e.g., "Design Inspiration & Tips")
        * Maintain consistency with overall brand messaging

        **Leave blank** to use default blog name from Shopify settings.

        **Character guidance**: 30-60 characters works best for most displays.
      </Accordion>

      <Accordion title="Content">
        Rich text description or subtitle below the hero title.

        **Content ideas**:

        * Brief blog description or mission statement
        * What readers will find (e.g., "Weekly insights on sustainable fashion")
        * Call to action (e.g., "Discover our latest stories")
        * Publication frequency (e.g., "New articles every Tuesday")

        **Formatting**: Supports rich text (bold, italic, links).

        **Length**: 1-2 sentences (100-200 characters) for optimal readability.
      </Accordion>

      <Accordion title="Show filtering by tags">
        Displays tag filter buttons in the hero area. Enabled by default.

        **When enabled**: Readers can click tags to filter articles by topic.

        **Filtering behavior**:

        * Shows all tags used across blog articles
        * Clicking tag filters to show only articles with that tag
        * "All" button returns to full article list

        **When to disable**:

        * Small blogs with few articles where filtering isn't needed
        * Single-topic blogs without diverse tags
        * You prefer manual navigation over filtering

        Recommended to keep enabled for blogs with 10+ articles and multiple topics.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Blog Listing">
    <AccordionGroup>
      <Accordion title="Articles per page">
        Controls pagination - how many articles display before "Load more" or pagination (2-50 articles, default: 20).

        **Sizing recommendations**:

        * **12-20 articles** (default: 20): Standard range, balances browsing with performance
        * **6-10 articles**: Image-heavy blogs, reduces page load time
        * **25-50 articles**: Text-heavy blogs, reduces pagination clicks

        **Performance considerations**:

        * More articles = longer initial page load
        * Fewer articles = more pagination interactions
        * Consider featured image sizes - larger images favor fewer articles

        **Best practice**: Keep at 15-25 for optimal user experience.
      </Accordion>

      <Accordion title="Tags display count for each article">
        Control how many tags show per article in the listing.

        * **Show all** (default): Display all tags assigned to each article
        * **Show first**: Display only the first tag per article

        **Show all** benefits:

        * Complete topic visibility
        * Better for content discovery
        * Helps readers understand article scope

        **Show first** benefits:

        * Cleaner, less cluttered appearance
        * Focus on primary topic
        * Better for articles with many tags

        Choose based on your tagging strategy and visual preference.
      </Accordion>

      <Accordion title="Show tags">
        Show or hide article tags in listing cards. Enabled by default.

        **When enabled**: Tags appear as links below article excerpt, allowing topic-based filtering.

        **When to keep enabled**:

        * Multi-topic blogs where categorization helps readers
        * You use tags consistently across articles
        * Content discovery through topics is important

        **When to disable**:

        * Single-topic focused blog
        * Minimalist design preference
        * Tags aren't consistently used
      </Accordion>

      <Accordion title="Show excerpt">
        Display article excerpt (preview text) in listing cards. Enabled by default.

        **Excerpt generation**: Automatically pulls first \~200 characters from article content.

        **Benefits of showing excerpts**:

        * Helps readers decide which articles to read
        * Provides context beyond just titles
        * Improves click-through rates on relevant content
        * Creates more substantial article cards

        **When to disable**:

        * Very short articles where excerpt doesn't add value
        * Image-focused blog where visuals are primary draw
        * Minimalist design with title and image only

        Strongly recommended to keep enabled for content engagement.
      </Accordion>

      <Accordion title="Show date">
        Display publish date in article cards. Enabled by default.

        **When to show dates**:

        * Time-sensitive content (news, updates, trends)
        * Establishes recency and credibility
        * Readers care about content freshness
        * Regular publishing schedule you want to highlight

        **When to hide dates**:

        * Evergreen content where dates reduce perceived value
        * Older articles you don't want marked as "old"
        * Irregular publishing where dates call attention to gaps

        Consider your content strategy - timely vs. timeless.
      </Accordion>

      <Accordion title="Show author">
        Display author name in article cards. Enabled by default.

        **When to show authors**:

        * Multi-author blogs where attribution matters
        * Building personal brands for contributors
        * Author expertise adds credibility
        * Team blog highlighting different perspectives

        **When to hide authors**:

        * Single-author blog where attribution is implied
        * Brand-focused content over personal attribution
        * Minimalist card design

        For single-author blogs, hiding author reduces redundancy.
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Configuring tags for filtering

Tags are managed when creating/editing blog articles in Shopify admin.

<Steps>
  <Step title="Open article editor">
    Go to **Shopify Admin → Online Store → Blog posts → \[Select article]**.
  </Step>

  <Step title="Add tags">
    In the right sidebar under "Tags", enter tags separated by commas.

    Tags automatically become filterable in your blog listing.
  </Step>

  <Step title="Use consistent naming">
    Create standardized tag names across articles:

    * "Fashion Tips" not "fashion", "Fashion", "tips", "fashion-tips"
    * Capitalize consistently
    * Use 1-2 words per tag
    * Aim for 5-10 core tags across your blog
  </Step>
</Steps>

**Tag best practices**:

* Limit to 3-7 tags per article
* Create core topic tags and reuse them
* Avoid one-off tags (consolidate similar tags)
* Tags should represent browseable topics, not keywords

## Best practices

<CardGroup cols={2}>
  <Card title="Provide both hero images" icon="images">
    Upload optimized mobile and desktop hero images. Missing either image will break hero layout. Desktop landscape (1920x600px), mobile portrait (800x600px).
  </Card>

  <Card title="Balance overlay opacity" icon="sliders">
    Adjust overlay (40-60%) to ensure hero text remains readable against your images. Test across different devices and lighting conditions.
  </Card>

  <Card title="Write compelling hero content" icon="heading">
    Use custom title and content to set expectations and intrigue readers. Bland "Blog" title wastes valuable hero space.
  </Card>

  <Card title="Enable tag filtering" icon="filter">
    Keep tag filtering enabled for blogs with 10+ articles. Helps readers discover relevant content without scrolling through everything.
  </Card>

  <Card title="Show helpful metadata" icon="circle-info">
    Keep excerpt, tags, and date enabled for content blogs. Only minimal designs or image-focused blogs benefit from hiding these.
  </Card>

  <Card title="Optimize articles per page" icon="list">
    Start with 15-20 articles per page. Adjust based on image sizes and page load performance. Monitor bounce rates.
  </Card>

  <Card title="Standardize tagging" icon="tags">
    Create 5-10 core tags and use consistently. Tag sprawl (50+ unique tags) defeats filtering purpose and looks messy.
  </Card>

  <Card title="Consider evergreen content" icon="calendar-xmark">
    Hide dates on evergreen content blogs to maintain perceived freshness. Older valuable content shouldn't seem outdated.
  </Card>

  <Card title="Compress hero images" icon="gauge-simple">
    Large hero images (over 500KB) significantly slow page load. Use TinyPNG or similar before upload. Target under 300KB.
  </Card>

  <Card title="Test tag count display" icon="hashtag">
    For articles with many tags (7+), use "Show first" to avoid cluttering cards. For 3-5 tags, "Show all" works well.
  </Card>
</CardGroup>