How to link blog posts from multiple Shopify blogs to one blog page

How to link blog posts from multiple Shopify blogs to one blog page

If you are an avid blogger, you might have more than one blog on your Shopify site, which can be a bit cumbersome for first time visitors to find the content that was most recently published. After a lot of trial and error I have found the solution with minimal coding knowledge required.

You can see how this works on my blog page , where I combined posts from several blogs on one blog page with a preview image, title, post snippet and a "read more" prompt. When a visitor click on my blog page they first see snippets with images from all the posts from my different blogs in one place. Once they click on any of the links he or she is then taken directly to the blog where the post resides for further reading.

The beauty of this code is that you  can write your post in any of the blogs on your site and it will automatically add the post snippet to the blog page. In order to achieve this all that is required is a short addition of coding to be placed in your theme's  Action code. Before you do anything please save your theme or experiment by creating a copy of your theme and tinkering with the code there. My theme is Kagami, which is not one of Shopify's free themes. I do a lot of copy and paste and background tinkering to get the results I need for my site and therefore can not give any coding advise either. I am sharing this post, since after years of trying to do exactly this I have finally stumbled upon a code that works for my site and it might either work for yours or at least give you an idea how to get this to work for you. 

First off, I also want to thank Hackinet who provided the 1st portion of the code that got me started on trying to find a solution. 2nd I apologize that the images might be hard to read. You might be able to zoom in to see the code better. Alternatively check the initial code here and look under your own theme's SNIPPETS > Article-preview-liquid for the portion on how to add the images and preview snippets.

Here are the steps how to link all blogs to one blog page

  • Go to Online Store ->Themes->Actions->Edit Code.
  • You should see multiple liquid files categorized, go under "Templates"->Choose "Add a new template"->Create a new template for 'Page' called 'all-blog'.
new template

The page you just created will open in an editor. Copy and paste the below code just after the line {{ page.content }}. (Your page might have some different html content but this line will be present):

Note: Here blog1 and blog2 and blog3 are your blog handles. Go to your respective blog pages and copy the part after the last '/'.

Like: https://example.com/blogs/this-is-your-blog-handle

page all blog

Step 2

Now, go to page -> Add new page -> Put title whatever you like, I put it 'Blog' -> Choose template suffix on the right side as 'page.all-blog'. Save it.

add page

Up until here you will notice that you get the page titles of all blog posts from your various different blogs. However images, excerpts and the read more are still missing. I looked for the code under SNIPPETS - Article-preview-liquid and took the portions that I needed as follows below.

To add the image copy this code:

Image code

To add the article excerpt add this below the code

article excerpts code

When done the entire added new code should look like this:

new code

After I had written this blog post I noticed that a lot of post are pulled per blog, which meant that you had to scroll down for a long time to view the latest blog post from other blogs. To solve this do ctrl F and locate this line

 {% for article in blogs[handle].articles limit: .articles %} 

Then change it to the number of posts to show (here I have set it to 2 posts per blog)

 {% for article in blogs[handle].articles limit: 2 %} 

I have not found a way to display the most recent blog post, based on the blog it was written on. I suppose you could move the order of the blogs around based on how often you post where. If you have a work around for this do share.

Let me know in the comments section if you found this post useful.

Shopify tutorial

Previous Post Next Post