Free Shipping Progress Bar: Setup and Copy

A free shipping progress bar is a promise drawn as a line: you are this far from free shipping. It works only while the line and the checkout agree. A bar that says "you have unlocked free shipping" over a cart that then pays 7 dollars for delivery does more damage than no bar at all, because the shopper just watched you break a promise on screen. Most of the work in getting a free shipping progress bar right is not design. It is deciding what the bar counts, matching that to your shipping rule, and writing the four messages it will show. This page does those three things and then covers placement and setup.

If you have not yet built the shipping rule itself, start with Free Shipping Over $50 on Shopify: Setup, which covers the two native ways to do it. Here the rule is assumed to exist.

Step one: make the bar count what the rule counts

The bar and the shipping discount must use the same subtotal. Shopify's Help Center says, for a free shipping discount, that the minimum purchase amount counts product prices only and never includes taxes or other costs. It also says all products in a customer's cart count toward the minimum, including any gift cards the customer buys, and that products are counted at their discounted price when another discount has lowered the price and that discount can be combined with free shipping. A discount that cannot be combined with free shipping never applies at the same time, so it does not change the amount.

Turn that into a checklist for the bar:

• Taxes and shipping are out. Use the product subtotal only.
• Gift cards are in, if you sell them and you use the free shipping discount. Decide whether you want that. If not, your bar and your rule are about to disagree.
• Discounted or full price: if a code lowers the subtotal, the answer depends on the combination setting of that code. Pick a rule, then make the bar follow it. The full explanation of that setting sits in the setup page linked above.

Write the rule once, in plain words, next to the bar: "Counted before tax and shipping, after discounts." Then test it with a cart just above the line, a discount code and a gift card.

Step two: know where a bar can render

Shopify's developer documentation describes two block types for theme app extensions, and a progress bar app uses one or both. App blocks inject inline content on a page and are placed by the merchant inside compatible theme sections, so a bar in your cart page section is an app block if your theme's cart section accepts app blocks. Whether a cart drawer accepts one depends on the theme, so check it in the theme editor. App embed blocks render at the page level, outside the sections; the documentation says Shopify injects them before the closing head and body tags, and that they are deactivated by default after an app is installed. Merchants turn them on in the theme editor under theme settings, then app embeds.

What that means for you:

• A bar inside the cart is an app block you place in the cart section. Open the theme editor on the cart page and look for it under Apps.
• A bar shown on every page is closer to the embed model. After installing, check that it is switched on in app embeds, since it starts off.
• If the bar is missing after install, the first thing to check is whether the embed is activated and whether the block was added to the cart section on the version of the theme you are editing.

The documentation does not describe what happens to either block type on uninstall, so do not promise a clean removal until you have tested it on a duplicate theme.

Step three: write the four states

The bar has four moments, and most stores write only two. Take a 75 dollar threshold. The copy below is an example to adapt, with each state tied to a number:

The fourth state is the one that causes support tickets. A shopper adds items to reach the line, then enters a code, and the subtotal drops back under it. If your rule counts discounted prices, the bar must say so and show the new gap in dollars. If your rule counts full prices, the bar stays unlocked, and the copy for the code can say "Discount applied, free shipping still included". Either answer is fine. A bar that stays silent is not.

Two copy habits help every state:

• Show the gap in dollars, not a percentage. "22.60 dollars away" is a number a shopper can act on.
• Name the reward once. The FTC's guide on the word "free" (16 CFR 251.1) says the terms, conditions and obligations of a free offer should be set forth clearly and conspicuously at the outset and in close conjunction with the offer, and that an asterisk footnote is not regarded as disclosure at the outset. A minimum spend is a condition. Put it in the first line of the bar, not behind a link. This is not legal advice.

Excluded items and zones, said out loud

If heavy items, preorders or specific regions are excluded from free shipping, the bar has to know. Shopify's free shipping discount lets you pick countries and has an option to exclude shipping rates over a certain amount, and the page says that option applies to shipping rates only and is unrelated to order amounts. In practice a shopper in an excluded zone can reach the line and still pay for shipping. The honest copy is: "Free shipping to the contiguous U.S. over 75 dollars". If the bar cannot be limited to a zone, hide it for those carts or use plain text in the banner instead. The cost of the zones you exclude belongs in the threshold itself, and Free Shipping Threshold: The Formula shows how to price it.

Mobile placement

On a phone, a bar that sits above the product images pushes the product down. Two placements work. In the cart drawer, put the bar directly under the item list and above the checkout button, since that is where the shopper decides to add one more item. On the product page, use a single line under the add-to-cart button on mobile so the button stays in the first screen. Keep the text to one line: the partway message above is 44 characters.

For a state where sales tax follows the delivery address, see selling into Washington. Its offer plan explains why a bar tied to product prices behaves the same for every shopper, while a bar tied to the total with tax moves with the delivery address.

Adding the bar

Freebies Engine by Log Studio Lab has a Progress bar template, described as "Show how close the cart is to a reward." Set the reward and the amount from your shipping rule, paste in the four messages above, and check the Discount message copy in Discount Messages Shoppers See at Checkout so the bar and the checkout use the same words. Then test: an empty cart, a cart at 52.40, a cart just over the line, and a cart that falls under the line after a code. If the four states match what checkout does, publish. Plan requirements are on the pricing page.