How to use the Free shipping banner
Last updated
Was this helpful?
Last updated
Was this helpful?
A Free Shipping Banner is a promotional tool that encourages customers to increase their order value to qualify for free shipping. By dynamically updating the required amount, it enhances the shopping experience and boosts conversion rates.
✔ Encourages higher spending by displaying the amount needed for free shipping. ✔ Improves user experience with real-time updates. ✔ Fully customizable design to match your store’s branding.
Go to Banner > Create Banner in your dashboard.
Select Free Shipping Banner from the list of banner types.
Once selected, you will enter the banner editor, which consists of:
Left Sidebar: Contains the main configuration tabs (Content, Style, Schedule, Conditions, and Translation).
Top Bar: Allows renaming, activating/deactivating the banner, and previewing it on PC or Mobile.
📌 What does this setting do? The Free Shipping Value determines the minimum order amount displayed on the banner to inform customers how much they need to spend to qualify for free shipping.
💡 Important Note: The app only displays the free shipping threshold on the banner—it does not control whether customers actually receive free shipping at checkout. Free shipping eligibility is determined by the shipping rules set in your Shopify Admin.
🔹 How to ensure free shipping works correctly? Before setting up the banner, you must first configure free shipping in Shopify Admin > Shipping and Delivery. Once that’s done, enter the same free shipping amount into the Free Shipping Value field in the app.
This ensures: ✅ The banner accurately reflects your store’s free shipping rules. ✅ Customers receive free shipping as expected when they reach the required amount.
💡 What should I enter here?
If your store offers free shipping for orders over $500, enter 500 in this field.
This amount will automatically convert to the customer’s currency based on Shopify’s exchange rate.
If you’re unsure, check your Shopify Admin > Shipping and Delivery settings to confirm the free shipping threshold.
If you haven't set up free shipping in Shopify yet, follow these steps:
Go to Shopify Admin > Settings > Shipping and Delivery.
Click Manage on the shipping profile where you want to add free shipping.
Scroll down to Fulfillment Location and click Add Rate.
Click Add Conditions, select Based on order price, then:
Set Price = 0 (for free shipping).
Enter the Minimum Order Price required to qualify for free shipping.
Click Done and Save your settings.
🔗 For more details, you can refer to the Shopify guide.
📌 What is this? Allows you to set different free shipping thresholds for each country.
💡 When to use? Use this if shipping costs vary by country (e.g., Algeria requires a higher order total than the US).
📌 How to set it up?
Click Add Free Shipping Goal.
Select the market.
Enter the free shipping value for that market.
For example, if you offer free shipping for orders of $400 or more in Algeria, you can set it up by selecting Add Free Shipping Goal > choose Algeria > enter 400 as the free shipping value.
Note: The value you enter will always be in your store’s default currency. On the storefront, it will automatically convert to the customer’s local currency based on Shopify’s exchange rate.
This ensures accurate free shipping requirements based on the customer’s location.
📌 Define what customers see at different stages of their shopping journey
Messages & Examples:
Start Message (When no items are added to the cart):
"Get free shipping on orders over $50!"
Progress Message (When the cart total is below the free shipping goal):
"You’re just $10 away from free shipping!"
Goal Reached Message (When the requirement is met):
"Congratulations! Your order qualifies for free shipping!"
✔ Use Dynamic Variables to personalize messages:
{{free_shipping_goal}} → Displays the required order value.
{{remaining_amount}} → Shows the amount needed to qualify.
{{market}} → Displays the customer’s country.
{{currency_symbol}} → Adjusts the currency format automatically.
✔ Action Type:
Button → A clickable button (e.g., "Shop Now").
Link → Redirects users to a specific page.
Clickable Banner → Makes the entire banner interactive.
📌 Ensure the banner matches your store’s branding
✔ Editable elements include:
Layout & Background
Positioning (Top, Bottom, Custom)
Font & Button Styling
Custom CSS for advanced styling
💡 Tip: Use the preview mode to check how the banner looks on PC & Mobile.
📌 Control when and how long the banner appears
✔ Visibility Time:
Choose Always Active or set a fixed time range.
Example: Display the banner only during Black Friday sales.
✔ Delay & Reappearance:
Delay Before Showing (No delay, 5s, 10s, etc.).
Show Again After Closing (After reload, after days, or never).
📌 Control where and to whom the banner appears
✔ Choose Display Pages:
Show on Home, Product, Cart pages but exclude Collection page.
✔ Target Specific Customers:
Use Shopify Customer Tags to target VIP customers.
✔ Country Settings:
Show different banners based on user’s location.
📌 Support multiple languages for international customers
Add translations for different store languages (e.g., English, Spanish, French).
Customers will see the banner in their selected language.
📌 Ensure everything is set up correctly before going live
✔ Final Checks:
Save the banner to apply changes.
Preview on Storefront (PC & Mobile) to check the layout.
Verify Shopify Settings to avoid mismatches in free shipping rules.
💬 If you have any related questions, please contact us via Live chat or support-sbc-ta@bsscommerce.com for further assistance.
📌 Encourage customers to shop more
