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, complete the following steps.

1. Go to Customize theme.

2. In Theme editor, select Theme settings > Cart.

3. In the Cart settings menu, enable the checkbox option to Show free shipping progress.

4. To set the required threshold amount, enter a value into the Free shipping threshold text box.

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, complete the following steps.

1. In Theme editor, select Sections.

2. Below the Header area, select Add section.

3. Select 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

1. In your online store's Shopify admin, navigate to Settings > Custom Data.

2. In the Metafield definitions pane, select Markets.

3. On the Market metafield definitions page, select Add definition.

4. In the Name field, enter Free shipping threshold.

5. In the Namespace and key field, enter switch.free_shipping_threshold.

6. Choose Select type, set the metafield type to Single line text, and then choose List of values.

   [Optional] On the Validations pane, in the Regular expression field, enter ^[A-Z]*\:?[0-9.]+$.

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

   

8. Select Save.

Set a threshold value for each market

To set a threshold value for each market, complete the following steps.

1. In your online store's Shopify admin, navigate to Settings > Markets.

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

3. On the Market settings pane, select Metafields.

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

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

   

   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 (off) for Austria.

   

Note

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