Add a shipping rates calculator to your cart page

A shipping rates calculator on your cart page helps customers to estimate their shipping costs before completing checkout. Some themes include a shipping rates calculator, but you can add one to any theme using the Edit HTML/CSS page.

Main features

A shipping rates calculator automatically fetches shipping rates on the cart page of your store. If a customer is logged in, the calculator uses the customer's default shipping address to estimate shipping rates. The shipping rates calculator works with carrier-calculated rates, manual rates, or a combination of the two.

  • In some situations, the rates are approximations because only the country, province/state, and zip code are provided for the calculation rather than the full address. Exact rates are given at checkout.
  • The displayed text is easily translatable.
  • Rates are formatted in your shop currency with the currency descriptor, e.g. USD.
  • The HTML of the calculator is easy to edit if you know the basics. The solution uses an Underscore.js template.
  • This solution relies on a JSON API. It uses Ajax to fetch rates from Shopify.
  • There is no equivalent API to calculate applicable taxes on the cart page. Applicable taxes are added at checkout.

Theme compatibility

Caution

The shipping calculator will only function on the Cart page at /cart. It will not work in a cart drawer or cart popup. If you wish to install a shipping calculator, you will need to disable any cart drawer or popup in your theme.

Your theme must use JQuery 1.7. Older themes might have JQuery 1.4 installed. This causes a bug where the calculator does not return a shipping rate.

Brooklyn, Classic, Pop, Solo, or Supply

To disable cart drawers or popups in the Brooklyn, Classic, Pop, Solo, or Supply themes, visit your Customize theme page, click the Cart page section, and set the Cart type to Page.

Disable ajax

Lookbook

The Lookbook theme does not support adding a shipping rates calculator.

Install the shipping rates calculator

There are five main steps to install a shipping rates calculator in your theme:

  1. Upload the file jquery.cart.min.js to your theme assets
  2. Add to your Customize theme page
  3. Create a shipping-calculator snippet
  4. Include your snippet in cart.liquid
  5. Configure your shipping rates calculator

Upload jquery.cart.min.js to your theme assets

  1. Open this JavaScript code snippet.

  2. Select and copy all of the text.

  3. In a new browser tab, open your Shopify admin.

  4. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  5. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  6. Under the Assets folder, click Add a new asset.

  7. In the dialog that opens, click the Create a blank file tab and type in jquery.cart.min as the name and select .js as the extension for the new file. Then click Add asset.

    Add new asset x1
  8. Paste the contents you copied in part b. then click Save.

Add to your Customize theme page

  1. On the Edit HTML/CSS page, locate and click Config.

  2. Under the Config folder, locate and click the settings_schema.json file. This will open the file in the online text editor.

    Settings html
  3. Scroll down to the very bottom of your settings_schema.json file and add this code before the last square bracket ] and after the last curly bracket } - make sure to include that first comma , since you're modifying a JSON data structure:

    ,
      {
        "name": "Shipping Rates Calculator",
        "settings": [
          {
            "type": "select",
            "id": "shipping_calculator",
            "label": "Show the shipping calculator?",
            "options": [
              {
                "value": "Disabled",
                "label": "No"
              },
              {
                "value": "Enabled",
                "label": "Yes"
              }
            ],
            "default": "Enabled"
          },
          {
            "type": "text",
            "id": "shipping_calculator_heading",
            "label": "Heading text",
            "default": "Get shipping estimates"
          },
          {
            "type": "text",
            "id": "shipping_calculator_default_country",
            "label": "Default country selection",
            "default": "United States"
          },
          {
            "type": "paragraph",
            "content": "If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the  spelling to use here, refer to the first checkout page."
          },
          {
            "type": "text",
            "id": "shipping_calculator_submit_button_label",
            "label": "Submit button label",
            "default": "Calculate shipping"
          },
          {
            "type": "text",
            "id": "shipping_calculator_submit_button_label_disabled",
            "label": "Submit button label when calculating",
            "default": "Calculating..."
          },
          {
            "type": "paragraph",
            "content": "Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping  calculator to appear. You can get the snippet here: [shipping-calculator.liquid](https:\/\/github.com\/carolineschnapp\/shipping-calculator\/blob\/master\/shipping-calculator.liquid) ."
          }
        ]
      }
    
  4. Click Save.

Create a shipping-calculator snippet

  1. Open this Liquid code snippet.

  2. Select and copy all of the text.

  3. In a new tab, open up your shop admin.

  4. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  5. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  6. Click the Snippets folder.

  7. Under the Snippets folder, click Add a new snippet.

    Add shipping calculator snippet
  8. Give your snippet the name shipping-calculator and click Create snippet.

  9. In the online code editor, paste the content from your clipboard.

  10. Click Save.

Include the snippet in cart.liquid

Include your snippet where you want to show your shipping rates calculator. In this example, we want it right below the cart form on the cart page.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under the Templates folder, locate and click the cart.liquid file to open it in the online code editor.

  4. Look for the </form> tag and add the following code below it:

    
    {% include 'shipping-calculator' %}
    
    
  5. Save your changes.

Configure your shipping rates calculator

You can now configure your shipping rates calculator using your Customize theme page:

  1. Go to the Customize theme page.

  2. Configure your shipping rates calculator in the Shipping Rates Calculator section:

    Shipping calc x1

    You can configure these items:

    • Show the shipping calculator? - set this to Yes to display the shipping rates calculator on your cart page, or No to hide it.
    • Heading text - set the text that will be displayed above your shipping rates calculator
    • Default country selection - set which country will be selected by default
    • Submit button label - set the text that will be shown on the submit button.

Edit the HTML or CSS of the calculator

Edit HTML

You can edit the HTML code for your shipping calculator to make further customizations:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click the Snippets folder.

  4. Locate and click your shipping-calculator.liquid snippet to open it in the online code editor.

You can move the file content around as you please, and you can also add your own classes.

Note

Do not edit the id attributes or the class name "get-rates" on the submit button.

Edit CSS

If you don't like the look of your shipping rates calculator, try adding the contents of this CSS file to your theme stylesheet. Edit the CSS to your taste.

Shipping rates calculator demo

This demo shop has a shipping rates calculator on the cart page.

Want to discuss this page?

Visit the Shopify Community