The announcement bar on every page

An announcement bar is a strip at the top of the storefront. Free Shipping Bar Pro’s embed is a theme app extension, so you turn it on in the theme editor. Shopify’s page for adding an app to a theme is apps in themes. The same idea, for badges, is in Shopify Apps and Theme Embeds.

In the app, click Enable announcement bar. The theme editor opens on the published theme. Turn the embed on under App embeds, set the vertical padding if you want, and save. The embed is moved to the top of the page. It does not run on the password page or the gift card page.

The header block on Online Store 2.0

Click Add block to header when you want the bar inside the header group. Add the Free shipping bar block, drag it, set padding, and save. Padding runs from 4 to 32 pixels, in steps of 2, and starts at 12. This block needs an Online Store 2.0 theme. Vintage themes cannot add app blocks.

To edit a draft theme, open that theme in the editor first. The buttons in the app open the published theme.

Turn on one placement

Enable the embed or the header block. With both on, shoppers can see two bars, so the app shows one. Pick the announcement bar when the goal should be visible on the homepage, the product page, and the cart. Pick the header block when the bar should live in the header and nowhere else.

After it is on, check the homepage, a product, and the cart on a phone. A long sentence wraps. Trim the three messages until the strip stays one line if that is what you want. Message rules are in Shopify Free Shipping Progress Bar.

How to turn the bar off

For the embed, open the theme editor, go to App embeds, turn the bar off, and save. For the header block, remove the block from the header. Uninstalling the app removes its blocks and deletes the automatic free shipping discount it created.

The bar still needs a threshold. Set that before you judge the layout. The number and the discount are in How to Set a Shopify Free Shipping Threshold. Install from the Shopify App Store listing.

Frequently asked questions

One strip, saved in the theme editor

Click Enable announcement bar in Free Shipping Bar Pro, turn the embed on, and look at the homepage on a phone.