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`	number	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.categories`	array	Blog categories

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>

Category filtering

{% for category in blog.categories %}
  <a href="{{ blog.url }}/category/{{ category.handle }}">{{ category.name }}</a>
{% endfor %}

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`	number	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.author_avatar`	string	The author's avatar image URL
`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`	string	The publish date
`article.created_at`	string	When the article was created
`article.updated_at`	string	When the article was last updated
`article.tags`	array	Tags on this article
`article.category`	object	The article's category (`name`, `handle`)
`article.is_featured`	boolean	Whether this article is marked as featured
`article.reading_time`	number	Estimated reading time in minutes

Article detail page

<article>
  <header>
    <h1>{{ article.title }}</h1>
    <p>
      {% if article.author_avatar %}
        <img src="{{ article.author_avatar }}" alt="{{ article.author }}" class="avatar" />
      {% endif %}
      By {{ article.author }}
      on {{ article.published_at | date: '%d %B %Y' }}
      {% if article.reading_time %}
        &middot; {{ article.reading_time }} min read
      {% endif %}
    </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>

Featured articles

Pull featured articles into a homepage or sidebar:

{% for article in blog.articles %}
  {% if article.is_featured %}
    <div class="featured-post">
      <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
      <p>{{ article.excerpt | truncatewords: 20 }}</p>
    </div>
  {% endif %}
{% endfor %}

Sections

Each article can have structured content sections (the same section types used on pages). Use article.sections to render rich content beyond plain HTML:

Property	Type	Description
`article.sections`	array	Content sections for the article body

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.

On this page