tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 7: blog.liquid

Shopify Theme from Scratch Part 7: in this tutorial we’re going to be building the blog.liquid template, where you the blog articles that you write in your shop are listed.


This week we’re going to work on the blog.liquid template, where the articles that you write in the “Blog posts” page of the admin are listed.

Let’s dooo this!

1. Make some dummy blog articles

Before we get started with the coding, you will have to make some blog articles. If you’ve already got some blog articles written, you can go to step 2. Otherwise, go to the “Blog posts” page of your admin and click the green “Add blog post” link in the top right to make a new article.

You don’t really have to worry about the content of each article, what I did was just dropped some lorem ipsum on those badboys (if you’re feeling moderately badass, you can use gangsta ipsum). I’d say make about 4 to 5 dummy articles.

blog posts

2. Add the for loop to output the articles

Open blog.liquid, and replace its contents with the code below:

{{ blog.title }}

{% for article in blog.articles %}

{{ article.title }}

{{ article.published_at | date: '%b %d, %Y' }} {% if blog.comments_enabled? %} - {{ article.comments_count }} {{ article.comments_count | pluralize: 'comment','comments' }} {% endif %}
{{ article.excerpt_or_content }}
{% endfor %}

What we’re doing here is doing a for loop through the blog.articles array, and for each article we’re outputting its title, the date in which it was published, how many comments is has, and the excerpt/content of that article. To see a full list of what’s accessible through the ‘article’ object, see here.

The cool thing about the {{ article.excerpt_or_content }} tag is that it automatically checks if an article has an excerpt or not. If it does, it will output the excerpt; if it doesn’t, it will output the contents of the article. For example, if you look at Figure 7.1, it will output the excerpt because I’ve written something for it.

article content or excerpt

Figure 7.1: Adding an excerpt to an article

You should now see a list of the blog articles that you created in Step 1.


Figure 7.2: Blog articles being listed on blog.liquid

3. Add the blog tags and link to the article

Next, we’re going to add some code to output every article’s tags as well a link to the full article. Insert the code in red below.

{{ article.excerpt_or_content }}
{% if article.tags.size > 0 %}
tags: {% for tag in article.tags %} {{ tag }}{% unless forloop.last %}, {% endunless %} {% endfor %}
{% endif %}
{% endfor %}

The output of the code we just inserted can be seen in Figure 7.3 below. Again, we’re using the .btn class that we made in Part 5 to save some time :)

blog tags and link

Figure 7.3: Article tags and link to full article

What are article tags used for?

Article tags are used to filter out the articles listed on blog.liquid. For example, if you click on a tag called “wicked”, only the blog articles with the tag “wicked” applied to it will be listed.

4. Add the current tag to the title

Scroll up to the very top of the blog.liquid template, and wrap the first line with the code in red below:

{% if current_tags %}

{{ blog.title | link_to: blog.url }} » {{ current_tags.first }}

{% else %}

{{ blog.title }}

{% endif %}

This will make it so that when you click a tag that we added in Step 3, the title shows which tag is being used as a filter (Figure 7.4).

blog title with tag

Figure 7.4: The blog title now includes the tag that is currently being used as a filter

5. Paginate the blog articles

Let’s now paginate the blog listings so that the user is not shown 50 articles all at once. I’m going to go ahead and make it so that 5 articles are shown per page, but you can change this number to anything you’d like (note: there is a limit of 50 articles that can be shown per page).

At the very top of blog.liquid, add the code in red below:

{% paginate blog.articles by 5 %}

{% if current_tags %}

{{ blog.title | link_to: blog.url }} » {{ current_tags.first }}

{% else %}

{{ blog.title }}

{% endif %} ...

Then at the very bottom of blog.liquid, add the following code in red:

{% endfor %} {% if paginate.pages > 1 %} {% endif %} {% endpaginate %}

If you have more than 5 articles in your blog, you should now see pagination links at the bottom of the blog template (Figure 7.5).

blog pagination

Figure 7.5: Blog pagination links

6. Add in some CSS

Finally, let’s pretty this template up with some CSS. Open style.css, and at the very bottom of the stylesheet, add the following bit of code:

/**** blog.liquid ****/

.blog-title{margin-bottom:0px; }
.blog-article{border-bottom:1px solid #ccc; padding-bottom:30px; margin-bottom: 30px;}
.blog-data{font-size:13px; font-weight: bold; margin-top:5px;}
.blog-tags{width:800px; font-weight:bold; font-size:14px;}
.no-border{border:none !important;}

Your blog template should now look like this:

blog page final

That’s all for this week!

← Back to table of contents


Post a comment