Free shipping is a powerful incentive for online shoppers. By dynamically promoting exactly how much a visitor needs to spend to unlock free shipping, you can gamify the shopping experience, increase your average order value (AOV), and boost overall revenue.
Prerequisites
You have a specific free shipping threshold (e.g., $100).
You can pass cart data to Wisepops as a custom property (Shopify users automatically pass this data via the Wisepops integration).
Step 1: Send Cart Data to Wisepops
Shopify Users: You do not need to do any manual setup. Our Shopify app automatically tracks the cart value as a property called cart.total_price.
If you are not using our Shopify app, you need to define a custom property in your website's source code just after your Wisepops setup script.
wisepops('properties', {
cart: {
total_price: REPLACE_WITH_CART_PRICE
},
}, {temporary: true});Replace REPLACE_WITH_CART_PRICE with the actual price of the cart.
Step 2: Creating a Cart Value Booster
You can display your cart booster as a dynamic text message and a sleek visual progress bar.
Simple Dynamic Text
Create a new campaign and drag a Text block into your popup.
Copy and paste the snippet below into your block
Replace X with your actual threshold.
{{ X | minus: cart.total_price | round: 2 }}
For example:
You are only ${{ 100 | minus: cart.total_price | round: 2 }} away from Free Shipping!
Visual Progress Bar
Drag an HTML block into your popup.
Paste the code below into the HTML block.
Replace X with your actual threshold.
<progress class="wisepops-progress"
max="X"
value="{{ cart.total_price }}">
</progress>
You can customize the style of the progress bar thanks to our CSS customization feature. For example:
.wisepops-progress {
appearance: none;
-webkit-appearance: none;
background-color: #f0f0f0;
width: 100%;
height: 12px;
margin-top: 12px;
border: 0;
border-radius: 10px;
}
.wisepops-progress::-webkit-progress-bar {
background-color: #f0f0f0;
border-radius: 10px;
}
.wisepops-progress::-webkit-progress-value {
background-color: #000000;
border-radius: 10px;
}
.wisepops-progress::-moz-progress-bar {
background-color: #000000;
}
Step 3: Set Display Rules
You only want this booster to show when the customer has not reached the free shipping threshold.
Go to Display rules in the left menu.
Select Advanced and click on Custom properties (or Shopify properties).
Add a rule based on the cart total price:
cart.total_price is less than X
Replace X with your free shipping threshold.
Tips for Success
Experiment with Formats: You can use this tactic with a standard popup, a sticky top bar, or a notification feed.
Create a Success Message: Set up a separate notification or popup that triggers when the condition is met (e.g.
cart.total_price is greater than or equal to X). A quick "Congratulations! You've unlocked Free Shipping! 🚚" confirms the reward and improves the checkout experience.Match Your Brand: Adjust the messaging, typography, and progress bar colors to seamlessly fit your website's design.
Need Help?
Don't hesitate to contact our support team if you have any questions or need assistance in setting up your cart value booster.