[Shopify] 最新ブログ記事を一覧にしてサイドバーなどに表示する

October 13, 2020

Previously, we created a list of pickup (recommended) blog posts in the sidebar by the blog posts.

https://ec-penguin.com/blogs/shopify/pickup-articles

And now we would like to get the list of the latest articles and display them in the same way.

I am creating a sidebar on the side of the blog posts, so that readers will be able to see other articles more easily if there are many articles to be displayed.

This is what the finished product will look like.

Code to list the latest blog posts

First, here is the original code that can display the list of the latest articles.

<! -- Recent articles -->

< div id = "categories-sidebar" >

　< p class = "sidebar-title". > Latest Articles </ p >

　< ul class = "archives-sidebar-box" >

　　{% for article in blog . articles limit: 5 %}

　　　< a href = " {{ article . url }} " >

　　　　< center >

　　　　　< img class = "recent-articles-image" src = " {{ article . image | img_url: 'medium'. }} " alt = "" >

　　　　</ center >

　　　　< p class = "recent-articles-title" >{{ article . title }}</ p >

　　　</ a >

　　{% endfor %}

　</ ul >

</ div > >

< style >

.recent-articles-image {

　width : 80% (%) ;

　margin : 10px auto ;

}

.recent-articles-title {

　width : 90% ;

　margin : auto ;

　padding-bottom : 20px ;

}

</ style >

This is the original code.

I'll explain it in a bit.

{% for article in blog.articles limit: 5 %}

Normally, the above code is used to retrieve a list of blog posts, but this time, the "limit" is used to set the maximum number of posts to be retrieved.

In this case, it would retrieve only the first 5 articles, and so on. If you want to display more of the latest blog posts, you can increase this number.

The rest of the design is applied in the <style> tag at the bottom. If you want to apply additional CSS, you can add class names to HTML elements or add them in style tags. (Since nothing is controlled by the class name in this case.)

Also, unlike the pickup article, this time you don't need to edit it specifically from the customize screen.

Embedding the Latest Articles section

You can normally copy the above code and paste it directly into another LIQUID file. However, the recommended method of embedding is to copy and paste the above code in its entirety and create a new section. (This way you can use the code in many ways)

Here is how to create a section

https://ec-penguin.com/blogs/shopify/introduction-to-sections

In this way I added a section called "recent-articles.liquid".

Now all that is left to do is to add a section called

{% section 'recent-articles' %}

in the location where you want to embed the code.

Listing Shopify's latest blog posts and displaying them in the sidebar, etc. Summary

Displaying the latest blog posts on a Shopify site like this is not particularly difficult.

It might be a good idea to display a little more than three articles on the home page, with a slightly different layout, as well as in the sidebar of the blog posts. If you have been writing a trend blog, the latest articles are often the ones that readers are most likely to read and be most interested in. Therefore, I thought that displaying the latest articles together with the pickup articles as well as the pickup articles would increase the dwell time and the number of pages stayed.

Thank you for reading to the end.

Have a great day!