Want a simple, elegant progress bar in your cart drawer that tells customers how far they are from a free-shipping threshold, without installing any app? Great, below I’ll walk you through the exact steps you listed, explain why each step matters, and give a ready-to-drop `code` you can use in the Dawn theme.
What this does (quick overview)
When a customer opens the cart drawer the progress bar shows:
- how much they’ve spent so far,
- how much remains to reach the free-shipping(or other offers) threshold, and
- a visual progress bar that updates when quantities change.
It works entirely in your theme (Liquid) — no apps, no external services.
Prerequisites
- Shopify store using the Dawn theme (or another Online Store 2.0 theme).
- Basic familiarity with the theme code editor (→ Online Store → Themes → Actions → Edit code).
- A free-shipping (or any other discount which have price threshold option) created in the Shopify Admin (optional but recommended for a full flow).
Step-by-step guide
1. Use the Dawn theme for this demo
Dawn has a cart drawer enabled and modern theme structure, so it’s an ideal starting point. You can adapt the same logic to other themes, but selectors and the place to render the snippet may change.
2. Enable the cart Drawer in Theme Editor
Open Customize theme → Theme settings → enable Cart Drawer under Cart so the store uses the drawer rather than a cart page. This ensures your progress bar lives inside the Cart drawer.
3. Open the theme code editor
Go to Online Store → Themes → Actions(3 Dots icon) → Edit code for the Dawn theme you are developing on.
4. Find the Cart Drawer template / snippet
Search for the cart drawer code. In Dawn you’ll typically find a section or snippet named like:
cart-drawer.liquid
For the Dawn theme it’s the same name(file name could be different for other themes) for section and snippet file. Our target is to find the code for Cart Drawer, whatever theme it is!
You want to insert your progress bar inside the drawer markup, near the header (so it’s visible top of the cart drawer).
5. Create the snippet progress-bar.liquid and paste the code
Create a new snippet: Snippets → Add a new snippet → name it progress-bar.liquid
Paste the entire code below into progress-bar.liquid and save.
{%- assign target = settings.offer_price_threshold | default: 300 -%}
{%- assign target_cents = target | times: 100 -%}
{%- assign cart_total_cents = cart.total_price | default: 0 -%}
{%- comment -%} percent calculation (cart.total_price is cents) {% endcomment -%}
{%- assign percent = cart_total_cents | divided_by: target | round -%}
{%- if percent > 100 -%}
{%- assign percent = 100 -%}
{%- endif -%}
{%- assign remaining_cents = target_cents | minus: cart_total_cents -%}
{%- if remaining_cents < 0 -%}
{%- assign remaining_cents = 0 -%}
{%- endif -%}
<div class="wrap{% if cart == empty %} hidden{% endif %}">
<div class="sp-mini-cart-threshold{% if percent >= 100 %} complete{% endif %}">
<div class="sp-progress-bar">
<span style="width: {{ percent }}%;">
<div class="progress-car">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="currentColor">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 0.875C0 0.391751 0.391751 0 0.875 0H13.5625C14.0457 0 14.4375 0.391751 14.4375 0.875V3.0625H17.3125C17.5867 3.0625 17.845 3.19101 18.0104 3.40969L20.8229 7.12844C20.9378 7.2804 21 7.46572 21 7.65625V11.375C21 11.8582 20.6082 12.25 20.125 12.25H17.7881C17.4278 13.2695 16.4554 14 15.3125 14C14.1696 14 13.1972 13.2695 12.8369 12.25H7.72563C7.36527 13.2695 6.39293 14 5.25 14C4.10706 14 3.13473 13.2695 2.77437 12.25H0.875C0.391751 12.25 0 11.8582 0 11.375V0.875ZM2.77437 10.5C3.13473 9.48047 4.10706 8.75 5.25 8.75C6.39293 8.75 7.36527 9.48046 7.72563 10.5H12.6875V1.75H1.75V10.5H2.77437ZM14.4375 8.89937V4.8125H16.8772L19.25 7.94987V10.5H17.7881C17.4278 9.48046 16.4554 8.75 15.3125 8.75C15.0057 8.75 14.7112 8.80264 14.4375 8.89937ZM5.25 10.5C4.76676 10.5 4.375 10.8918 4.375 11.375C4.375 11.8582 4.76676 12.25 5.25 12.25C5.73323 12.25 6.125 11.8582 6.125 11.375C6.125 10.8918 5.73323 10.5 5.25 10.5ZM15.3125 10.5C14.8293 10.5 14.4375 10.8918 14.4375 11.375C14.4375 11.8582 14.8293 12.25 15.3125 12.25C15.7957 12.25 16.1875 11.8582 16.1875 11.375C16.1875 10.8918 15.7957 10.5 15.3125 10.5Z">
</path>
</svg>
</div>
</span>
</div>
<div class="sp-progress-msg">
{% if remaining_cents > 0 %}
Spend <strong class="price fw-6">{{ remaining_cents | money_without_trailing_zeros }}</strong> more to enjoy <span class="fw-6">Free
Shipping</span>
{% else %}
Congratulations! Enjoy the FREE Shipping!
{% endif %}
</div>
</div>
</div>6. Render the snippet inside the cart drawer header
Open your cart drawer snippet cart-drawer.liquid, place the snippet under the drawer header markup so it appears near the top of the drawer:
<div class="drawer__header">
<!-- cart draswer header markup -->
</div>
{% if settings.show_progress_bar %}
{% render 'progress-bar' %}
{% endif %}
<cart-drawer-items>
<!-- cart items markup -->
</cart-drawer-items> “settings.show_progress_bar” settings will setup on settings schema
Add CSS in the same file snippet (cart-drawer.liquid)
<style>
.sp-mini-cart-threshold {
padding: 5px 0 16px;
border-bottom: 1px solid var(--line);
}
.sp-mini-cart-threshold .sp-progress-bar {
margin-top: 14px;
margin-bottom: 10px;
height: 4px;
}
.sp-mini-cart-threshold .sp-progress-msg {
margin-top: 18px;
font-size: 16px;
line-height: 26px;
}
.sp-progress-bar {
height: 4px;
width: 100%;
background-color: #ebebeb;
position: relative;
}
.sp-progress-bar span {
position: absolute;
content: "";
top: 0;
left: 0;
bottom: 0;
background-color: #eb001b;
border-radius: 3px;
}
.sp-progress-bar .progress-car {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 26px;
color: #eb001b;
border: 1px solid #eb001b;
border-radius: 2.5px;
background-color: #FFF;
display: flex;
align-items: center;
justify-content: center;
}
</style>
8. Add a theme setting input price threshold & enable/disable settings (schema)
Now expose a setting in the Theme Editor so the merchant can set the price threshold & control the progress bar.
Open the section file that defines your Cart settings schema, commonly a global settings_schema.json area. Under the JSON schema area of the cart section add a header, checkbox and number input like this:
{
"type": "header",
"content": "Progress Bar"
},
{
"type": "checkbox",
"id": "show_progress_bar",
"label": "Show cart progress bar",
"default": false
},
{
"type": "number",
"id": "offer_price_threshold",
"label": "Offer price threshold",
"default": 100,
"visible_if": "{{ settings.show_progress_bar == true }}"
},Make sure, the json schema is under the cart settings. Because, we like to keep them in one place!
From the theme customization, it’ll look like this-
Also, make sure you enabled the progress bar to show on the drawer.
9. Create a Free Shipping discount in Shopify Admin
Go to Discounts → Create discount and create a free shipping discount that applies when order subtotal >= your chosen threshold. This step is optional for the UI but ensures the discount will actually apply at checkout.
10. Test: add items, change quantities
Open the storefront and add an item to the cart. Open the cart drawer and increase & decrese quantity. You’ll see the progress bar working smoothly.
