Free Shipping Bar with Progress Indicator

One of the most popular and effective ways to boost your store’s order values is with a Free Shipping Bar. A persistent note at the top of the page (or bottom, on mobile!) shows your shoppers how close they are to meeting your minimum order size for free shipping. This encourages shoppers to add more products to their order!

Why Use A Free Shipping Banner?

  • It prints money
  • Provides customer reassurance (re:surprise shipping costs)
  • Boosts order value
  • Very high return on time invested

How To Create A Free Shipping Bar with Progress Indicator

Choose Bar Type

  • Text Banner: Use a Text Banner to show a welcome message, link to a specific product or page in your store, or display an important notice. The Text Banner isn’t restricted to only text; it can include any type of HTML you like including emoji, formatting, and images.

  • Discount Banner: Use a Discount Banner to notify shoppers about a discount they are receiving. The Discount Banner automatically applies the discount code to the shopper’s current order - there’s no need for the shopper to copy and paste it at checkout. The discount can also be automatically applied to subscriptions that use the ReCharge checkout.

  • Free Shipping Banner: If your store offers free shipping above a certain order size, this banner can show your shopper’s progress toward free shipping. The Free Shipping Bar keeps track of the order size, and tells the shopper how much they need to add to the cart to receive free shipping.

  • Email Signup Banner: Includes a box for shoppers to enter their email address, and saves the email to your customer list. Edit the message and the signup button to say whatever you like, in any language.

  • Countdown Banner: Next to your fully customizable message, shows a real-time animated countdown to a date that you set.

For our first banner, we’ll be creating a Text Banner. Click on Text Banner.

First Banner Setup

Title Section

At the top of the page, you can give your banner a Title. This is for your own internal use, and is never shown to your shoppers. I’m calling ours “Hello Bar.”

Next is the Banner Content section.

In the field labeled Text, write whatever you’d like your banner to say. For this example, I’m writing “👋 Hello there! Check out our <strong>sale</strong> items!” As you can see, it’s possible to include emoji and HTML formatting in this field. If you don’t know how to format your message in this way, don’t worry! Just send us a message using the support widget and we’ll take care of it for you.

In the field labeled Link URL, you can enter the URL of a page shoppers will go to when they click on the banner. Leave this blank if you’d like the banner not to be clickable. You can link to any web page here, including pages that aren’t part of your store.

Choose whether you’d like your banner to be shown at the top of the page, or at the bottom

Headband is completely customizable using themes. Your newly-installed app comes with four built in themes. You can customize them, or add more! If you need any help with themes, please contact our helpdesk using the in-app chat.

If shoppers are allowed to close the banner, a small X will appear on the right hand side of the banner so that it can be dismissed. If a banner is closed, it will not appear again during the same shopping session.

Page Visibility

Use this section to customize which pages your bar will appear on.

You can choose “Include On All Pages By Default” and the banner will appear on every page of your store except the pages you specify in the “page exclusions” section. For example, maybe you want to show it everywhere except on your “Contact Us” page.

Or, you can choose “Exclude On All Pages By Default” and the banner will only appear on the pages you specify in the “page inclusions” section. Use this option to show a banner only on certain pages of your store.

For this example, we’re going to show the banner on every page.

Customer Account Visibility

Choose whether to show this banner to all customers, only logged in customers, or only logged-out customers.

Enabled will start showing the bar to shoppers as soon as it is saved.

Disabled will keep your bar in Draft mode, without showing it to shoppers.

After you save your banner, you can click on the “Preview this banner” button to see what it will look like in your store. This works even if the banner is in Draft mode.