Search code examples
sortingshopifyblogs

Shopify - sort blog Posts from oldest to newest - old post first


How to make Shopify sort blog Posts from oldest to newest?

Now the newest post is on top. It does not work for the blog that tells the story. Naturally, you have to read a story from the begging.

Some other blogs have to be sorted in default order - from newest to older. I.e. newest top.

Q: How to make Old first sorting for some blogs?


Solution

  • It depends on the amount of blog posts.

    There are 3 approaches.


    Liquid way

    You can overwrite the article paginate and reverse the loop.

    Example:

    {% paginate blog.articles by 9999 %}
      {% for article in blog.articles reversed  %}
         ...
      {% endfor %}
    {% endpaginate %}
    

    The larger the article amount the slower the DOM load speed will be.

    So if you have 1000+ articles this is not a good solution.

    REST API

    You can register a private app an set only the Store content like articles, blogs, comments, pages, and redirects permission to Read and everything will be disabled.

    Then you will need to request the following URL: https://API_KEY:[email protected]/admin/api/2020-01/blogs/BLOG_ID/articles.json?limit=250 ( multiply times if you have more than 250 articles )

    And reverse the result array.

    If you have many articles this solution is once again not great.

    GraphQL

    The best one is to use the StoreFront GraphQL API here where you can reverse the results.

    Example query:

    {
        blogByHandle(handle:"news"){
        articles(first: 50, reverse: true){
          edges {
            node {
              title
            }
          }
        }
      }
    }
    

    This way you will keep the pagination intact ( since GraphQL return Cursor that you can use for the pagination ) and you will keep the requests at minimum.