To add estimated read time for blog post for Dawn theme

Store Design
,
1

Hi good day.

Is it possible to add estimated read time for blog post in dawn theme? Would like to display estimated read time for in the blog lost, in the blog page, and the blog post section at main page.

If possible, it will be nice if the font is the same as author name and published date. Thank you.

B.png
B.png862Ă—688 370 KB

A.png
A.png1476Ă—749 268 KB

2

Hey @tai_attitude

Yes, it is possible to add an estimated read time for blog posts in the Dawn theme on Shopify. Here’s how you can achieve this:

  1. Access your Shopify admin dashboard and go to “Online Store” > “Themes.”
  2. Locate the Dawn theme and click on “Actions” > “Edit code” to open the code editor.
  3. In the code editor, navigate to the “Sections” folder and find the “article-template.liquid” file. This file controls the layout of individual blog posts.
  4. Open the “article-template.liquid” file and find the section where the author name and published date are displayed. This is typically within a
    or element with a class or ID assigned to it.
  5. Add the following code snippet after the author name and published date section to display the estimated read time:
{{ content | strip_html | number_of_words | divided_by:200 | plus:1 }} min read

This code calculates the number of words in the blog post’s content, divides it by 200 (an average reading speed of 200 words per minute), and adds 1 for an estimated read time in minutes.

Save the changes to the “article-template.liquid” file.

Now, the estimated read time will be displayed in the blog post view. To display it on the blog page and the blog post section on the main page, you’ll need to make similar modifications to the corresponding template files. Locate the relevant files (usually named “blog-template.liquid” for the blog page and “index.liquid” for the main page) and add the same code snippet to the appropriate sections.

You can style the estimated read time by targeting the .estimated-read-time class in your theme’s CSS file. You can adjust the font, size, color, and other styling properties to match the author name and published date.

Remember to save your changes and test the website to ensure that the estimated read time is displaying correctly in the desired locations.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

In the Dawn theme, adding an estimated read time for blog posts is not a built-in feature. However, you can achieve this functionality by making some customizations to your theme’s code. Here’s a general approach to add the estimated read time:

  1. Open your Shopify admin and go to “Online Store” → “Themes”.
  2. Find your Dawn theme and click on the “Actions” dropdown, then select “Edit code”.
  3. In the theme editor, navigate to the “Sections” folder and locate the file named “article-template.liquid” or a similar file related to blog posts.
  4. Open the file and find the code that displays the blog post content.
  5. Below that section, add code to calculate and display the estimated read time. Here’s an example:
{% assign words_per_minute = 200 %}
{% assign content_words = article.content | number_of_words %}
{% assign estimated_read_time = content_words | divided_by: words_per_minute %}

<p class="estimated-read-time">Estimated Read Time: {{ estimated_read_time }} minutes</p>
  1. Customize the estimated-read-time class to match the styling you want, such as using the same font as the author name and published date. You can do this by modifying the CSS in your theme’s stylesheet or using inline styles.
  2. Save the changes to the file.

Once you’ve added the code, the estimated read time should be displayed in the blog post sections as specified. Make sure to test it thoroughly to ensure it appears correctly.

Note: The above code assumes an average reading speed of 200 words per minute. You can adjust this value based on your preferences or update the code to use a different approach for calculating the estimated read time.

Remember to backup your theme or use a development theme before making any changes to the code. If you encounter any issues or have further questions, consider reaching out to a Shopify Expert or the Shopify support team for assistance.

4

Hello @tai_attitude ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to sections → article-template.liquid or something name similar to this

Find the code block where the author name and published date are displayed. It might look like this:


{{ article.author }}

{{ article.published_at | date: "%B %d, %Y" }}

Below the published date code block, add the following code to calculate and display the estimated read time:

{% assign words_per_minute = 200 %}  {# Adjust this value as needed #}
{% assign total_words = article.content | number_of_words %}
{% assign read_time_minutes = total_words | divided_by: words_per_minute %}

Estimated Read Time: {{ read_time_minutes }} min

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

1 Like
5

Great. The estimated time does show. However, the time is 0 min. Any idea why?

6

Afternoon. I am having the same issue but on the ride theme. It either shows 0 min or 1 min read (definitely longer), how do I fix this on the ride theme please?

7

Hi mate,

Have you eventually figured out how to fix this? Facing the same issue here. It shows either 0 or 1 for all articles.

Thanks

8

Hey,

we have created an app for this, which helps you add the estimated read time for any Shopify OS2 theme without any coding. At the same time, it allows you to add a reading progress bar to your blog posts as well. It comes with a 7-day trial, if you want to try it out: Estimated Read Time app

You can check out how this looks here: Estimated Reading Time in action

If you have any questions or feedback, let us know.

9

I think this code would work the best for you (assuming you are using a language that splits words with spaces). You can change 200 to a different value if you want to adjust the calculation.

{{ article.content | strip_html | split: ' ' | size | divided_by:200 | plus:1 }} min read
2 Likes
10

This worked thanks!