You are currently viewing How to create a shipping calculator in Shopify?

How to create a shipping calculator in Shopify?

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: {
  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
  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 src="//"></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:\/\/\/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.

Leave a Reply