It is helpful to estimate how long it should take to read blog articles. The average adult silent reading speed is about 200 to 250 words per minute.
Add Read Time on Blogs With Liquid Code
Some people love reading. Others want to know when it will be over. To satisfy either site visitor, it is helpful to estimate how long it should take to read blog articles. It takes longer to read out loud than silently.
The average adult silent reading speed of is about 200 to 250 words per minute. College students read around 300 words per minute. Sentence complexity and subject matter have a bearing.
Roll Up Your Sleeves
Shopify is an e-commerce platform on which sellers build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid.
Before making modifications to your Shopify theme, it is good to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.
Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.
Now you access the Liquid programming code with Actions: Edit code menu. Themes created within the past few years use Sections and Templates. If you see Sections, then edit the file under this area called article.template.liquid. If not, edit the file under Templates called article.liquid.
At the top, above the opening HTML that says something like <div class="container">, insert the following code:
{%- comment -%} // estimate read time // {%- endcomment -%}
{%- assign article = article.content -%}{%- assign readtime = '' -%}
{%- if article != blank -%}
{%- comment -%} // exclude html markup from word count // {%- endcomment -%}
{%- assign words = article | strip_html | split:' ' -%}
{%- comment -%} // how many words do people read per minute? (200-300) // {%- endcomment -%}
{%- assign readtime = words.size | divided_by: 200 | round | at_least: 1 -%}
{%- capture readtime -%}Estimate {{ readtime }}-minute read{%- endcapture -%}
{%- endif -%}
{%- comment -%} // place this where you want it to appear on the page // {%- endcomment -%}
{{ readtime }}Notations between {% comment %} tags perform no action, but explain the purpose for the code below it. Without the comments, there are only 7 lines of code. Notice that the code counts words after stripping HTML for accuracy. Place the {{ readtime }} element where desired within the layout, formatting it with whatever CSS style is appropriate for size, color, and alignment.
{
"type": "range",
"id": "read_words_min",
"min": 140,
"max": 400,
"step": 10,
"label": "Words readable per minute",
"default": 200
},This feature is currently enabled on ClinicalPosters blog and article pages. Reading time slows down when enunciating audibly. You may change the estimate by using to a JSON schema global setting slider from 140 to 400 in 10-word increments.
{%- assign readtime = words.size | divided_by: settings.read_words_min | round | at_least: 1 -%}For a more personalized read estimate, you can base the words per minute on article tags. If, for example, an article is tagged with programming, you might subtract 30 words per minute from the default. It takes more time to read through code.
