Free ON WEBFLOW.IO DOMAINS

How to add a free shipping bar

Free shipping upsell encourages customers to increase their cart value by showing how much more they need to spend to unlock free shipping. It dynamically updates based on the cart total and can be fully customized to match your store’s design and messaging. Perfect for boosting average order value with a subtle, conversion-friendly prompt.

Follow the below steps to configure your Cart & PDP Upsell Module.

Go to Shopyflow Webflow App > Store Builder > Add New > Free Shipping Upsell
Click Copy element.
Paste the component inside the cart.
Select the outermost element (Free Shipping Upsell) of the pasted element in the Designer.
Go to the element's settings panel in the Designer and click on the custom attribute.
Update the custom attribute value to match your free shipping target value including the currency code. You can use different currencies by separating them with a comma.
Example: sf-free-shipping-upsell="100USD,90EUR"
Please remember to use the currency codes and not symbols. Refer to this page if needed to find the correct currency code.
In the Navigator find the upsell-success-block element and edit its text.
Change the text inside Remaining Amount Wrapper without deleting the Remaining Amount element inside of it.
Select the Progress Bar Fill element which has the attribute sf-free-shipping-progress="1"
Give it sf-complete combo class and style it in the "You have free shipping" look: For example by setting a green background.
Remove the sf-complete combo class.
Publish your site.

No items found.

Can't find a solution? Join our Discord server to get an instant reply from our experts and the community.