All themes - Theme settings - Display a free shipping bar

With Safe As Milk themes you have the ability to display a free shipping bar in your store. A free shipping bar is designed to encourage shoppers to add more items to their cart and reach an enticing free shipping threshold. It's a proven strategy to help increase the AOV (Average Order Value) of your store.

The bar can be displayed in the following areas:

  • In the cart drawer and on the cart page
  • On the product page

It is also possible to set up individual minimum purchase amount per market - which we will outline towards the end of this article.

Important: You must add a price-based condition to your free shipping rate in Shipping & Delivery in the admin in order for your customers to get the free shipping you have promised using the shipping bar. Please read the Shopify help article for more on this.

Add a shipping bar to the cart drawer and cart page

  1. Head to the Online store > Themes section of your store admin
  2. Click the Customize button next to the theme you wish to edit
  3. Once the theme editor is open click on Theme settings (cog icon) in the top left of the editor
  4. Click on the Free shipping bar accordion/section in the left hand menu
  5. Here you can set up your free shipping minimum spend (matching the free shipping rate you have set up in the admin)
  6. You can also choose an icon, text alignment, an animation on target completion and the color of your shipping bar (solid or gradient)
  7. In order to display the shipping bar in both the cart drawer and cart page click on the Cart area of the theme settings and check the Enable free shipping bar checkbox

Add a shipping bar to the product page

  1. Head to the Online store > Themes section of your store admin
  2. Click the Customize button next to the theme you wish to edit
  3. Once the theme editor is open navigate to any product page
  4. From here you can add a Free shipping bar block - which has some unique settings of its own independent of the main settings.

Note: The confetti animation does not fire on the product page - only in the cart drawer and on the cart page.


Set individual minimum purchase amounts per market (advanced)

It is also possible to set up individual minimum purchase amount per market.

Set up the metafield:

  1. Click the Settings cog icon in the bottom left of the admin screen
  2. Click Custom data in the sidebar menu
  3. Click Markets from the selection of metafield types
  4. Click the Add definition button, top right of screen
  5. In the 'Name' field type ‘Free shipping rates’ - or whatever suits you
  6. In the 'Namespace and key' field - type shipping.free_shipping - use these words exactly in this format
  7. Click on the + Select type button and choose Integer
  8. Make sure you give your newly-created metafield access to storefronts by checking the Storefronts check box in the Options area

Connect it to your markets:

  1. Click the Settings cog icon in the bottom left of the admin screen
  2. Click Markets in the sidebar menu
  3. Click into the market you wish to edit
  4. Look for the metafield you have created and click into that
  5. Enter the target spend figure for that market i.e if it is UK then 600
  6. Save your work and test it's working as expected

Important: You must add a price-based condition to your free shipping rate in Shipping & Delivery in the admin in for EVERY market you have set up the free shipping metafield for. Please read the Shopify help article for more on this.

Important: On Venue versions 12.0 and above, if you set the metafield value to -1, the free shipping bar will not show for that market.

Still need help? Contact Us Contact Us