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 subtotal 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 Storesynk 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. - Optionally exclude products from the calculation with the sf-exclude attribute on the same element. Use subscription for subscription products, preorder for pre-order (pay later) products and giftcard for gift cards. Combine them with commas, for example sf-exclude="subscription,giftcard". Pre-order products count at their full price by default, so customers reach the threshold even when only a deposit is charged at checkout.
- If subscription orders always ship free in your store, add sf-free-shipping-upsell-complete="subscription" to the same element. The bar shows as complete whenever the cart contains a subscription product.
- 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.
- While Remaining Amount Wrapper is stillselected, give it sf-complete combo class and hide it. Remove the combo class.
- 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.
The bar is only a display. Make sure the matching free shipping rules exist in your Shopify shipping settings, otherwise customers see free shipping in the cart but not at checkout.
No items found.
No items found.
No items found.
Next:
