One of the great features of the Shopify platform is giving its users an interface to create and post blog posts on their website. In fact, you might be surprised that this blog post that you are reading right now is EXACTLY one of those posts. This is actually a Shopify website! Fancy right? We can do that for you too! But flex aside, it is a great way of providing your users information both about your company and various topics in your industry to build a community of like minded people… and raise some SEO… who am I kidding!
Once you open a blog article, you might like it and you might be interested in reading more articles, so it might be useful to add “Previous” and “Next” buttons at the bottom of your article template for easier navigation. Right? Right! This is user friendly, sure! But if we want to be even more convincing for the page viewer to click we could offer even more. Near the “Previous” and “Next” buttons we can also include a small image which is the featured image of that article, allowing the user to also see a visual preview.
The biggest challenge is how to get the image’s address so that we display it on the current article’s page. You can create a snippet that is used for both buttons called article-prev-next-image
.and pass to it two variables isPrev
which can be used to set a text above the image like “Previous” and an article
variable which contains the article object for the previous article.
We will follow the situation of the “Previous” button. To display the previous article’s image in the article template, you can use:
{% assign prevArticleId = blog.previous_article | remove_first: "/blogs/" %}
{% assign prevArticle = articles[prevArticleId] %}
{% include 'article-prev-next-image', isPrev: true, article:prevArticle %}
And in the article-prev-next-image
snippet, you can use:
{{ article.image | img_url: "700x" }}
Wherever you want to display the image.
By having the article object in the snippet, you can also use it to get the previous article’s title or date if you also want to display those. You’ve set yourself up for more information than you might have even thought!
For the Next article’s featured image we use something similar but we use blog.next_article instead.
It is always smart to have a validation before creating “Previous” and “Next” buttons, so if you are on the latest article, don’t include the “Next” button on the page. You can use liquid code for this. Always a good idea to be as clear as possible with your site, you don’t want someone getting to the last article and clicking a button that does nothing, that makes your website look broken!
And that’s it! You’ve got yourself a nice user-friendly button that allows you to scroll through blog posts within an article, and also see a nice preview image of the article. I’d say that’s a job well done, now go get yourself a community… and some SEO value!
We Are Slicedbread.