Use case: Increase cart value by showing shoppers how close they are to unlocking free shipping — updated in real-time based on their current cart value.
This advanced guide explains how to build a dynamic “Only $X away from free shipping” progress bar in a popup using the HTML block and Custom CSS.
Requirement: you need to have access to the visitor's cart value. It works with Shopify, Magento or any platform where the cart value is accessible.
What you will build
A clean component that:
✔️ Displays the current cart total
✔️ Shows a progress bar filling dynamically as the cart grows
✔️ Updates the “Remaining to unlock free shipping” amount
✔️ Works with any free shipping threshold you choose.
Step-by-step Instructions
Step 1 — Add an HTML Block to your popup/embed
Add a HTML block
Insert the version of the code below matching your ecommerce platform
Inside the code, replace every of the three instances of placeholder_threshold with your own free-shipping threshold (for example 100):
Note: At this point, you will not yet see the progress bar in the builder. This is normal because the CSS code is still missing (see step 2).
➡ Shopify version
<div class="custom-progress">
<div class="custom-progress-label">
<span>Free shipping progress</span>
<span>${{ cart.total_price | round: 2 }} / $placeholder_threshold</span>
</div>
<div class="custom-progress-background">
<div
data-cart-value="{{ cart.total_price }}"
data-max="placeholder_threshold"
class="custom-progress-value">
</div>
</div>
<div class="custom-progress-remaining">
Add <strong>${{ placeholder_threshold | minus: cart.total_price | round: 2 }}</strong>
more to unlock <strong>free shipping</strong>.
</div>
</div>
➡ Magento version
<div class="custom-progress">
<div class="custom-progress-label">
<span>Free shipping progress</span>
<span>${{ magentoCartValue | round: 2 }} / $placeholder_threshold</span>
</div>
<div class="custom-progress-background">
<div
data-cart-value="{{ magentoCartValue }}"
data-max="placeholder_threshold"
class="custom-progress-value">
</div>
</div>
<div class="custom-progress-remaining">
Add <strong>${{ placeholder_threshold | minus: magentoCartValue | round: 2 }}</strong>
more to unlock <strong>free shipping</strong>.
</div>
</div>
➡ Other platform:
Reuse the Magento version and replace magentoCartValue with your custom cart value property.
Step 2 — Add Custom CSS
In the builder, select the Design tab on the left, then the CSS tab on top.
Insert the CSS code below (same for all platforms):
Note 1: At this point you can see a progress bar. The block will still include some code since no cart value is available in the builder. You will have to test the final experience on your website.
Note 2: You can customize the appearance of the progress bar to match your brand design by tweaking the CSS code below: font size/color, bar progress and background color, height, etc.
.custom-progress {
padding: 12px 14px;
background-color: #f7f7fb;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 13px;
color: #111827;
max-width: 320px;
border-radius: 10px;
}
.custom-progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.custom-progress-background {
width: 100%;
height: 10px;
background-color: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
.custom-progress-value {
height: 100%;
width: calc(attr(data-cart-value number) / attr(data-max number) * 100%);
max-width: 100%;
background: linear-gradient(90deg, #111827, #4B5563);
border-radius: 999px;
transition: width 0.25s ease-out;
}
.custom-progress-remaining {
margin-top: 8px;
}
Step 3 — Test on your website
Go to your website and you should see a popup as below.
We recommend to set targeting conditions for your free shipping popup based on the cart value so that it only displays to visitors who are (1) below the threshold and (2) above $0. See example below for Shopify.
