Blogs: Add author and date to grid view

If you're using the clean grid view to list your blog posts and would like to incorporate the author and publish date, you can use this customization.

Before

After

How-to

Step 1

Open your code editor. In the Snippets folder, open to edit: article-grid-item.liquid

Quick link for live/published theme:
https://shopify.com/admin/themes/current?key=snippets/article-grid-item.liquid

Step 2

Replace all the code with this code:

<div class="grid__item {{ blog_grid }}">
  <a class="blog__link" href="{{ article.url }}">
    <div class="blog__article blog__article--card{% if article.image %} blog__article--image{% endif %}">
      {% if article.image %}<div class="blog__article__overlay" style="background-image: url('{{ article.image | img_url: 'x630' }}')"></div>{% endif %}
      <div class="blog__article__content equalHeightColumn">
        <h3 class="h3 blog__article__title">{{ article.title }}</h3>
        
        <div class="rte blog__article__text">
          {% unless article.image %}
            {% if article.excerpt == blank %}
              {{ article.content | strip_html | truncate: 200 }}
            {% else %}
              {{ article.excerpt | strip_html | truncate: 200 }}
            {% endif %}
          {% endunless %}
        </div>
      </div>
    </div>
  </a>
    {% capture author %}<span itemprop="author" itemscope itemtype="https://schema.org/Person"><span class="strong" itemprop="name">{{ article.author }}</span></span>
    {% endcapture %}
    {% capture date %}<time itemprop="datePublished" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
    <p class="accent">{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>
</div>

Save the file. That's it! 

Undo or remove changes

Use the Older versions link to rollback to the original version to undo this customization.