Estimate Article Read Time For Shopify

ESTIMATE 1-MINUTE READ

Use Liquid Code to Add Read Time on Your Blog

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. The average reading speed of most adults 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

Before making modifications to your Shopify theme, it is good practice to duplicate it. Within Admin, within lefthand navigation, choose Online Store: Themes: Actions: Duplicate.

Now you access the Liquid programming code with Actions: Edit code. Themes created within the past few years use Sections and Templates. If you see Sections, this edits 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 about = article.content -%}{%- assign readtime = '' -%}
{%- if about != blank -%}
{%- comment -%} // exclude html markup from word count // {%- endcomment -%}
{%- assign aboutWords = about | strip_html | split:' ' -%}
{%- comment -%} // how many words do people read per minute? (200-300) // {%- endcomment -%}
{%- capture readtime -%}{{ aboutWords.size | divided_by: 200 | round | at_least: 1 }}{%- endcapture -%}
{%- capture readtime -%}Estimate {{ readtime }}-minute read{%- endcapture -%}
{%- endif -%}
{%- comment -%} // place this where you want it to appear on the page // {%- endcomment -%}
{{ readtime }}

Notes between {% comment %} tags perform no action, but explain the purpose for the code below it. Format the {{ readtime }} element with whatever CSS style is appropriate for size, color, and alignment.

Are you interested in more tips and code snippets like this? Indicate so within the comment field.

References
  1. What Is the Average Reading Speed? irisreading.com
  2. Shopify Cheat Sheet. shopify.com
  3. Main image by pasja1000 from Pixabay

Join Discussion