How to Add a Reading Progress Bar on your Shopify Blogs

Last updated:
June 12, 2023

Knowledge requirements:

  • HTML5
  • CSS
  • JavaScript

Having a reading progress bar is a great way to keep readers on the page because it keeps them from getting bored and lets them know when they are close to finishing it.

Today, I will teach you how to add this feature on your Shopify project’s blog posts without using an app.

Step 1: Find where you want to place the html tag

1. Open your theme file and under ‘Sections,’ look for the article file, for Dawn the name is ‘main-article’.

finding main-article section in the Shopify Liquid theme files

Step 2: Place your html tag, add your CSS codes

1. Now since the position of this element will be ‘fixed,’ and it is not really the most important part of the page, I suggest you place it at the very bottom.

add html tag at the bottom of the article file in the Dawn theme - Shopify

2. Give your main ‘div’ a width of 100% and put it in a fixed position and apply top and left values. Add paddings, colors and other styles that you want to add to make it look something like the sample below.

Important note:

We will remove the width of the progress bar itself later after the JS code has been added so it doesn’t show in full width when the page loads. We only added this at this point for visual purposes.

Step 3: Add your JS code

1. Declare the necessary variables which are your progress bar (the bar itself, not its parent <div>) and the main container of your article page.

2. Write your very short function. I have explained everything in the comments in the code below. It is basically just 2 lines of code.

3. Add your scroll event listener.

You may also view this on CodePen.

4. Don’t forget to remove the 100% width of the progress bar from your CSS so it doesn’t load in full width.

Red Dela Cruz | Shopify and Webflow developer

Red Dela Cruz

An enthusiastic Shopify and Webflow developer just like you!

I’ve learned a lot of things in web development by reading and watching tutorials. So, now, I want to pay it forward. 🤓