Blog

The shipping rates calculator displays your shipping rates on the cart page of your store. If a customer is logged in, then 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.

Keep the following points in mind when setting up your shipping calculator:

• In some situations, the rates are approximations because only the country, province/state, and postal/zip code are provided for the calculation, rather than the full address. The exact rates are given at checkout.
• Rates are formatted in your shop’s currency and include the currency descriptor, such as INR or GBP.
• There is no equivalent API to calculate applicable taxes on the cart page. Applicable taxes are added at checkout.
• Shipping calculators currently do not function in Shopify Plus stores that sell in multiple currencies.
• It will not work in a cart drawer or a cart popup. Only working on cart page.

Edit your theme code to add the shipping calculator

• From your Shopify admin, go to Online Store > Themes.
• Find the theme you want to edit, and then click Actions > Edit code.
• In the Assets directory, click vendor.js. If your theme doesn’t have a vendor.js file, then click theme.js instead.
• To the very bottom of vendor.js, paste this code hosted on GitHub. If you are editing theme.js instead, then paste the same code snippet at the very top of the file.
• Click Save.
• In the Assets directory, click theme.js. To the very bottom of the file, paste the following code:

Shopify.Cart.ShippingCalculator.show( {
  submitButton: theme.strings.shippingCalcSubmitButton,
  submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
  customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
  moneyFormat: theme.strings.shippingCalcMoneyFormat
} );

• Click Save.
• In the Snippets directory, click Add a new snippet.
• Name your new snippet shipping-calculator, and click Create snippet:

• Into your new shipping-calculator.liquid snippet, paste this code hosted on GitHub.
• Click Save.
• In the Sections directory, click cart-template.liquid. If your theme doesn’t have a cart-template.liquid file, then, in the Templates directory, click cart.liquid.
• Find the closing </form> tag. On a new line right above the closing </form> tag, paste the following code:

{% render 'shipping-calculator' %}

• At the very bottom of the file, paste the following code

<script>
  theme.strings = {
      shippingCalcSubmitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }},
      shippingCalcSubmitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }},
      {% if customer %}shippingCalcCustomerIsLoggedIn: true,{% endif %}
      shippingCalcMoneyFormat: {{ shop.money_with_currency_format | json }}
  }
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
<script src="/services/javascripts/countries.js"></script>
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>

• Click Save.
• In the Config directory, click settings_schema.json. The file will open in the code editor.
• Near the very bottom of the file, paste the following 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) ."
      }
    ]
  }

Configuring your shipping rates calculator

• Go to the theme editor.
• Under Theme settings, click Shipping Rates Calculator to view and edit the calculator settings.
• You can configure the following settings: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 – enter the text that will be displayed above your shipping rates calculator
  • Default country selection – choose which country will be selected by default
  • Submit button label – enter the text that will be shown on the submit button.