BSS: Banner & Pop-up
  • About us
  • How to create a Banner?
    • πŸ“’ How to create a Single Announcement Banner?
    • πŸƒ How do you create a Running/Scrolling/Marquee Banner?
    • πŸ”„ How to create a Rotating/Carousel Banner?
    • ⏳ How to create a Countdown Timer Banner?
    • 🚚 How to use the Free shipping banner?
    • πŸ’° How to use the Discount banner?
    • πŸ“© How to use the Email Signup banner?
    • 🌍 How to Create a Multilingual Banner?
  • How to create a Window Popup?
  • How to create a Sale Pop-up?
  • FAQs?
    • How to Design Window Popups for Desktop and Mobile (Best Practices)
    • What’s the difference between Countdown Timer and Schedule Time?
    • How to Upload and Optimize Background Banner Images
    • How to Setup Conditions for a Banner?
    • How to Setup Conditions for a Sales Pop-up?
    • How to use a Custom position for a Banner?
    • How to Translate Banner Content?
      • Manual Translation
      • Automatic Translation with LangShop
    • How to Add Languages to Your Shopify Store?
    • How to provide the store's collaborator code?
    • How to approve our support request?
  • Contact us
Powered by GitBook
On this page
  • What is a Free Shipping Banner?
  • Create a Free Shipping Banner
  • Step 1: Navigate to the Free Shipping Banner
  • Step 2: Configure Banner Settings
  • Step 3: Set Up Banner Content
  • Step 4: Customize Banner Appearance
  • Step 5: Schedule Banner Display
  • Step 6: Set Display Conditions
  • Step 7: Add Translations (Optional)
  • Step 8: Save & Preview

Was this helpful?

  1. How to create a Banner?

🚚 How to use the Free shipping banner?

Previous⏳ How to create a Countdown Timer Banner?NextπŸ’° How to use the Discount banner?

Last updated 24 days ago

Was this helpful?

What is a Free Shipping Banner?

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.

Key Benefits:

βœ” 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.


Create a Free Shipping Banner

Step 1: Navigate to the Free Shipping Banner

  1. Go to Banner > Create Banner in your dashboard.

  2. Select Free Shipping Banner from the list of banner types.


Step 2: Configure Banner Settings

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.


Step 3: Set Up Banner Content

3.1 Define Free Shipping Value

πŸ“Œ 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, please follow this guide:

πŸ“Œ How do I set up free shipping in Shopify?
  1. Go to Shopify Admin > Settings > Shipping and Delivery.

  2. Click Manage on the shipping profile where you want to add free shipping.

  3. Scroll down to Fulfillment Location and click Add Rate.

  4. 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.

  5. Click Done and Save your settings.


βœ” Set Free Shipping Goals by Country

πŸ“Œ 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?

  1. Click Add Free Shipping Goal.

  2. Select the market.

  3. 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.


3.2 Customize Banner Messages

πŸ“Œ 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.


3.3 Add Call to Action (CTA)

βœ” Action Type:

  • Button β†’ A clickable button (e.g., "Shop Now").

  • Link β†’ Redirects users to a specific page.

  • Clickable Banner β†’ Makes the entire banner interactive.


Step 4: Customize Banner Appearance

πŸ“Œ 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.


Step 5: Schedule Banner Display

πŸ“Œ 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).


Step 6: Set Display Conditions

πŸ“Œ 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.


Step 7: Add Translations (Optional)

πŸ“Œ 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.


Step 8: Save & Preview

πŸ“Œ 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.


πŸ”— For more details, you can refer to the .

πŸ“Œ Encourage customers to shop more

πŸ’¬ If you have any related questions, please contact us via Live chat or for further assistance.

Shopify guide
support-sbc-ta@bsscommerce.com
Start state
Progress state
Success state
Rate in Shopify admin
Add Algeria in the app and enter 400
How the currency is converted on storefront