Free Shipping Upsell
Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.
Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.
All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.
In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow
Displays a dynamic message encouraging customers to add more items to their cart to qualify for free shipping. Free Shipping Upsell Bar is a Div Block with the sf-free-shipping-upsell attribute. The attribute value is your free shipping threshold with its currency code, for example 100USD. For multi-currency stores, list one target per currency separated by commas, for example 100USD,90EUR,80GBP. The engine picks the target matching the active currency.
This component calculates the remaining amount needed to reach the threshold and updates in real time as customers add or remove items from their cart.
The calculation uses the cart subtotal: the price of the items after discounts, before taxes and shipping. This matches how Shopify evaluates price based shipping rates. Pre-order (pay later) products count at their full price, not the deposit charged at checkout, so a cart that meets the threshold with pre-order items shows free shipping.
When the threshold is reached, the sf-complete class is added to every element inside the component, which lets you style the "you have free shipping" state.
Webflow app usage
- Click anywhere in the Webflow designer (this component can be placed on any page where Cart Module is present)
- In the Storesynk app; click Add new
- Select Free Shipping Upsell Bar
- Configure the minimum cart value and exclusion settings
- Click Copy component
- Paste Free Shipping Upsell Bar component
Webflow app settings
Min. Cart Value
Set the minimum cart value required to qualify for free shipping. Enter the amount followed by the currency code. Use a comma separator for multi-currency stores (e.g. 100USD,90EUR,50GBP).
Exclude Subscription Products
Toggle to exclude subscription products from the cart value calculation. This adds subscription to the sf-exclude attribute. Only products purchased with a recurring selling plan are excluded; pre-order products are not affected.
Exclude Pre-order Products
Toggle to leave pre-order (pay later) products out of the calculation. This adds preorder to the sf-exclude attribute. Useful when pre-orders ship separately and should not count toward the free shipping threshold. Off by default, so pre-order products count at their full price.
Exclude Gift Cards
Toggle to leave gift cards out of the calculation. This adds giftcard to the sf-exclude attribute.
Subscriptions Always Ship Free
Turn this on if subscription orders always qualify for free shipping in your store. This adds sf-free-shipping-upsell-complete="subscription" to the component. As long as the cart contains a subscription product the bar shows as complete, regardless of the cart subtotal. When the subscription product is removed, the normal threshold applies again.
Inner components
Module contents
Available methods
Free Shipping Progress Bar
Displays a visual progress bar showing how close the customer is to qualifying for free shipping. Free Shipping Progress Bar is a Div Block with the attribute sf-free-shipping-progress.
The engine sets the element's width as a percentage of the cart subtotal (after discounts, before taxes) against the threshold set on the parent Free Shipping Upsell. It updates in real time as the cart changes and receives the sf-complete class once the threshold is reached, so you can give it a "free shipping unlocked" style, for example a green background.
Free Shipping Remaining Amount
Displays the remaining amount needed to qualify for free shipping. Free Shipping Remaining Amount is a Text Block with the attribute sf-free-shipping-remaining.
The engine writes the formatted amount still missing from the threshold into this element, based on the cart subtotal (after discounts, before taxes). It shows zero once the threshold is reached, or as soon as the cart contains a subscription product when the parent component uses sf-free-shipping-upsell-complete="subscription". Wrap it in your own sentence, for example "Add {amount} more for free shipping", and keep this element inside the wrapper.
Component
contents
Free Shipping Progress Bar
Displays a visual progress bar showing how close the customer is to qualifying for free shipping. Free Shipping Progress Bar is a Div Block with the attribute sf-free-shipping-progress.
The engine sets the element's width as a percentage of the cart subtotal (after discounts, before taxes) against the threshold set on the parent Free Shipping Upsell. It updates in real time as the cart changes and receives the sf-complete class once the threshold is reached, so you can give it a "free shipping unlocked" style, for example a green background.
Webflow app usage
Webflow app settings
Free Shipping Remaining Amount
Displays the remaining amount needed to qualify for free shipping. Free Shipping Remaining Amount is a Text Block with the attribute sf-free-shipping-remaining.
The engine writes the formatted amount still missing from the threshold into this element, based on the cart subtotal (after discounts, before taxes). It shows zero once the threshold is reached, or as soon as the cart contains a subscription product when the parent component uses sf-free-shipping-upsell-complete="subscription". Wrap it in your own sentence, for example "Add {amount} more for free shipping", and keep this element inside the wrapper.
Webflow app usage
Webflow app settings
State management
Related Utilities
