How to modify the theme code to add the shipping calculator in Shopify

Shipping rates calculator is able to display your shipping rates on your store’s cart page. When a customer signs in, the calculator will employ that customer’s default shipping address to estimate the shipping rate. The shipping rates calculator does work with manual rates, carrier-calculated rates, or even a mix of the two.

However, please keep reading our instructional writing on How to modify the theme code to add the shipping calculator to know more deeply about this topic. Kindly note that this guide is only suitable for sectioned themes.

How to modify the theme code to add the shipping calculator

Information and features of shipping calculator

You are able to insert a shipping rates calculator to the cart page which could let your customers estimate their shipping fees before they move to the checkout page.

Nevertheless, when you set up your shipping calculator, please remember all of these things below:

  • There may be no equivalent API to calculate applicable taxes on the cart page, note that applicable taxes are only shown at the checkout step.
  • The calculator employs an Underscore.js template and does rely on a JSON API. Ajax is employed to fetch rates from Shopify.
  • The already-displayed text will be translated.
  • It could be easier to edit the HTML for the calculator is you already know the basics.
  • Rates are formatted in your shop’s default currency and insist on the currency descriptor like USD or AUD.
  • Under some circumstances, the rates are only approximations because only the country, state/province, and zip/postal code are ready for the calculator, rather than the full address. The exact rates will be shown at checkout.

How to modify the theme code to add the shipping calculator

On Desktop

  • Step 1: Got to Online Store > Themes. Or search for the theme that you need to adjust and go to Actions > Edit code.

  • Step 2: Click vendor.js in the Assests directory. In case your theme does not have a vendor.js file, please choose themee.js instead.

  • Step 3: Paste this code hosted on GitHub to the very bottom of vendor.js. In case you are configuring theme.js instead, please paste the same code snippet at the very top of the file.

  • Step 4: Choose Save.

  • Step 5: Choose themee.js in the Assets directory. Please paste the code given below to the very bottom of the file:


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

  • Step 6: Tap Save.

  • Step 7: Choose Add a new snippet in the Snippets directory.

  • Step 8: Click Create snippet after naming your new snippet shipping-calculator. Your new snippet will open in the code editor.

  • Step 9: Please paste this code hosted on GitHub into your new shipping-calculator.liquid snippet.

  • Step 10: Tap Save.

  • Step 11: Tap cart-template.liquid in the Sections directory. In case your theme soes not have a cart-template.liquid file, then you can click cart.liquid in the Templates directory.

  • Step 12: Search for the closing </form> tag. Paste the code given below right on a new line above the closing </form> tag:


{% include 'shipping-calculator' %}

  • Step 13: Please paste the code given below at the very bottom of the file:

<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>

  • Step 14: Tap Save.

  • Step 15: Click settings_schema.json in the Config directory. The file will open in the code editor.

  • Step 16: Paste the code given below right after the last curly bracket } and before the last square bracket ], near the very bottom of the file. Be certain to include that first comma , since you are editing 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) ."
      }
    ]
  }
  

On iPhone/Android

  • Step 1: Click Store from the Shopify app.

  • Step 2: Click Online Store in the Sales channels section.

  • Step 3: Click Manage themes.

  • Step 4: Search for the theme that you need to adjust and go to Actions > Edit code.

  • Step 5: Click vendor.js in the Assets directory. In case your theme does not have a vendor.js file, please choose themee.js instead.

  • Step 6: Paste this code hosted on GitHub to the very bottom of vendor.js. In case you are configuring theme.js instead, please paste the same code snippet at the very top of the file.

  • Step 7: Choose Save.

  • Step 8: Choose themee.js in the Assets directory. Please paste the code given below to the very bottom of the file:


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

  • Step 9: Tap Save.

  • Step 10: Choose Add a new snippet in the Snippets directory.

  • Step 11: Click Create snippet after naming your new snippet shipping-calculator. Your new snippet will open in the code editor.

  • Step 12: Please paste this code hosted on GitHub into your new shipping-calculator.liquid snippet.

  • Step 12: Tap Save.

  • Step 13: Tap cart-template.liquid in the Sections directory. In case your theme soes not have a cart-template.liquid file, then you can click cart.liquid in the Templates directory.

  • Step 14: Search for the closing </form> tag. Paste the code given below right on a new line above the closing </form> tag:


{% include 'shipping-calculator' %}

  • Step 15: Please paste the code given below at the very bottom of the file:

<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>

  • Step 16: Tap Save.

  • Step 17: Click settings_schema.json in the Config directory. The file will open in the code editor.

  • Step 18: Paste the code given below right after the last curly bracket } and before the last square bracket ], near the very bottom of the file. Be certain to include that first comma , since you are editing 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) ."
      }
    ]
  }
  

Conclusion

Thanks for reading! Please kindly note that the shipping calculator only works on the cart page at www.your-shop-url.com/cart. In case you are not using a cart page, you are able to edit the settings of your cart by visiting the theme editor.