How to add a read time to a blog post

So you're writing a blog post and you thought it'd be a good idea to put something out there for your readers to know:

How long is it going to take to read this blog post?

Well, you're right. 

And that's why if you look RIGHT above our title of this blog post, you'll see "# MIN READ" (the text in green) for our timer 😜 And now we want to show YOU how to get your own too.

How to Add a Blog Word Count Timer

At first we were going to get the wordcount, then put it into a site/app that tells us how long it will take to read, based off the average "words per minute" (WPM) of 130.

But why add manual work?

The code we made is calculated AUTOMATICALLY 😱 

To put it simply, the code:

  • Counts the word size of the blog post (aka "article.content")
  • Divides the total word size by the average words per minute (wpm) of 130wpm (ensuring it says at least 1 minute)
  • Tells the reader how many minutes it'll take to read the post

If this sounds good to you, keep reading.




Step by Step

  1. In your Shopify store, go to Online store > Themes
  2. Edit Code
  3. Go to your "article" template, then paste where ever you want this code to show:

<!-- start readtime custom code [courtesy of academy.hustlworks.ca] -->

<br>
<font color="#ADD_HEXCODE_HERE_OR_REMOVE_LINE">
{% assign words = article.content | strip_html | split: ' ' %}
{%- capture readtime -%} {{ words.size | divided_by: 130 | round | at_least: 1 }} {% endcapture %}
{%- capture readtime -%} {{ readtime }} MIN READ {%- endcapture -%}
{{ readtime }}
</font>
<br>
<!-- end readtime custom code -->

Homework

What made it possible for us to easily create and implement this code, is that we took the time to learn Shopify's coding language: liquid. 

If you have your own Shopify store already, take a look at Shopify's liquid cheat sheet to learn some new tricks to write your own codes.

If you don't have a Shopify store yet but stumbled on this post, start your Shopify store now.