[Shopify 無料App] ブログに関連記事を追加する方法 - EC PENGUIN

[Shopify Free App]Add related posts to blog article page

Shopify blog related posts


    I wanted to add a related article to my Shopify blog.(So sudden)


    However, I thought it would be difficult to implement it so that related articles would be picked up automatically, so I was researching various things. I found a free app called『Related Blog Posts』.


    Design adjustment is necessary, but related articles will be displayed under the blog article like this.

    Shopify 関連記事 ブログ アプリ


     It's very convenient, but it's a free app, so there's no reason not to use it.👀



    How to install the app and display related articles


    It's an app that I have installed long time ago, so I don't remember much, but I'll write it while remembering as much as possible.

    However, it was actually way easier than I thought. So what do we need to do after installing the app?

    {% include 'relatedblogs' %}

    Just embedded the above code where you wanted to display related articles.

    It was very easy. 

    If I state the specific embedding location(debut theme), it's in templates/article.liquid, right after {% section 'article-template' %} code. It seems to be okay in the debut theme, but if it doesn't work properly, please embed it in various places and test where it is suitable.

    {% section 'article-template' %}
    {% include 'relatedblogs' %}



    Related Blog Posts How to set up the app


    After that, set the number of articles you want to display from the application side of the admin screen Related articles Make settings such as displaying / hiding thumbnails of articles.

    Shopify 関連記事表示 アプリ 設定 


    I will state the items for those who wants to know right away.

    • Related to: (set the logic of related articles)

      This is what to define as a related article. Set Content, Tags and Author if you don't have particular condition.

    • Number of related posts to display: (Number of related posts to display)
    • Display the related posts image: (Whether to display an image of related posts)
    • Selection of image sizes: (The size of the image to display)
    • Source of the excerpt: (What to display in the summary description part of related articles)
    • How to handle no related posts: (If there are no related posts))

      If there is no related article, it's a big deal, so I think it's better to display a random article with Random post.

    • Blogs to display on: (Blogs to display)
    • Show only the same blog type: (Do you pull articles from other blogs?)
    • Exclude by tag: (Show related articles Exclude tags)
    • Exclude by ID: (Hide related articles Exclude ID)
    • Exclude from pool by tag: (Do not display in related articles Exclude tags)
    • Exclude from pool by ID: (ID to be excluded that is not displayed in related articles)


    And it is definitely better to change the title of the related article Related Posts below. Since the default is English, let's change it to "Related Posts" "Related Articles" If the site is based on English, it may be left as it is.


    Shopify Related Posts App タイトル



    For those who want to customize related articles

    For those who want to customize related articles, snippets / relatedblogs.liquid should be automatically added to the theme when the app is installed, so you can customize it quite freely by editing it.

    Shopify snippets related blogs


    I also customize it a little and apply the design with CSS and display it like the related article below this article.


    How to add related articles to your blog using Related Blog Posts


    The above is a summary of how to display related articles on the blog this time.

    Personally, I think it's easier to see related articles under the blog article, and even if you come to the blog, it's sad if someone leave with reading only one article, isn't it? Create a mechanism that allows customers to stay properly if possible. I want customers to enjoy various articles. If you like it, please share it on Social Media

    Have a nice day today!



    Contact form