Show a free shipping progress bar

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

The free shipping progress bar displays an indicator that tracks a customer's order amount against your store's free shipping threshold. You specify the threshold in Theme settings > Cart > Free shipping threshold. After the customer's order amount meets or exceeds the specified threshold, the customer's order qualifies for free shipping.

To set up the free shipping bar to display in your store's Cart, refer to Enable the free shipping bar in your store's Cart.

Alternatively, to display a free shipping bar section in the Header area of any page, except Checkout, Gift card, and Password pages, refer to Add a free shipping bar section to a page's Header area.

Note

The free shipping progress feature is a visual aid only. The feature does not affect your store's actual shipping rates. In the Shipping area of your Shopify admin, set your store's shipping rate independently of the feature. Ensure the shipping rates set in your Shopify admin correspond to the values you specify for the free shipping progress feature.

Refer to Shopify help: Shipping rates.

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. In Theme editor, select Theme settings > Cart.

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

3. In the Free shipping threshold field, enter the required threshold amount.

Note

After the order amount in the customer's Cart meets or exceeds the threshold amount, the Cart displays a "You’ve unlocked free shipping!" notification. The notification indicates that the order has met the free shipping threshold configured for the feature.

Add a free shipping bar section to a page's Header area

To display a free shipping bar section in the Header area of a store page, 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 is to use metafields. Refer to Shopify help: Metafields.

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

Create a metafield

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

2. In the Metafield definitions area, select Markets, and then choose Add definition.

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

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

5. Set the metafield Type to List of values, and then choose Single line text.

6. 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 the 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 store's Shopify admin, navigate to Settings > Markets.

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

3. On the Market settings page, expand the Metafields > Free shipping threshold area.

4. In the Free shipping threshold field, enter a threshold value, and then select Save.

   The following image shows an example metafield definition with a free shipping threshold value of 50 United States Dollars for the International market.

   

   To specify a threshold for a particular country within a market, add a new 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 the Eurozone market with multiple countries. The definition includes specific threshold values for each country:

   • 30 sets the market's default threshold value.
   • FR:40 sets the threshold at 40 for France.
   • DE:25 sets the threshold at 25 for Germany.
   • AT:0 sets the threshold to 0 for Austria.

   

Note

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