Show a free shipping progress bar

This guide describes how to display a free shipping progress bar.

You can set the free shipping bar to display in your store's cart, or as a section in the header area.

In the previous image, the free shipping bar is displayed in a store's cart. The following image shows the free shipping bar in the header area, at the top of a store's home page.

Enable the free shipping bar in your store's cart

To display the free shipping bar in your store's cart:

1. In the Theme editor, select Theme settings > Cart.

2. In the Cart settings menu, enable the Show free shipping progress option.

3. To set the required threshold amount, enter a value into the Free shipping threshold field.

Note

After the order amount in the customer's cart is equal to or more than the threshold amount, the cart displays a completed progress bar to indicate that free shipping is applied to the customer's order.

Add a free shipping bar section to your store's header

To display a free shipping bar section in your store's header area:

1. In the Theme editor, select Sections.

2. In the Header area, select Add section > Free shipping bar.

Note

To learn how to configure the free shipping bar section, refer to Free shipping bar.

Free shipping threshold across markets

You can set a single free shipping threshold for your entire store. However, if you use Shopify markets, you might need to set a different threshold for each market. The easiest way to set a specific threshold for each market uses metafields. Refer to Shopify help: Metafields.

After you set up a suitable metafield, you can easily adjust shipping thresholds per market. To set up a metafield for free shipping thresholds, refer to Create a metafield.

Create a metafield

To create a metafield for free shipping thresholds:

1. In your Shopify admin, navigate to Settings > Metafields and metaobjects.

2. In the Metafield definitions area, select Markets.

3. On the Market metafield definitions page, select Add definition, and then add the following information:

   • In the Name field, enter a name for the metafield. For example, enter Free shipping threshold.
   • Below the Name field, select the auto-filled custom.free_shipping_threshold element. In the Namespace and key field, enter switch.free_shipping_threshold instead of custom.free_shipping_threshold.
   • Set the Type option to List of values, then select Single line text from the Select type list.
   • Optional: Select Add description, and then enter text in the Description field to describe the metafield. For example, enter Metafield for free shipping threshold.
   • Optional: In the Validation area, in the Regular expression field, enter ^[A-Z]*:?[0-9.]+$.

4. Confirm that your metafield definition is similar to the definition in the following image.

   

5. Select Save.

Set a threshold value for each market

To set a threshold value for each market:

1. In your Shopify admin, navigate to Settings > Markets.

2. On the Markets page, select a market to customize.

3. On the Market settings page, locate the Metafields area. If necessary, select the plus icon + beside the Free shipping threshold field to add the metafield to the current market.

4. In the Free shipping threshold field, enter a threshold value.

   For example, the following image shows a threshold value of 50 in the Free shipping threshold field.

   

   To specify a threshold for a particular country within a market, select Add item. Enter the country's 2-letter ISO code, followed by a colon, and then enter a number to represent the threshold value. For example, FR:40 sets the threshold value at 40 for France.

   The following image shows an example metafield definition for a market with multiple countries. The definition includes a specific threshold value for each of the following countries.

   • 50 = Market default threshold set to 50.
   • FR:40 = Threshold set to 40 for France.
   • DE:25 = Threshold set to 25 for Germany.
   • AT:0 = Threshold set to 0 for Austria.

   

Note

To turn off displaying the free shipping progress bar for a particular market or country, set the threshold value at 0.