Related Blog Posts Shopify App
Features
You have full control:
- Set the number of related posts to display to improve readership
- Use the featured image of a blog post to increase click-through rate
- Change the text displayed if there are no related posts
- Determine what blogs to display on (great if you have multiple blogs you want to keep separate)
- Exclude posts if they use a specific tag
- Exclude posts from showing as a related post (great to hide one-time promotional posts)
- Style the related posts so they look exactly how you want
It is fast with an in-built cache to never slow down your blog.
Use it free for your Shopify store by accessing the app in the official marketplace.
If the app helped you, please leave a review.
User Reviews
This is an awesome blogging tool. I recommend it to anyone who has a shopify blog. It is working well for reversemovement.com
ReverseMovement.com
Took 2 minutes. Very easy! Love it 🙂
FairAndSimpleCollection.com
We’re finding a lot of success with Related Blog Posts…People don’t just drop off on that blog post, but they click another blog post and read a different topic that you’ve talked about.
Official Shopify Masters Podcast
You can read plenty more 5-star reviews in the app marketplace.
Help with the App
How do I install it?
Get the app from the marketplace. In your Shopify admin go to “Online Store” and “Themes”. Click “Edit Code” for your live theme.
Select the file article.liquid or article-template.liquid file depending which file has the line {{ article.content }}. Copy:
{% include 'relatedblogs' %}
Paste the line where you want related posts to show. We recommend after {{ article.content }} so related blog posts display at the end of a blog post. Be careful including the code inside conditional tags. Your theme should look something like something like this.
Your installation is done! You may not even need to configure the app.
If your theme uses sections, you will not find {{ article.content }} in your article.liquid. The article.liquid file will reference another file like {% section 'template-article' %}. You need to go to the sections folder to find the template-article file (or whatever is referenced.) In it you will find a mention of {{ article.content }}.
Can you still not find the article.content code? Install Bold’s Shopify Theme Search Chrome extension then search {{ article.content }}.
How do I access the app?
Configure the app at any time by selecting the “Related Blog Posts” app from the “Apps” link in your primary Shopify admin.
How can I style the design?
The app uses your theme’s default CSS so I cannot personally support you to style it how you want. The suggested blog posts should look great out-of-the-box for most stores. If it doesn’t, you can enter custom CSS by going to the “Design” tab. Any web designer will be able to style it for you because the changes are basic.
There are two themes in the “Design” tab so you can select a layout you like.
The related posts are wrapped with an ID “relatedblogs” to easily focus your CSS. Here is an example of CSS to use:
#relatedblogs { width:400px; }
#relatedblogs ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; }
#relatedblogs ol li { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#888; border-left: 1px solid #999; }
This makes the related posts on the Shopify Solo Theme (which is no longer available in the Theme store) look like:
How do I customise the button?
Any design can be customised with CSS either in your theme or within the “Design” tab of the app. To change the font of the button, use .rb_continue_button { font-family: Arial,Helvetica Neue,Helvetica,sans-serif; }
How can I add an image in the related posts?
In the app settings, enable “Display the related posts image” option. The image comes from the “Featured Image” of the blog post.
What is the blog ID?
The blog ID is used for exclusion rules. You can get the ID you want to exclude by visiting the blog post then copying the number from the URL. For example, leading Shopify theme developer Out of the Box use the app on their blog post:
The blog ID for this post is: 45970309
Related blog posts are not showing correctly:
- Check the one-line snippet is installed at the right place in your published theme. See the FAQ “How do I install it?” for more help.
- Do you have at least three blog posts published? You need blog posts otherwise there is no suggested posts to link to.
- Are you working on a preview theme? You have to copy-and-paste the
relatedblogs.liquidfile in the “Snippets” folder of your live theme into the preview theme you’re editing.
How can I show blog posts on my home page, products, or elsewhere?
The app is made to show related blog posts. It won’t work on non-blog posts like blog home pages or product pages. You can work with a developer for such features.
What do I need to do if I update our Shopify Theme?
It depends how your theme is upgraded. The two things to consider for the app is ensuring the relatedblogs.liquid file exists in the snippets folder of your new theme. Secondly, the snippet {% include 'relatedblogs' %} is added to your new theme where you want the suggested blog posts to appear.
How can I uninstall the app?
Remove the app via the Shopify apps of your admin. If you want to remove all pieces of code, remove the relatedblogs.liquid file in the “Shippets” folder and remove {% include 'relatedblogs' %} wherever you placed it in your article.liquid file.
If you cannot find the file where you installed the snippet, use Bold’s Shopify Theme Search Chrome extension then search {% include 'relatedblogs' %}.
My question is not answered, can you help?
The app is 100% free, but I try to help out when possible. Contact me with your question and share as much detail as possible to stop emails going back-and-forth. Please provide a 1) link to one of your blog posts, 2) screenshot of where you inserted the relatedblogs.liquid line of code as per the instructions (use software like TinyTake to capture a screenshot), and 3) screenshot of your app settings. I cannot read your mind. If you don’t provide this information, I cannot help.