Blog & Article

Blog and article objects for listing posts, showing content, and building a blog index.

The blog and article objects power your store's blog. A blog is a collection of articles. Each article has a title, body content, author, tags, and an optional image.

Blog object

The blog object is available on blog listing pages. It holds the blog title and its list of articles.

Property	Type	Description
`blog.id`	string	The unique blog ID
`blog.title`	string	The blog title
`blog.handle`	string	The URL handle
`blog.url`	string	The full blog URL
`blog.articles`	array	All published articles
`blog.articles_count`	number	Total number of published articles
`blog.tags`	array	All tags used across the blog's articles

Blog listing page

<h1>{{ blog.title }}</h1>

{% paginate blog.articles by 12 %}
  {% for article in blog.articles %}
    <div class="article-card">
      {% if article.image %}
        <img src="{{ article.image | img_url: '600x' }}" alt="{{ article.title }}" />
      {% endif %}
      <h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
      <p class="meta">{{ article.published_at | date: '%d %B %Y' }} by {{ article.author }}</p>
      <p>{{ article.excerpt_or_content | truncatewords: 30 }}</p>
    </div>
  {% endfor %}

  {{ paginate | default_pagination }}
{% endpaginate %}

Tag filtering

The blog.tags array lets you build a tag filter for the blog index:

<div class="blog-tags">
  <a href="{{ blog.url }}">All</a>
  {% for tag in blog.tags %}
    <a href="{{ blog.url }}/tagged/{{ tag | handleize }}">{{ tag }}</a>
  {% endfor %}
</div>

Article object

The article object represents a single blog post. It is available on the article detail page and inside blog.articles loops.

Property	Type	Description
`article.id`	string	The unique article ID
`article.title`	string	The article title
`article.handle`	string	The URL handle
`article.url`	string	The full article URL
`article.author`	string	The author name
`article.content`	string	The full article body as HTML
`article.excerpt`	string	The excerpt (short summary)
`article.excerpt_or_content`	string	The excerpt if set, otherwise the full content
`article.image`	image	The featured image
`article.published_at`	date	The publish date
`article.created_at`	date	When the article was created
`article.updated_at`	date	When the article was last updated
`article.tags`	array	Tags on this article

Article detail page

<article>
  <header>
    <h1>{{ article.title }}</h1>
    <p>
      By {{ article.author }}
      on {{ article.published_at | date: '%d %B %Y' }}
    </p>
  </header>

  {% if article.image %}
    {{ article.image | image_tag: class: 'article-hero' }}
  {% endif %}

  <div class="article-body">
    {{ article.content }}
  </div>

  {% if article.tags.size > 0 %}
    <footer class="article-tags">
      {% for tag in article.tags %}
        <a href="{{ blog.url }}/tagged/{{ tag | handleize }}">{{ tag }}</a>
      {% endfor %}
    </footer>
  {% endif %}
</article>

Comments

If comments are enabled on the blog, articles have a comments array and a comments_count property:

Property	Type	Description
`article.comments`	array	Approved comments
`article.comments_count`	number	Number of approved comments
`comment.author`	string	The commenter's name
`comment.email`	string	The commenter's email
`comment.content`	string	The comment body
`comment.created_at`	date	When the comment was posted

<h3>{{ article.comments_count }} {{ article.comments_count | pluralize: 'comment', 'comments' }}</h3>

{% for comment in article.comments %}
  <div class="comment">
    <p class="comment-meta">{{ comment.author }} on {{ comment.created_at | date: '%d %b %Y' }}</p>
    <p>{{ comment.content }}</p>
  </div>
{% endfor %}

Accessing blogs by handle

You can access any blog by its handle using the global blogs object:

{% assign news = blogs['news'] %}
{% for article in news.articles limit: 3 %}
  <a href="{{ article.url }}">{{ article.title }}</a>
{% endfor %}

This is useful for showing recent posts in a sidebar or footer section on pages that are not part of the blog.