How To Add An Estimated Reading Time To Your Shopify Blog and Posts
According to recent survey, customers feel confident and will pay more attention to reading more of your blog posts when they know how long it will take to read that article. So how to add an estimated reading time to your Shopify blog and posts? Let’s install and experience the great feature that It’s Reading Time app brings.
This app lets you easily add an estimated reading time to your Shopify blog and posts. The app is plug-and-play, once installed you only need to turn the app on within the settings and it will automatically add the reading time to the beginning of your post’s content. You have the ability to customize the position and color from within the apps settings.
You have to log in to Shopify if you haven’t done so, after that click on “Add app” to install the It’s Reading Time app from Shopify app store. Then you can see the app permission window. Here click on “Install app” button. After that the app will be installed on your store.
After completing the installation, click on Get Started to visit the settings pages below and complete setup. You can refer quick documentation on setting up Read time in Installation Guide. It’s Reading Time app supports two different positions, default and custom position for Blog Page and Article Page.
Blog Page: Determine the settings for Read Time app on the blog home (where visitors browse blogs). Select below where you’d like the read time information to appear. If you want it to appear wherever you want, click on Custom Position and use the code I provide below. Or, if it is simpler, you just want them to appear above or below the excerpt click Default Position.
– Custom Position: Find the code {% for article in blog.articles %} and you can put the code snippet anywhere you want just before the closing endfor tag {% endfor %}.
Copy the following code snippet to your clipboard:
1 | <div class="readtime_blog_container" article-content="{{ article.url }}" article-content-target=".article-content"></div> |
– Default Position: This option is only available for non-customized themes (Debut, Express, Brooklyn, Supply, Venture and Simple). You have to choose Above Excerpt or Below Excerpt. You can customize the read time text color below, after that, click Save to activated this application.
Article Page: Determine the settings for Read Time app on the articles themselves. Select below where you’d like the read time information to appear. You can choose to place the text above or below the featured image. Like Blog Page item, there are 2 positions:
– Custom Position: You can put the code snippet below anywhere you want inside the article-template.liquid
Copy the following code snippet to your clipboard:
1 | <div class="readtime_article_container"></div> |
– Default Position: This option is only available for non-customized themes (Debut, Express, Brooklyn, Supply, Venture and Simple). For the article page, you will be given two options, above and below the featured image. However, if your theme doesn’t have any article featured image, the default position of the read time container is above of your article content.
Additionally, you can customize Font Size, Reading Time Label, Prefix or Suffix, Words Format, Color.
After saving your changes, this app will work in your store. Hope this article is useful to you.
