How to Estimate the Reading Time of a Post in Shopify

The feature estimated reading time of a post is becoming more popular. Reading time is grounded in the average speed of reading of a grown-up (about 265 words per minute). The total word count of a post will be translated into minutes with an adjustment made for photos. There are a lot of elements that could lay effects on reading time, like the type of font, sizes, the viewer’s age, reading material (on paper or a monitor), the total number of paragraphs, links, images in the content, and so many more.

If you are in need of deploying at GitHub pages, you are not able to use the Jekyll plugins because GitHub will run with the --safe flag. To address the issue, we did create a snippet of pure Liquid.

Related Posts:

However, please keep reading our instructional writing on how to estimate the reading time of a post to find out the solution.

How to estimate the reading time of a post

Step 1: Get the word count

To get started, we need to get the word count:


{% assign words = content | number_of_words %}

Step 2: Configure

In this step, we need to divide the number with something called word per minute (WPM). Referred to Wikipedia’s document, a grown-up can read about 180 words per minute in a PC monitor. It’s easier to do the rest now:

0 mins

The problem is what would happen if there are less than 180 words in the post?

The fact is that even there are more words, 350 words, for example, when it’s divided by 180, the result we get is 1.94 and Liquid will finally round it down to 1. As a consequence, the viewer will see “1 min” that does not seem right. To solve the problem, we need to check whether it has less than 360 words because any number equal or greater than 360 will result in “more than 2 minutes”.

Actually, it is quite simple to get it done:


{% if words < 360 %}
  1 min
{% else %}
  {{ words | divided_by:180 }} mins
{% endif %}

To get it organized, i put it in a read_time.html in the _includes folder:


<span class="reading-time" title="Estimated read time">
  {% assign words = content | number_of_words %}
  {% if words < 360 %}
    1 min
  {% else %}
    {{ words | divided_by:180 }} mins
  {% endif %}
</span>


Then, you just need to include it in the post layout:


{% include read_time.html %}

Conclusion

This is the end of the instruction, hope that we have brought you the key to your success! If you want more helpful information, we have many other posts on catalog that we can check out. Or if you really want to dive in, our Shopify Custom App Development Tutorials are always there for you.

People also searched for:

  • Estimate the Reading Time of a Post Shopify