Want to beef up your Shopify article page a little? How about offering some basic navigation? I'm going to share a couple of tips on how to allow users to go back to the article listing page, as well as link to the next and previous articles in the blog.

First off, let's look at adding a link back to the blog listing page. Open up article.liquid in the Theme > Template Editor page in Admin, and add the following at the bottom of the page.

<a href="{{ blog.url }}">Back to {{ blog.title | escape }} articles</a>

Easy huh?

Next up, let's add links to the next and previous articles. 

Update: 8 days after publishing this article Shopify announced support for blog.next_article and blog.previous_article. Use the code below only if you also need the previous and next article title.

To do this we need to loop over the all the articles, using a variable to keep track of what the next and last articles were. Here is the code:

{% assign current_found = false %}
{% assign done = false %}
{% for a in blog.articles %}
	{% if current_found and done == false %}
		{% assign next_article = a %}
		{% assign done = true %}
	{% endif %}
	{% unless done %}
		{% if a.id == article.id %}
			{% assign current_found = true %}
		{% else %}
			{% assign prev_article = a %}
		{% endif %}
	{% endunless %}
{% endfor %}

You will now have access to two variables: next_article and prev_article. To use these add some code like this:

{% if prev_article %}
	<a href="{{ prev_article.url }}">Previous: {{ prev_article.title | escape }}</a>
{% endif %}

{% if next_article %}
	<a href="{{ next_article.url }}">Next: {{ next_article.title | escape }}</a>
{% endif %}

That's it. Two simple things to make browsing articles a little easier for your users.