Codofaz Shipping Bar, start to finish

1. Install the app

Open Codofaz Shipping Bar on the Shopify App Store and install it on your store. You will be asked to approve one permission: reading your themes, which the app uses to check that your theme can host the bar. It never edits your theme.

2. Switch it on in your theme

The bar is a theme app embed, so your theme has to let it in. In your Shopify admin go to Online Store, then Customise, then Theme settings, then App embeds. Turn on Free shipping bar and save.

If you ever uninstall and install the app again, switch the embed off and on once more. The saved reference points at the old installation and will not render until you do.

3. Set the goal

Back in the app, create your first bar and type the order total that earns free shipping. Two settings sit next to it:

• Automatic currency. Turn this on if you sell in more than one currency. The amounts shown then follow the currency your shopper is browsing in.
• Measure before or after discounts. After discounts is the usual choice — it matches what the shopper will actually pay. Choose before discounts if a code should not help someone reach free shipping.

4. Write the three messages

A bar says three different things as a cart fills up:

• Before anything is in the cart. For example, “Free shipping for orders over {{goal_amount}}”.
• On the way there. For example, “Only {{remaining_amount}} away from free shipping”.
• Once they qualify. For example, “Congratulations! You've got free shipping.”

Anywhere you write {{goal_amount}} or {{remaining_amount}}, the real number is filled in, formatted the way your store formats money. Everything else is your words.

5. Choose a design

Ten designs come with the app, and every one of them is checked for readable contrast. Pick the one closest to your store and stop there, or open the colours and change the background, the text, the link colour, the progress track and the progress fill. You can also set the text size and weight, add a background image, or turn the progress bar off and keep only the message.

The preview updates as you type. If a colour pairing would be hard for somebody to read, the editor says so before you publish.

6. Decide where it appears

• Top pins the bar to the top of the window.
• Bottom pins it to the foot of the window.
• Manual lets you place it exactly where you want in the theme editor, using the app block.

You can also limit the bar to certain pages: show it everywhere, only on pages whose address matches something you type, only on pages containing a keyword, or everywhere except a list of pages.

7. Decide who sees it

Each bar carries its own audience rules:

• Customers. Everyone, first-time shoppers, returning customers, customers with a tag you name, or customers who have spent over an amount.
• Countries. Include the countries you ship free to, or exclude the ones you do not.
• Devices. Everyone, desktop only, or mobile only.

These rules are worked out in the shopper's own browser. Nothing about a shopper is sent to us or stored anywhere.

8. Timing and scheduling

• Fade in after a number of seconds on the page.
• Hide after a while, so the bar does not follow forever.
• Bring it back after a gap you choose.
• Let shoppers close it, and remember that they did for as many hours as you like.
• Run between two dates, for a sale or a holiday. Outside those dates the bar simply does not appear.

9. Publish and check

Set the bar's status to Active and publish. Your settings are saved into your store, and the storefront picks them up on the next page load.

Open your store in a new tab and add something to the cart. The message should change as the total climbs, and switch to your celebration message once the goal is met. If nothing appears, check the bar is Active, the app embed is on, and that your own visit is not excluded by a country, device or customer rule.

10. Changing or removing a bar

Edit a bar whenever you like and publish again; the storefront follows within moments. Setting a bar back to Draft takes it off your store but keeps your work.

To remove the bar completely, switch the app embed off in your theme, or uninstall the app. Nothing is left behind in your theme files either way.

Still stuck? Support covers the problems people hit most often, and a message to us gets a reply from the people who wrote the app.