Introduction

Hey there!
In this guide, I’ll walk you through how to use the Progress Tracker Block.

Let’s get started!

Step 1: Add the Progress Tracker Block

First, open your cart drawer, and navigate to the Progress Tracker block.
If it’s not there, simply click the plus (+) icon and choose Progress Tracker to add it to your cart drawer.

You can also drag the Progress Tracker block up or down to adjust its position within the cart drawer — so it appears exactly where you want it.

Step 2: Understand What the Progress Tracker Does

This feature is designed to display promotions like free shipping offers or discount rewards based on your customer’s cart value.

If your progress tracker is promoting a real offer — like free shipping or a discount — make sure that promotion already exists in your Shopify settings.
The progress tracker will display messages based on that promotion’s goal.

Step 3: Choose the Goal Calculation Method

At the top of the General settings, you’ll see an option called Goal calculation method.
Here, you can choose whether the goal should be based on the cart subtotal amount or the total quantity of items added to the cart.

Step 4: Set the Goal Amount

Next, look for the Progress Tracker Goal field.
Let’s set our goal to 75.

Now, as you can see, the progress tracker displays a message — for example:

“Spend 50 dollars more to get free shipping.”

Step 5: Customize the Progress Message

This message is fully customizable in the Progress Message field just below.
You can edit the text and use the [value] variable, which automatically updates to show how much more the customer needs to spend to reach the goal.

Once your customer adds more products and reaches the target amount, save and refresh your page.

Now, with a subtotal of 75 dollars, the bar will display your success message — something like:

“You’ve unlocked FREE shipping!”

Step 6: Add an Icon Image

Under Visual Design, you’ll find an option to add an icon image.
You can upload your own image or paste in SVG icon code to give your progress tracker a more personalized look.

Step 7: Customize the Colors

Under Custom colors, you can also customize the progress tracker and message colors to match your brand’s style.

Step 8: Adjust Spacing

Finally, there’s a setting called Spacing Controls.
This allows you to adjust the top and bottom spacing of the entire block — helping you control how much space the progress tracker takes up on your storefront.

Conclusion

And that’s it!
You’ve now set up and customized your Progress Tracker Block, and connected it with your Shopify promotion.

Thanks for watching — and happy designing!