Cart - Add a shipping rates calculator to your cart

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

You can add a shipping rates calculator to your cart page that lets customers estimate their shipping costs before they proceed to the checkout page.

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes link and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes link and follow the instructions.

• Sectioned themes
• Non-sectioned themes

[TyW]

Sectioned themes 

Shipping calculator information and features

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 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.
• The displayed text can be translated.
• Rates are formatted in your shop's currency and include the currency descriptor, such as CAD or USD.
• The HTML for the calculator is easy to edit if you know the basics.
• The calculator uses an Underscore.js template and 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.
• Shipping calculators currently do not function in Shopify Plus stores that sell in multiple currencies.

Note: The shipping calculator only works on the cart page at www.your-shop-url.com/cart. It will not work in a cart drawer or a cart popup. If you are not currently using a cart page, then you can change your cart settings by visiting the theme editor.

Editing your theme code to add the shipping calculator

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click vendor.js. If your theme doesn't have a vendor.js file, then click theme.js instead.
4. 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.
5. Click Save.
6. 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
   } );

7. Click Save.
8. In the Snippets directory, click Add a new snippet.
9. Name your new snippet shipping-calculator, and click Create snippet:
   
   
   
   Your new snippet will open in the code editor.
10. Into your new shipping-calculator.liquid snippet, paste this code hosted on GitHub.
11. Click Save.
12. 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.
13. Find the closing </form> tag. On a new line right above the closing </form> tag, paste the following code:
    
    

    {% render 'shipping-calculator' %}

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

15. Click Save.
16. In the Config directory, click settings_schema.json. The file will open in the code editor.
17. 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

You can now edit the settings for your shipping rates calculator from the theme editor.

1. Go to the theme editor.
2. 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.

Editing the HTML or CSS of the calculator

Editing the shipping calculator HTML

You can edit the HTML code for your shipping rates calculator to make more advanced customizations.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Snippets directory, click shipping-calculator.liquid.
4. Edit the code as needed. You can add new classes and move the existing HTML elements around in the file to suit your needs.
   
   Note: Do not edit the HTML ID attributes or the class name "get-rates" on the shipping calculator submit button, as this will interfere with functionality.
   
   
5. Click Save.

Editing the shipping calculator CSS

If you want to change the appearance of your shipping rates calculator, then you can add some CSS to your theme stylesheet.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click theme.scss.liquid.
4. At the very bottom of the file, add either the contents of this CSS file, or your own custom CSS code.
5. Click Save.

Troubleshooting

Depending on your theme and currency settings, you might see your shipping calculator price estimates displayed on the cart page with un-rendered HTML tags:

To remove these unwanted tags, you will need to make a change to your currency settings in the admin.

1. From your Shopify admin, go to Settings > General.
2. In the Store currency section, your shop currency is listed. Click Change formatting.
3. Remove the HTML tags from your currency formats. By default, the settings look like this:
   
   
   From both the HTML with currency and the HTML without currency text fields, remove the opening and closing HTML span tags. The result should look like this:
   
   
4. Click Save.

Your shipping calculator price estimates should now display without un-rendered HTML tags:

Demo store

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

[TyW]

Non-sectioned themes 

Shipping calculator information and features

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 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.
• The displayed text can be translated.
• Rates are formatted in your shop's currency and include the currency descriptor, such as CAD or USD.
• The HTML for the calculator is easy to edit if you know the basics.
• The calculator uses an Underscore.js template and 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.
  
  

Note: The shipping calculator only works on the cart page at www.your-shop-url.com/cart. It will not work in a cart drawer or a cart popup. If you are not currently using a cart page, then you can change your cart settings by visiting the theme editor.

Installing the shipping rates calculator

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

1. Uploading the file jquery.cart.min.js to your theme assets
2. Adding settings to the theme editor
3. Creating a shipping-calculator snippet
4. Including your snippet in cart.liquid
5. Configuring your shipping rates calculator

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

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click Add a new asset.
4. Click the Create a blank file tab, and enter jquery.cart.min as the name and select .js as the file extension. Click Add asset.
   
   
   
   Your new blank asset will open in the code editor.
5. Into your new jquery.cart.min asset, paste this JavaScript code snippet.
6. Click Save.

Adding settings to the theme editor

1. In the Config directory, click settings_schema.json. The file will open in the code editor.
2. 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) ." } ] }

3. Click Save.

Creating a shipping-calculator snippet

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Snippets directory, click Add a new snippet.
4. Enter shipping-calculator as the name for your new snippet, then click Create snippet:
   
   
5. Your new blank snippet will open in the code editor.
6. Into your new shipping-calculator snippet, paste this Liquid code snippet.
7. Click Save.

Including the snippet in cart.liquid

Include your snippet in your cart.liquid file in the place where you want to show your shipping rates calculator. In this example, the calculator is right below the cart form on the cart page.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Templates directory, click cart.liquid.
4. Find the closing </form> tag. On a new line below the tag, paste the following code:
   
   

   {% render 'shipping-calculator' %}

5. Click Save.

Configuring your shipping rates calculator

You can now edit the settings for your shipping rates calculator from the theme editor.

1. Go to the theme editor.
2. Under Theme settings, click Shipping Rates Calculator to view and edit the calculator settings.
3. 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.

Editing the HTML or CSS of the calculator

Editing the shipping calculator HTML

You can edit the HTML code for your shipping rates calculator to make more advanced customizations.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Snippets directory, click shipping-calculator.liquid.
4. Edit the code as needed. You can add new classes and move the existing HTML elements around in the file to suit your needs.
   
   Note: Do not edit the HTML ID attributes or the class name "get-rates" on the shipping calculator submit button, as this will interfere with functionality.
   
   
5. Click Save.

Editing the shipping calculator CSS

If you want to change the appearance of your shipping rates calculator, then you can add some CSS to your theme stylesheet.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click theme.scss.liquid.
4. At the very bottom of the file, add either the contents of this CSS file, or your own custom CSS code.
5. Click Save.

Troubleshooting

Updating older themes to use a supported version of jQuery

If you are having trouble getting the shipping calculator to work, then check to confirm that your theme is using a jQuery version of 1.7 or newer. If your theme is running a version of jQuery that is older than 1.7, then you can edit your theme code to use a supported version instead.

1. In the Layout directory, click theme.liquid.
2. Within the <head> element, find a script tag that references your theme's jQuery source. The src attribute for the script tag contains a URL that includes /jquery/, followed by the version number. The tag looks something like this:
   
   

   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

   In the script tag above, the jQuery version being used is 1.4.2. This is an older version of jQuery that will need to be updated for the customization to work. If your theme is using a version that is older than 1.7, replace the version number in the URL with 1.7. The result should look like this:
   
   

   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

3. Click Save.

Demo store

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

[jrltrend]

Hello! I have fixed the shipping calculater, but there is no country selection and i cant try the calculating....how do i get this sorted? Best regards, JRL

[Admin2021]

I've  trying to add the Shipping Calculator to the 'Supply' theme  (stock version 9.2 - no customisation other than the Cart 'Page' option chosen rather than 'modal')

On pressing the button it displays "Rates start at $1.00." and in chrome dev/tools I see I have the following error:

cart:1208 Uncaught ReferenceError: theme is not defined
at cart:1208

<script>
theme.strings = {
shippingCalcSubmitButton: "Calculate shipping",
shippingCalcSubmitButtonDisabled: "Calculating...",

shippingCalcMoneyFormat: "\u003cspan class=money\u003e\u003cspan class=money\u003e\u0026pound;{{amount}} GBP\u003c\/span\u003e\u003c\/span\u003e"
}
</script>

I see other posts that have been successful with 'Supply' theme - so I guess I made a mistake somewhere.

And other posts with the same problem as I'm having - but no solution posted.

Guidance needed please

[Admin2021]

ref above post..

That is the only error on the cart page,  but just noticed on the home page I get the following errors:

vendor.js?v=2190683173320769027:70 Uncaught TypeError: Shopify.CountryProvinceSelector is not a constructor
at _init (vendor.js?v=2190683173320769027:70)
at HTMLDocument.<anonymous> (vendor.js?v=2190683173320769027:70)
at i (jquery-2.2.3.min.js?v=5821186314690718683:2)
at Object.fireWith [as resolveWith] (jquery-2.2.3.min.js?v=5821186314690718683:2)
at Function.ready (jquery-2.2.3.min.js?v=5821186314690718683:2)
at HTMLDocument.J (jquery-2.2.3.min.js?v=5821186314690718683:2)
_init @ vendor.js?v=2190683173320769027:70
(anonymous) @ vendor.js?v=2190683173320769027:70
i @ jquery-2.2.3.min.js?v=5821186314690718683:2
fireWith @ jquery-2.2.3.min.js?v=5821186314690718683:2
ready @ jquery-2.2.3.min.js?v=5821186314690718683:2
J @ jquery-2.2.3.min.js?v=5821186314690718683:2

And just a reminder that this is the latest version of Supply unaltered.

[digga]

It would be really nice if this worked for Cart type/drawer. 

Has anyone achieved this?

[JoabeLedran]

Refiz o processo duas vezes e não consegui faze-la funcionar, não entendo porque, quando clico no botão de calcular, ela não faz nada, nem mesmo mostra que está "calculando", estou usando o tema DEBUT, tentarei criar outro tema para fazer novamente para ver se foi algo que fiz errado, mas segui o passo a passo corretamente.

[kabobmaster]

Hi Ty,

I have been able to add the calculator to my cart but it doesn't do anything when the Calculate Shipping button is clicked. Any way you can help me figure out what is going on?

Thanks!

[Voltage_Matt]

I just set this up for a client and followed the guide, he is on an older theme without the vendor.js and the button did not work either (javascript not firing correctly).

What I did to solve it. Instead of adding both of those javscript snippets/code into the top & bottom of the theme.js (or vendor.js) I added them to the very bottom of my theme.liquid right before the closing </body> tag. 

Here is what I added:

{% if template contains 'cart' %}
<script>
/**
 * Module to add a shipping rates calculator to cart page.
 *
 * Copyright (c) 2011-2016 Caroline Schnapp (11heavens.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Modified by David Little, 2016
 */

"object"==typeof Countries&&(Countries.updateProvinceLabel=function(e,t){if("string"==typeof e&&Countries[e]&&Countries[e].provinces){if("object"!=typeof t&&(t=document.getElementById("address_province_label"),null===t))return;t.innerHTML=Countries[e].label;var r=jQuery(t).parent();r.find("select");r.find(".custom-style-select-box-inner").html(Countries[e].provinces[0])}}),"undefined"==typeof Shopify.Cart&&(Shopify.Cart={}),Shopify.Cart.ShippingCalculator=function(){var _config={submitButton:"Calculate shipping",submitButtonDisabled:"Calculating...",templateId:"shipping-calculator-response-template",wrapperId:"wrapper-response",customerIsLoggedIn:!1,moneyFormat:"${{amount}}"},_render=function(e){var t=jQuery("#"+_config.templateId),r=jQuery("#"+_config.wrapperId);if(t.length&&r.length){var templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var n=Handlebars.compile(jQuery.trim(t.text())),a=n(e);if(jQuery(a).appendTo(r),"undefined"!=typeof Currency&&"function"==typeof Currency.convertAll){var i="";jQuery("[name=currencies]").size()?i=jQuery("[name=currencies]").val():jQuery("#currencies span.selected").size()&&(i=jQuery("#currencies span.selected").attr("data-currency")),""!==i&&Currency.convertAll(shopCurrency,i,"#wrapper-response span.money, #estimated-shipping span.money")}}},_enableButtons=function(){jQuery(".get-rates").removeAttr("disabled").removeClass("disabled").val(_config.submitButton)},_disableButtons=function(){jQuery(".get-rates").val(_config.submitButtonDisabled).attr("disabled","disabled").addClass("disabled")},_getCartShippingRatesForDestination=function(e){var t={type:"POST",url:"/cart/prepare_shipping_rates",data:jQuery.param({shipping_address:e}),success:_pollForCartShippingRatesForDestination(e),error:_onError};jQuery.ajax(t)},_pollForCartShippingRatesForDestination=function(e){var t=function(){jQuery.ajax("/cart/async_shipping_rates",{dataType:"json",success:function(r,n,a){200===a.status?_onCartShippingRatesUpdate(r.shipping_rates,e):setTimeout(t,500)},error:_onError})};return t},_fullMessagesFromErrors=function(e){var t=[];return jQuery.each(e,function(e,r){jQuery.each(r,function(r,n){t.push(e+" "+n)})}),t},_onError=function(XMLHttpRequest,textStatus){jQuery("#estimated-shipping").hide(),jQuery("#estimated-shipping em").empty(),_enableButtons();var feedback="",data=eval("("+XMLHttpRequest.responseText+")");feedback=data.message?data.message+"("+data.status+"): "+data.description:"Error : "+_fullMessagesFromErrors(data).join("; ")+".","Error : country is not supported."===feedback&&(feedback="We do not ship to this destination."),_render({rates:[],errorFeedback:feedback,success:!1}),jQuery("#"+_config.wrapperId).show()},_onCartShippingRatesUpdate=function(e,t){_enableButtons();var r="";if(t.zip&&(r+=t.zip+", "),t.province&&(r+=t.province+", "),r+=t.country,e.length){"0.00"==e[0].price?jQuery("#estimated-shipping em").html("FREE"):jQuery("#estimated-shipping em").html(_formatRate(e[0].price));for(var n=0;n<e.length;n++)e[n].price=_formatRate(e[n].price)}_render({rates:e,address:r,success:!0}),jQuery("#"+_config.wrapperId+", #estimated-shipping").fadeIn()},_formatRate=function(e){function t(e,t){return"undefined"==typeof e?t:e}function r(e,r,n,a){if(r=t(r,2),n=t(n,","),a=t(a,"."),isNaN(e)||null==e)return 0;e=(e/100).toFixed(r);var i=e.split("."),o=i[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1"+n),s=i[1]?a+i[1]:"";return o+s}if("function"==typeof Shopify.formatMoney)return Shopify.formatMoney(e,_config.moneyFormat);"string"==typeof e&&(e=e.replace(".",""));var n="",a=/\{\{\s*(\w+)\s*\}\}/,i=_config.moneyFormat;switch(i.match(a)[1]){case"amount":n=r(e,2);break;case"amount_no_decimals":n=r(e,0);break;case"amount_with_comma_separator":n=r(e,2,".",",");break;case"amount_no_decimals_with_comma_separator":n=r(e,0,".",",")}return i.replace(a,n)};return _init=function(){new Shopify.CountryProvinceSelector("address_country","address_province",{hideElement:"address_province_container"});var e=jQuery("#address_country"),t=jQuery("#address_province_label").get(0);"undefined"!=typeof Countries&&(Countries.updateProvinceLabel(e.val(),t),e.change(function(){Countries.updateProvinceLabel(e.val(),t)})),jQuery(".get-rates").click(function(){_disableButtons(),jQuery("#"+_config.wrapperId).empty().hide();var e={};e.zip=jQuery("#address_zip").val()||"",e.country=jQuery("#address_country").val()||"",e.province=jQuery("#address_province").val()||"",_getCartShippingRatesForDestination(e)}),_config.customerIsLoggedIn&&jQuery(".get-rates:eq(0)").trigger("click")},{show:function(e){e=e||{},jQuery.extend(_config,e),jQuery(function(){_init()})},getConfig:function(){return _config},formatRate:function(e){return _formatRate(e)}}}();

// Shipping Calculator continued
Shopify.Cart.ShippingCalculator.show( {
  submitButton: theme.strings.shippingCalcSubmitButton,
  submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
  customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
  moneyFormat: theme.strings.shippingCalcMoneyFormat
} );
</script>
{% endif %}

Make sure you remove the code from the vendor.js or the theme.js.

[Andy_Storey1]

Hi all.

Has anybody had any luck on getting the shipping rates calculator to work with Shopify's Multi-Currency feature?

(I know it says it doesn't work)

We get 1-2 emails per week saying the rates are wrong.    It is because the shipping rates calculator puts the current currency symbol next to rates[i].price, but does not carry out any conversion.

<ul id="shipping-rates">
<% for (var i=0; i<rates.length; i++) { %>
<li><%= rates[i].name %> {{ 'cart.shipping_calculator.at' | t }} <%= rates[i].price %></li>
<% } %>
</ul>

Thanks

Andy

[Andy_Storey1]

In the short-term, I opted to use regex to remove the user currency settings and just output using the store's currency - in my case GBP.

<li><%= rates[i].name %> {{ 'cart.shipping_calculator.at' | t }} &pound;<%= regex.exec(rates[i].price) %> GBP</li>

Would still like to do it properly though!

[Soren_Jacobi]

I can't make this work with multi-currency. Shipping cost is always returned in the shops native current, not in the user's currency. Has anyone found a solution to this?

[GoodFy_Brasil]

---

@Voltage_Matt wrote:

I just set this up for a client and followed the guide, he is on an older theme without the vendor.js and the button did not work either (javascript not firing correctly).

What I did to solve it. Instead of adding both of those javscript snippets/code into the top & bottom of the theme.js (or vendor.js) I added them to the very bottom of my theme.liquid right before the closing </body> tag. 

Here is what I added:

{% if template contains 'cart' %}
<script>
/**
 * Module to add a shipping rates calculator to cart page.
 *
 * Copyright (c) 2011-2016 Caroline Schnapp (11heavens.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Modified by David Little, 2016
 */

"object"==typeof Countries&&(Countries.updateProvinceLabel=function(e,t){if("string"==typeof e&&Countries[e]&&Countries[e].provinces){if("object"!=typeof t&&(t=document.getElementById("address_province_label"),null===t))return;t.innerHTML=Countries[e].label;var r=jQuery(t).parent();r.find("select");r.find(".custom-style-select-box-inner").html(Countries[e].provinces[0])}}),"undefined"==typeof Shopify.Cart&&(Shopify.Cart={}),Shopify.Cart.ShippingCalculator=function(){var _config={submitButton:"Calculate shipping",submitButtonDisabled:"Calculating...",templateId:"shipping-calculator-response-template",wrapperId:"wrapper-response",customerIsLoggedIn:!1,moneyFormat:"${{amount}}"},_render=function(e){var t=jQuery("#"+_config.templateId),r=jQuery("#"+_config.wrapperId);if(t.length&&r.length){var templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var n=Handlebars.compile(jQuery.trim(t.text())),a=n(e);if(jQuery(a).appendTo(r),"undefined"!=typeof Currency&&"function"==typeof Currency.convertAll){var i="";jQuery("[name=currencies]").size()?i=jQuery("[name=currencies]").val():jQuery("#currencies span.selected").size()&&(i=jQuery("#currencies span.selected").attr("data-currency")),""!==i&&Currency.convertAll(shopCurrency,i,"#wrapper-response span.money, #estimated-shipping span.money")}}},_enableButtons=function(){jQuery(".get-rates").removeAttr("disabled").removeClass("disabled").val(_config.submitButton)},_disableButtons=function(){jQuery(".get-rates").val(_config.submitButtonDisabled).attr("disabled","disabled").addClass("disabled")},_getCartShippingRatesForDestination=function(e){var t={type:"POST",url:"/cart/prepare_shipping_rates",data:jQuery.param({shipping_address:e}),success:_pollForCartShippingRatesForDestination(e),error:_onError};jQuery.ajax(t)},_pollForCartShippingRatesForDestination=function(e){var t=function(){jQuery.ajax("/cart/async_shipping_rates",{dataType:"json",success:function(r,n,a){200===a.status?_onCartShippingRatesUpdate(r.shipping_rates,e):setTimeout(t,500)},error:_onError})};return t},_fullMessagesFromErrors=function(e){var t=[];return jQuery.each(e,function(e,r){jQuery.each(r,function(r,n){t.push(e+" "+n)})}),t},_onError=function(XMLHttpRequest,textStatus){jQuery("#estimated-shipping").hide(),jQuery("#estimated-shipping em").empty(),_enableButtons();var feedback="",data=eval("("+XMLHttpRequest.responseText+")");feedback=data.message?data.message+"("+data.status+"): "+data.description:"Error : "+_fullMessagesFromErrors(data).join("; ")+".","Error : country is not supported."===feedback&&(feedback="We do not ship to this destination."),_render({rates:[],errorFeedback:feedback,success:!1}),jQuery("#"+_config.wrapperId).show()},_onCartShippingRatesUpdate=function(e,t){_enableButtons();var r="";if(t.zip&&(r+=t.zip+", "),t.province&&(r+=t.province+", "),r+=t.country,e.length){"0.00"==e[0].price?jQuery("#estimated-shipping em").html("FREE"):jQuery("#estimated-shipping em").html(_formatRate(e[0].price));for(var n=0;n<e.length;n++)e[n].price=_formatRate(e[n].price)}_render({rates:e,address:r,success:!0}),jQuery("#"+_config.wrapperId+", #estimated-shipping").fadeIn()},_formatRate=function(e){function t(e,t){return"undefined"==typeof e?t:e}function r(e,r,n,a){if(r=t(r,2),n=t(n,","),a=t(a,"."),isNaN(e)||null==e)return 0;e=(e/100).toFixed(r);var i=e.split("."),o=i[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1"+n),s=i[1]?a+i[1]:"";return o+s}if("function"==typeof Shopify.formatMoney)return Shopify.formatMoney(e,_config.moneyFormat);"string"==typeof e&&(e=e.replace(".",""));var n="",a=/\{\{\s*(\w+)\s*\}\}/,i=_config.moneyFormat;switch(i.match(a)[1]){case"amount":n=r(e,2);break;case"amount_no_decimals":n=r(e,0);break;case"amount_with_comma_separator":n=r(e,2,".",",");break;case"amount_no_decimals_with_comma_separator":n=r(e,0,".",",")}return i.replace(a,n)};return _init=function(){new Shopify.CountryProvinceSelector("address_country","address_province",{hideElement:"address_province_container"});var e=jQuery("#address_country"),t=jQuery("#address_province_label").get(0);"undefined"!=typeof Countries&&(Countries.updateProvinceLabel(e.val(),t),e.change(function(){Countries.updateProvinceLabel(e.val(),t)})),jQuery(".get-rates").click(function(){_disableButtons(),jQuery("#"+_config.wrapperId).empty().hide();var e={};e.zip=jQuery("#address_zip").val()||"",e.country=jQuery("#address_country").val()||"",e.province=jQuery("#address_province").val()||"",_getCartShippingRatesForDestination(e)}),_config.customerIsLoggedIn&&jQuery(".get-rates:eq(0)").trigger("click")},{show:function(e){e=e||{},jQuery.extend(_config,e),jQuery(function(){_init()})},getConfig:function(){return _config},formatRate:function(e){return _formatRate(e)}}}();

// Shipping Calculator continued
Shopify.Cart.ShippingCalculator.show( {
  submitButton: theme.strings.shippingCalcSubmitButton,
  submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
  customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
  moneyFormat: theme.strings.shippingCalcMoneyFormat
} );
</script>
{% endif %}

Make sure you remove the code from the vendor.js or the theme.js.

---

I will try this as using vendor.js and theme.js I face the same problem ...

the calculator is rendered but button did not display anything... 

Lets see

[GoodFy_Brasil]

---

@GoodFy_Brasil wrote:

---

@Voltage_Matt wrote:

I just set this up for a client and followed the guide, he is on an older theme without the vendor.js and the button did not work either (javascript not firing correctly).

What I did to solve it. Instead of adding both of those javscript snippets/code into the top & bottom of the theme.js (or vendor.js) I added them to the very bottom of my theme.liquid right before the closing </body> tag. 

Here is what I added:

{% if template contains 'cart' %}
<script>
/**
 * Module to add a shipping rates calculator to cart page.
 *
 * Copyright (c) 2011-2016 Caroline Schnapp (11heavens.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Modified by David Little, 2016
 */

"object"==typeof Countries&&(Countries.updateProvinceLabel=function(e,t){if("string"==typeof e&&Countries[e]&&Countries[e].provinces){if("object"!=typeof t&&(t=document.getElementById("address_province_label"),null===t))return;t.innerHTML=Countries[e].label;var r=jQuery(t).parent();r.find("select");r.find(".custom-style-select-box-inner").html(Countries[e].provinces[0])}}),"undefined"==typeof Shopify.Cart&&(Shopify.Cart={}),Shopify.Cart.ShippingCalculator=function(){var _config={submitButton:"Calculate shipping",submitButtonDisabled:"Calculating...",templateId:"shipping-calculator-response-template",wrapperId:"wrapper-response",customerIsLoggedIn:!1,moneyFormat:"${{amount}}"},_render=function(e){var t=jQuery("#"+_config.templateId),r=jQuery("#"+_config.wrapperId);if(t.length&&r.length){var templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var n=Handlebars.compile(jQuery.trim(t.text())),a=n(e);if(jQuery(a).appendTo(r),"undefined"!=typeof Currency&&"function"==typeof Currency.convertAll){var i="";jQuery("[name=currencies]").size()?i=jQuery("[name=currencies]").val():jQuery("#currencies span.selected").size()&&(i=jQuery("#currencies span.selected").attr("data-currency")),""!==i&&Currency.convertAll(shopCurrency,i,"#wrapper-response span.money, #estimated-shipping span.money")}}},_enableButtons=function(){jQuery(".get-rates").removeAttr("disabled").removeClass("disabled").val(_config.submitButton)},_disableButtons=function(){jQuery(".get-rates").val(_config.submitButtonDisabled).attr("disabled","disabled").addClass("disabled")},_getCartShippingRatesForDestination=function(e){var t={type:"POST",url:"/cart/prepare_shipping_rates",data:jQuery.param({shipping_address:e}),success:_pollForCartShippingRatesForDestination(e),error:_onError};jQuery.ajax(t)},_pollForCartShippingRatesForDestination=function(e){var t=function(){jQuery.ajax("/cart/async_shipping_rates",{dataType:"json",success:function(r,n,a){200===a.status?_onCartShippingRatesUpdate(r.shipping_rates,e):setTimeout(t,500)},error:_onError})};return t},_fullMessagesFromErrors=function(e){var t=[];return jQuery.each(e,function(e,r){jQuery.each(r,function(r,n){t.push(e+" "+n)})}),t},_onError=function(XMLHttpRequest,textStatus){jQuery("#estimated-shipping").hide(),jQuery("#estimated-shipping em").empty(),_enableButtons();var feedback="",data=eval("("+XMLHttpRequest.responseText+")");feedback=data.message?data.message+"("+data.status+"): "+data.description:"Error : "+_fullMessagesFromErrors(data).join("; ")+".","Error : country is not supported."===feedback&&(feedback="We do not ship to this destination."),_render({rates:[],errorFeedback:feedback,success:!1}),jQuery("#"+_config.wrapperId).show()},_onCartShippingRatesUpdate=function(e,t){_enableButtons();var r="";if(t.zip&&(r+=t.zip+", "),t.province&&(r+=t.province+", "),r+=t.country,e.length){"0.00"==e[0].price?jQuery("#estimated-shipping em").html("FREE"):jQuery("#estimated-shipping em").html(_formatRate(e[0].price));for(var n=0;n<e.length;n++)e[n].price=_formatRate(e[n].price)}_render({rates:e,address:r,success:!0}),jQuery("#"+_config.wrapperId+", #estimated-shipping").fadeIn()},_formatRate=function(e){function t(e,t){return"undefined"==typeof e?t:e}function r(e,r,n,a){if(r=t(r,2),n=t(n,","),a=t(a,"."),isNaN(e)||null==e)return 0;e=(e/100).toFixed(r);var i=e.split("."),o=i[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1"+n),s=i[1]?a+i[1]:"";return o+s}if("function"==typeof Shopify.formatMoney)return Shopify.formatMoney(e,_config.moneyFormat);"string"==typeof e&&(e=e.replace(".",""));var n="",a=/\{\{\s*(\w+)\s*\}\}/,i=_config.moneyFormat;switch(i.match(a)[1]){case"amount":n=r(e,2);break;case"amount_no_decimals":n=r(e,0);break;case"amount_with_comma_separator":n=r(e,2,".",",");break;case"amount_no_decimals_with_comma_separator":n=r(e,0,".",",")}return i.replace(a,n)};return _init=function(){new Shopify.CountryProvinceSelector("address_country","address_province",{hideElement:"address_province_container"});var e=jQuery("#address_country"),t=jQuery("#address_province_label").get(0);"undefined"!=typeof Countries&&(Countries.updateProvinceLabel(e.val(),t),e.change(function(){Countries.updateProvinceLabel(e.val(),t)})),jQuery(".get-rates").click(function(){_disableButtons(),jQuery("#"+_config.wrapperId).empty().hide();var e={};e.zip=jQuery("#address_zip").val()||"",e.country=jQuery("#address_country").val()||"",e.province=jQuery("#address_province").val()||"",_getCartShippingRatesForDestination(e)}),_config.customerIsLoggedIn&&jQuery(".get-rates:eq(0)").trigger("click")},{show:function(e){e=e||{},jQuery.extend(_config,e),jQuery(function(){_init()})},getConfig:function(){return _config},formatRate:function(e){return _formatRate(e)}}}();

// Shipping Calculator continued
Shopify.Cart.ShippingCalculator.show( {
  submitButton: theme.strings.shippingCalcSubmitButton,
  submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
  customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
  moneyFormat: theme.strings.shippingCalcMoneyFormat
} );
</script>
{% endif %}

Make sure you remove the code from the vendor.js or the theme.js.

---

I will try this as using vendor.js and theme.js I face the same problem ...

the calculator is rendered but button did not display anything... 

Lets see

---

Not working for a NON Shopify Theme ... still need to check why ... as for FREE SHOPIFY THEME has worked 

[mak143]

Hi There,

Do you know where to modify the code so that it picks up the suburb as well? I am using BESPOKE SHIPPING to calculate live rates and as the live rates also depend on the suburb, the shipping calculator does not calculate the live rates. 

[Martin_S]

Hi,
I´m using Narrative theme and the calculater appears, looks pretty good but does not calculate anything. It seems that it doesn do anything, not even an error message. Does anybody know, what the problem could be? Does anybody tried it with Narrative theme?
Second question: Is it possible to have only the country-field and leave the zip-field? We configered our shipping costs equal for all regions in a country.

[RDB00]

Even after I've made those changes, my button doesn't even shows "calculating...". It just doesn't work.

What can I do?

It says that it needs underscore.js to work, does it have something to do with it? can I install it in my template?

EDIT: It shows the following error:

Uncaught ReferenceError: theme is not defined
at cart:596
(anonymous) @ cart:596

[Margareth]

I tried adding the snippets in vendor.js and theme.js with no result, then tried this and got it working!!!!. I'm using Boundless theme

[GoodFy_Brasil]

---

@kabobmaster wrote:

Hi Ty,

I have been able to add the calculator to my cart but it doesn't do anything when the Calculate Shipping button is clicked. Any way you can help me figure out what is going on?

Thanks!

---

Hey @kabobmaster  did you solve this ?  I just followed the instructions and has worked perfectly ... let us know what did you get and what Theme are you using 

[kabobmaster]

I have not been able to solve this. I am currently using Shopify's Debut theme. I had a Shopify expert help me but they did not get it working. All they did was place all of the github code in the cart-template.liquid

When the button is pressed, it displays "Calculating..." but returns without results and the button text reads "Calculate Shipping" again. 

Also it might be helpful to note that I am using a shipping calculator app called Intuitive Shipping. I was also using Advanced Shipping Rules prior and with both shipping apps the calculator would not work.

[GoodFy_Brasil]

---

@kabobmaster wrote:

I have not been able to solve this. I am currently using Shopify's Debut theme. I had a Shopify expert help me but they did not get it working. All they did was place all of the github code in the cart-template.liquid

When the button is pressed, it displays "Calculating..." but returns without results and the button text reads "Calculate Shipping" again. 

Also it might be helpful to note that I am using a shipping calculator app called Intuitive Shipping. I was also using Advanced Shipping Rules prior and with both shipping apps the calculator would not work.

---

Ok ... I will try this in DEBUT Theme ...

If you watn you can share me an admin staff account so I can take a look in your store .

My email is william@beautylet.com.br

Best Regards 

[kabobmaster]

---

@GoodFy_Brasil wrote:

---

@kabobmaster wrote:

I have not been able to solve this. I am currently using Shopify's Debut theme. I had a Shopify expert help me but they did not get it working. All they did was place all of the github code in the cart-template.liquid

When the button is pressed, it displays "Calculating..." but returns without results and the button text reads "Calculate Shipping" again. 

Also it might be helpful to note that I am using a shipping calculator app called Intuitive Shipping. I was also using Advanced Shipping Rules prior and with both shipping apps the calculator would not work.

---

Ok ... I will try this in DEBUT Theme ...

If you watn you can share me an admin staff account so I can take a look in your store .

My email is william@beautylet.com.br

Best Regards 

---

I found my problem. My theme was still on Debut V1. I had to port all my customizations to a new Debut theme and things worked.

[made4Uo]

I followed the "Updating older themes to use a supported version of jQuery"  and it works for me. If the first one does not work. Try to change it to the second one. I really do not have an idea what jquery version do I have

[SarahJ22]

Thank you for posting this, I found it very easy to implement and it was a great enhancement to my cart at:

www.lime-at.com/cart

However, after months of working really well, it suddenly stopped for no reason and only the following text was appearing:

"Rates start at £13.00 GBP."

I followed the instructions again, overwriting the existing code, and now have:

"Rates start at £13.00 GBP.

Rates start at £13.00 GBP."

I wonder if Shopify have made any changes that would have stopped this working?

I'm really missing it 😞

Thanks again,

Sarah

[martuza]

Hey Sarah,

Did you find any solution of this issue? I'm facing the same issue. Please let me know if you have any solution. 

Thanks

[kineticdev]

 Please delete

[PurpleMamba]

Thanks for this! I've set it up on an older non-sectioned theme and it works great!

However, I have a problem on a sectioned theme.

I get this error: "Uncaught ReferenceError: theme is not defined" for this code:

<script>
  theme.strings = {
    shippingCalcSubmitButton: "Calculate shipping",
    shippingCalcSubmitButtonDisabled: "Calculating...",
    shippingCalcMoneyFormat: "\u003cspan class=money\u003e${{amount}} USD\u003c\/span\u003e"
  }
</script>

Any suggestions to fix this?

[mohmoustafa]

Várias tags com erro, não deu para concluir o processo....

[The-Sock-Goblin]

Does anyone know if we can configure this calculator to display the shipping prices we set from our settings?

Our current shipping settings are:

1 Pair of socks = $5 shipping

2-3 Pairs = Free Shipping

4+ Pairs = Free Express shipping

Please help.

Thanks

[mrkasmith]

Wasn't able to get this working without losing menu functionality on mobile
and a css issue with the Collection feature for the main page. Calculated
my rates correctly via UPS, USPS and a category set up for progressive flat
rates based on cart amounts. I'm using the Supply Theme.##-
Please type your reply above this line -##

[boobiebu]

I set up my shop but I can't make it "live" as I want shoppers to know what the shipping is before they purchase. I followed all the instructions but it didn't work. Is there any support to help integrate this? 

I doesn't make sense to have the postage rates after you put in your bank details. In my opinion that will just put people off.

[boobiebu]

I did it again and it's working! 

No idea why it shows 2 results though.

[mrkasmith]

I was able to get this working, we use the Supply Theme.  A couple problems we identified was on the Home Page, the "Collection List" became distorted and blocked the Title partially, and the Mobile Menu didn't work while using a smart phone (Android). Wasn't sure if anybody else had this issue?

[Bikes-Angel]

delete please

[Bikes-Angel]

I don't know how to just reply to the whole post  as opposed to someone else's reply post but just wanted to say,
I tried this on simple theme a while back and could not get it to work.   I now tried it with supply theme and it works perfectly. ( I even changed the position of where it rendered and the css) There were so many good questions and answers here  Thank you everyone!

[DanAtK3D]

Did you ever get a fix for this?

Mine is doing the same thing

[PurpleMamba]

Troubleshooting

Depending on your theme and currency settings, you might see your shipping calculator price estimates displayed on the cart page with un-rendered HTML tags:

To remove these unwanted tags, you will need to make a change to your currency settings in the admin.

1. From your Shopify admin, go to Settings > General.
2. In the Store currency section, your shop currency is listed. Click Change formatting.
3. Remove the HTML tags from your currency formats. By default, the settings look like this:
   
   
   From both the HTML with currency and the HTML without currency text fields, remove the opening and closing HTML span tags. The result should look like this:
   
   
4. Click Save.

Your shipping calculator price estimates should now display without un-rendered HTML tags:

---

Do NOT change your store's currency settings as described here as this will break any currency selector you might have installed in your store.

Make sure to keep your store's currency settings WITH the span class tags, like this example:

HTML with currency: <span class=money>${{amount}} USD</span>

HTML without currency: <span class=money>${{amount}}</span>

To fix the issue where the span class appears in the shipping calculator rates estimates, go into the shipping-calulator.liquid snippet you made earlier and find {{price}} (with double curly braces), and change that to {{{price}}} (with triple curly braces).

[PurpleMamba]

---

@TyW wrote:
Troubleshooting

Depending on your theme and currency settings, you might see your shipping calculator price estimates displayed on the cart page with un-rendered HTML tags:

To remove these unwanted tags, you will need to make a change to your currency settings in the admin.

1. From your Shopify admin, go to Settings > General.
2. In the Store currency section, your shop currency is listed. Click Change formatting.
3. Remove the HTML tags from your currency formats. By default, the settings look like this:
   
   
   From both the HTML with currency and the HTML without currency text fields, remove the opening and closing HTML span tags. The result should look like this:
   
   
4. Click Save.

Your shipping calculator price estimates should now display without un-rendered HTML tags:

---

Do NOT change your currency settings as described here in the "Sectioned Themes" post, as this will break any currency selector you might have installed in your store.

Make sure to keep your store's currency settings WITH the span class tags, like this example:

HTML with currency: <span class=money>${{amount}} USD</span>

HTML without currency: <span class=money>${{amount}}</span>

To fix the issue where the span class appears in the shipping calculator rates estimates, go into the shipping-calculator.liquid snippet you made earlier and find {{price}} (with double curly braces). Change that to {{{price}}} (with triple curly braces). ( In Handlebars, which this script uses for this part, {{price}} is HTML-escaped, but {{{price}}} is not.)

[PurpleMamba]

Do NOT change your currency settings as described in the "Sectioned Themes" post, as this will break any currency selector you might have installed in your store.

Make sure to keep your store's currency settings WITH the span class tags, like this example:

HTML with currency: <span class=money>${{amount}} USD</span>

HTML without currency: <span class=money>${{amount}}</span>

To fix the issue where the span class appears in the shipping calculator rates estimates:

Go into the shipping-calculator.liquid snippet you made earlier and find {{price}} (with double curly braces). 

Change that to {{{price}}} (with triple curly braces). 

(In Handlebars, which this snippet uses, {{price}} will be HTML-escaped, but {{{price}}} will not.)

[ogeid]

This is great. Followed your steps and it works. Thanks for positing.

Is there are way to show all shipping option.?

Also, any suggestion on how we can add a tax estimate as well?

Thanks, Diego

[kabobmaster]

You can do this to display shipping method and the rate. I don't know how to do the taxes.

Modify the response in the shipping-calculator.liquid

{{#if success}}
    {{#if rates}}
      {{#rates}}
      
        {{#if @first}}
        <br/>
        Available rates are:
        <br/><br/>
        {{/if}}
        
        {{name}}: {{price}}
        <br/>
        
      {{/rates}}
    {{else}}
      We do not ship to this destination.
    {{/if}}    
  {{else}}
    {{ errorFeedback }}
  {{/if}}

[ogeid]

Thanks.

[DabsDesign]

Thanks for sharing this piece of code, it's a great improvement to the implementation. So there is the possibility to show all forms of shipping and not just the price. For Brazil, it works perfectly!

[chenster]

What did you mean by 'all forms of shipping'??  Is it relevant to this discussion? 

[DabsDesign]

Hello @chenster.

In Brazil we work with many delivery methods. What I meant is that it displays all possible shipping forms for the address entered, for example:

• delivery by car - "estimated price"
• delivery by boat - "estimatede price"
• delivery by airplane - "estimatede price"

And so on, this way it lists all the shipping options and not just the value that starts the shipping, because if I offer a free shipping, it will show that the shipping starts at a value of 0.

[chenster]

---

@DabsDesign wrote:

Hello @chenster.

In Brazil we work with many delivery methods. What I meant is that it displays all possible shipping forms for the address entered, for example:

• delivery by car - "estimated price"
• delivery by boat - "estimatede price"
• delivery by airplane - "estimatede price"

And so on, this way it lists all the shipping options and not just the value that starts the shipping, because if I offer a free shipping, it will show that the shipping starts at a value of 0.

---

This app (not mine) offers estimate by delivery type. I'm not sure it can do exactly 100% what you need. Give it a try.

https://apps.shopify.com/shipping-based-on-zipcode

[DabsDesign]

@kabobmaster or @chenster how i change the currency. Actually is showing $ but I need to change to R$, the default currency for Brazil.

I using this code:

<script id="shipping-calculator-response-template" type="text/template">
  {% raw %}
  <p id="shipping-rates-feedback" {{#if success}} class="success" {{else}} class="error" {{/if}}>
  {{#if success}}
    {{#if rates}}
      {{#rates}}
      
        {{#if @first}}
        <br/>
        <span style="font-size: 16px; color: #9a0fee;">
        Os fretes disponíveis são:
  		</span>
        <br/>
        {{/if}}
        
        {{name}}: {{price}}
        <br/>
        
      {{/rates}}
    {{else}}
      Não foi possível realizar o calculo do frete. Tente novamente.
    {{/if}}    
  {{else}}
    {{ errorFeedback }}
  {{/if}}
  </p>
  {% endraw %}
</script>

I change the currency in this place or another? Any help (from anyone) is welcome!

[chenster]

You can check out https://www.techonthenet.com/js/number_tolocalestring.php for symbol display

[DabsDesign]

@chenster can you be more specific, please. Like teach what I need to do? 😉

[DabsDesign]

@chenster I thank you anyway for your effort to respond but I have already found the solution. Just modify the JS code that according to the initial tutorial says to insert at the end of the vendor.js file.

"object"==typeof Countries&&(Countries.updateProvinceLabel=function(e,t){if("string"==typeof e&&Countries[e]&&Countries[e].provinces){if("object"!=typeof t&&(t=document.getElementById("address_province_label"),null===t))return;t.innerHTML=Countries[e].label;var r=jQuery(t).parent();r.find("select");r.find(".custom-style-select-box-inner").html(Countries[e].provinces[0])}}),"undefined"==typeof Shopify.Cart&&(Shopify.Cart={}),Shopify.Cart.ShippingCalculator=function(){var _config={submitButton:"Calcular",submitButtonDisabled:"Calculando...",templateId:"shipping-calculator-response-template",wrapperId:"wrapper-response",customerIsLoggedIn:!1,moneyFormat:"R${{amount}}"},_render=function(e){var t=jQuery("#"+_config.templateId),r=jQuery("#"+_config.wrapperId);if(t.length&&r.length){var templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var n=Handlebars.compile(jQuery.trim(t.text())),a=n(e);if(jQuery(a).appendTo(r),"undefined"!=typeof Currency&&"function"==typeof Currency.convertAll){var i="";jQuery("[name=currencies]").size()?i=jQuery("[name=currencies]").val():jQuery("#currencies span.selected").size()&&(i=jQuery("#currencies span.selected").attr("data-currency")),""!==i&&Currency.convertAll(shopCurrency,i,"#wrapper-response span.money, #estimated-shipping span.money")}}},_enableButtons=function(){jQuery(".get-rates").removeAttr("disabled").removeClass("disabled").val(_config.submitButton)},_disableButtons=function(){jQuery(".get-rates").val(_config.submitButtonDisabled).attr("disabled","disabled").addClass("disabled")},_getCartShippingRatesForDestination=function(e){var t={type:"POST",url:"/cart/prepare_shipping_rates",data:jQuery.param({shipping_address:e}),success:_pollForCartShippingRatesForDestination(e),error:_onError};jQuery.ajax(t)},_pollForCartShippingRatesForDestination=function(e){var t=function(){jQuery.ajax("/cart/async_shipping_rates",{dataType:"json",success:function(r,n,a){200===a.status?_onCartShippingRatesUpdate(r.shipping_rates,e):setTimeout(t,500)},error:_onError})};return t},_fullMessagesFromErrors=function(e){var t=[];return jQuery.each(e,function(e,r){jQuery.each(r,function(r,n){t.push(e+" "+n)})}),t},_onError=function(XMLHttpRequest,textStatus){jQuery("#estimated-shipping").hide(),jQuery("#estimated-shipping em").empty(),_enableButtons();var feedback="",data=eval("("+XMLHttpRequest.responseText+")");feedback=data.message?data.message+"("+data.status+"): "+data.description:"Error : "+_fullMessagesFromErrors(data).join("; ")+".","Error : country is not supported."===feedback&&(feedback="We do not ship to this destination."),_render({rates:[],errorFeedback:feedback,success:!1}),jQuery("#"+_config.wrapperId).show()},_onCartShippingRatesUpdate=function(e,t){_enableButtons();var r="";if(t.zip&&(r+=t.zip+", "),t.province&&(r+=t.province+", "),r+=t.country,e.length){"0.00"==e[0].price?jQuery("#estimated-shipping em").html("FREE"):jQuery("#estimated-shipping em").html(_formatRate(e[0].price));for(var n=0;n<e.length;n++)e[n].price=_formatRate(e[n].price)}_render({rates:e,address:r,success:!0}),jQuery("#"+_config.wrapperId+", #estimated-shipping").fadeIn()},_formatRate=function(e){function t(e,t){return"undefined"==typeof e?t:e}function r(e,r,n,a){if(r=t(r,2),n=t(n,","),a=t(a,"."),isNaN(e)||null==e)return 0;e=(e/100).toFixed(r);var i=e.split("."),o=i[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1"+n),s=i[1]?a+i[1]:"";return o+s}if("function"==typeof Shopify.formatMoney)return Shopify.formatMoney(e,_config.moneyFormat);"string"==typeof e&&(e=e.replace(".",""));var n="",a=/\{\{\s*(\w+)\s*\}\}/,i=_config.moneyFormat;switch(i.match(a)[1]){case"amount":n=r(e,2);break;case"amount_no_decimals":n=r(e,0);break;case"amount_with_comma_separator":n=r(e,2,".",",");break;case"amount_no_decimals_with_comma_separator":n=r(e,0,".",",")}return i.replace(a,n)};return _init=function(){new Shopify.CountryProvinceSelector("address_country","address_province",{hideElement:"address_province_container"});var e=jQuery("#address_country"),t=jQuery("#address_province_label").get(0);"undefined"!=typeof Countries&&(Countries.updateProvinceLabel(e.val(),t),e.change(function(){Countries.updateProvinceLabel(e.val(),t)})),jQuery(".get-rates").click(function(){_disableButtons(),jQuery("#"+_config.wrapperId).empty().hide();var e={};e.zip=jQuery("#address_zip").val()||"",e.country=jQuery("#address_country").val()||"",e.province=jQuery("#address_province").val()||"",_getCartShippingRatesForDestination(e)}),_config.customerIsLoggedIn&&jQuery(".get-rates:eq(0)").trigger("click")},{show:function(e){e=e||{},jQuery.extend(_config,e),jQuery(function(){_init()})},getConfig:function(){return _config},formatRate:function(e){return _formatRate(e)}}}();

Inside this code, there is the currency written together with the {{amount}} tag. Replace the currency that comes standard in the tutorial code with that of your country (in my case Brazil - R$), leaving:

moneyFormat:"${{amount}}"

for:

moneyFormat:"R${{amount}}"

IMPORTANT: if you are reading this comment, the entire script is necessary. What I commented above is just a part of it focusing to modify the currency that appears in the freight calculation.

For reference only, the tutorial that refers to vendor.js is this: https://community.shopify.com/c/shopify-design/cart-add-a-shipping-rates-calculator-to-your-cart/m-p...

[ogeid]

Thank you @TyW  and everybody else for posting.

I have been using a variation of this on a couple Shopify sites in the USA for a 2 years. It still works great. There are some expedited services from FedEx and UPS that won't show, since it requires a full address to get a price. However it works in 95% of the cases.

Is there someone that uses this code and might have added an automation to populate the state field based on the zip code? It seems silly to have to add both. It should be easy to add a zip code reference chart. Do zip codes change a lot? Is it worth looking for an online reference to get the corresponding state for a zip code and always be up-to-date? 

[chenster]

Don't think zip can change, at least the first 5 digital in US, the last digits in zip+4 format can change over time.

http://www.mymarathoncountyaddress.org/faq/what-zip4-code-and-why-may-it-change

Have you tried https://apps.shopify.com/in-cart-shipping-rates? It's free at the moment. Disclaimer: I'm the developer. Let me know should you have any questions please.

[ogeid]

I changed "shipping-calculator.liquid", so it can automatically set the state based on the zip code. For now I just works for the USA. It doesn't do anything for provinces/states in other countries.

{% unless settings.shipping_calculator == 'Disabled' %}
<hr>
<div id="shipping-calculator">
  <h3>{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}</h3>
  <h4>Total cart weight: {{ cart.total_weight | times: 0.00220462 | round: 1 }} lbs</h4>
  <div>
    <p class="field">
      <label for="address_zip">Zip/Postal Code</label>
      <input type="text" id="address_zip" name="address[zip]" oninput="getState(this.value)" />
    </p>
    <p class="field" id="address_province_container" style="display:none;">
      <label for="address_province" id="address_province_label">Province</label>
      <select id="address_province" name="address[province]" data-default=""></select>
    </p> 
    <p class="field">
      <label for="address_country">Country</label>
      <select id="address_country" name="address[country]" data-default="United States">{{ country_option_tags }}</select>
    </p>
    <p class="field">
      <input type="button" class="get-rates btn button" value="{{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' }}" />
    </p>
  </div>
  <div id="wrapper-response"></div>
</div>
{% endunless %}

<script>
function getState(zipString) {

  /* Ensure param is a string to prevent unpredictable parsing results */
  if (typeof zipString !== 'string') {
      console.log('Must pass the zipcode as a string.');
      return;
  }

  /* Ensure we have exactly 5 characters to parse */
  if (zipString.length !== 5) {
      console.log('Must pass a 5-digit zipcode.');
      return;
  }

  /* Ensure we don't parse strings starting with 0 as octal values */
  const zipcode = parseInt(zipString, 10);

  let st;
  let state;

  /* Code cases alphabetized by state */
  if (zipcode >= 35000 && zipcode <= 36999) {
      st = 'AL';
      state = 'Alabama';
  } else if (zipcode >= 99500 && zipcode <= 99999) {
      st = 'AK';
      state = 'Alaska';
  } else if (zipcode >= 85000 && zipcode <= 86999) {
      st = 'AZ';
      state = 'Arizona';
  } else if (zipcode >= 71600 && zipcode <= 72999) {
      st = 'AR';
      state = 'Arkansas';
  } else if (zipcode >= 90000 && zipcode <= 96699) {
      st = 'CA';
      state = 'California';
  } else if (zipcode >= 80000 && zipcode <= 81999) {
      st = 'CO';
      state = 'Colorado';
  } else if ((zipcode >= 6000 && zipcode <= 6389) || (zipcode >= 6391 && zipcode <= 6999)) {
      st = 'CT';
      state = 'Connecticut';
  } else if (zipcode >= 19700 && zipcode <= 19999) {
      st = 'DE';
      state = 'Delaware';
  } else if (zipcode >= 32000 && zipcode <= 34999) {
      st = 'FL';
      state = 'Florida';
  } else if ( (zipcode >= 30000 && zipcode <= 31999) || (zipcode >= 39800 && zipcode <= 39999) ) {
      st = 'GA';
      state = 'Georgia';
  } else if (zipcode >= 96700 && zipcode <= 96999) {
      st = 'HI';
      state = 'Hawaii';
  } else if (zipcode >= 83200 && zipcode <= 83999) {
      st = 'ID';
      state = 'Idaho';
  } else if (zipcode >= 60000 && zipcode <= 62999) {
      st = 'IL';
      state = 'Illinois';
  } else if (zipcode >= 46000 && zipcode <= 47999) {
      st = 'IN';
      state = 'Indiana';
  } else if (zipcode >= 50000 && zipcode <= 52999) {
      st = 'IA';
      state = 'Iowa';
  } else if (zipcode >= 66000 && zipcode <= 67999) {
      st = 'KS';
      state = 'Kansas';
  } else if (zipcode >= 40000 && zipcode <= 42999) {
      st = 'KY';
      state = 'Kentucky';
  } else if (zipcode >= 70000 && zipcode <= 71599) {
      st = 'LA';
      state = 'Louisiana';
  } else if (zipcode >= 3900 && zipcode <= 4999) {
      st = 'ME';
      state = 'Maine';
  } else if (zipcode >= 20600 && zipcode <= 21999) {
      st = 'MD';
      state = 'Maryland';
  } else if ( (zipcode >= 1000 && zipcode <= 2799) || (zipcode == 5501) || (zipcode == 5544 ) ) {
      st = 'MA';
      state = 'Massachusetts';
  } else if (zipcode >= 48000 && zipcode <= 49999) {
      st = 'MI';
      state = 'Michigan';
  } else if (zipcode >= 55000 && zipcode <= 56899) {
      st = 'MN';
      state = 'Minnesota';
  } else if (zipcode >= 38600 && zipcode <= 39999) {
      st = 'MS';
      state = 'Mississippi';
  } else if (zipcode >= 63000 && zipcode <= 65999) {
      st = 'MO';
      state = 'Missouri';
  } else if (zipcode >= 59000 && zipcode <= 59999) {
      st = 'MT';
      state = 'Montana';
  } else if (zipcode >= 27000 && zipcode <= 28999) {
      st = 'NC';
      state = 'North Carolina';
  } else if (zipcode >= 58000 && zipcode <= 58999) {
      st = 'ND';
      state = 'North Dakota';
  } else if (zipcode >= 68000 && zipcode <= 69999) {
      st = 'NE';
      state = 'Nebraska';
  } else if (zipcode >= 88900 && zipcode <= 89999) {
      st = 'NV';
      state = 'Nevada';
  } else if (zipcode >= 3000 && zipcode <= 3899) {
      st = 'NH';
      state = 'New Hampshire';
  } else if (zipcode >= 7000 && zipcode <= 8999) {
      st = 'NJ';
      state = 'New Jersey';
  } else if (zipcode >= 87000 && zipcode <= 88499) {
      st = 'NM';
      state = 'New Mexico';
  } else if ( (zipcode >= 10000 && zipcode <= 14999) || (zipcode == 6390) || (zipcode == 501) || (zipcode == 544) ) {
      st = 'NY';
      state = 'New York';
  } else if (zipcode >= 43000 && zipcode <= 45999) {
      st = 'OH';
      state = 'Ohio';
  } else if ((zipcode >= 73000 && zipcode <= 73199) || (zipcode >= 73400 && zipcode <= 74999) ) {
      st = 'OK';
      state = 'Oklahoma';
  } else if (zipcode >= 97000 && zipcode <= 97999) {
      st = 'OR';
      state = 'Oregon';
  } else if (zipcode >= 15000 && zipcode <= 19699) {
      st = 'PA';
      state = 'Pennsylvania';
  } else if (zipcode >= 300 && zipcode <= 999) {
      st = 'PR';
      state = 'Puerto Rico';
  } else if (zipcode >= 2800 && zipcode <= 2999) {
      st = 'RI';
      state = 'Rhode Island';
  } else if (zipcode >= 29000 && zipcode <= 29999) {
      st = 'SC';
      state = 'South Carolina';
  } else if (zipcode >= 57000 && zipcode <= 57999) {
      st = 'SD';
      state = 'South Dakota';
  } else if (zipcode >= 37000 && zipcode <= 38599) {
      st = 'TN';
      state = 'Tennessee';
  } else if ( (zipcode >= 75000 && zipcode <= 79999) || (zipcode >= 73301 && zipcode <= 73399) ||  (zipcode >= 88500 && zipcode <= 88599) ) {
      st = 'TX';
      state = 'Texas';
  } else if (zipcode >= 84000 && zipcode <= 84999) {
      st = 'UT';
      state = 'Utah';
  } else if (zipcode >= 5000 && zipcode <= 5999) {
      st = 'VT';
      state = 'Vermont';
  } else if ( (zipcode >= 20100 && zipcode <= 20199) || (zipcode >= 22000 && zipcode <= 24699) || (zipcode == 20598) ) {
      st = 'VA';
      state = 'Virginia';
  } else if ( (zipcode >= 20000 && zipcode <= 20099) || (zipcode >= 20200 && zipcode <= 20599) || (zipcode >= 56900 && zipcode <= 56999) ) {
      st = 'DC';
      state = 'Washington DC';
  } else if (zipcode >= 98000 && zipcode <= 99499) {
      st = 'WA';
      state = 'Washington';
  } else if (zipcode >= 24700 && zipcode <= 26999) {
      st = 'WV';
      state = 'West Virginia';
  } else if (zipcode >= 53000 && zipcode <= 54999) {
      st = 'WI';
      state = 'Wisconsin';
  } else if (zipcode >= 82000 && zipcode <= 83199) {
      st = 'WY';
      state = 'Wyoming';
  } else {
      st = 'none';
      state = 'none';
      console.log('No state found matching', zipcode);
  }
  
  var temp = state; 
  $("#address_province").val(temp);
   
}
</script>


<script id="shipping-calculator-response-template" type="text/template">
  {% raw %}
  <p id="shipping-rates-feedback" {{#if success}} class="success" {{else}} class="error" {{/if}}>
  {{#if success}}
    {{#if rates}}
      {{#rates}}
        {{#if @first}}
            <br/>
           More shipping methods might become available after entering shipping address in checkout:
            <br/><br/>
        {{/if}}
        
        {{name}}: {{price}}
        <br/>
      {{/rates}}
    {{else}}
      No shipping estimate was found. Please proceed to checkout to find more shipping options.
    {{/if}}    
  {{else}}
    {{ errorFeedback }}
  {{/if}}
  </p>
  {% endraw %}
</script>


<!--[if lte IE 8]>
<style> #shipping-calculator { display: none; } </style>
<![endif]-->​

PS: I just copy&pasted zip code script from stack overflow

[ogeid]

As I stated in a previous post, the calculator works great, but for some reason it disables the password protection button on my development site. When I click on the "Enter Using Password" button, my login prompt doesn't load.

Not a deal breaker, but thought this is odd. Some of the code must be overlapping (my guess the part that goes into theme.js from step 6.).

[nstipic]

Is there a way to making calculator this working well in cart drawer/popup?

---

[3rdmiracle]

Hi, I have a sectioned theme. Though I don't have neither vendor.js nor theme.js under the folder 'Asset' 

So I tried to follow the steps for Non-sectioned theme and everything seeemed to be okay but then there was an error when it's selceted. Id' like to follow the right step but not sure which one is for me. If I don't have those files, theme.js or vendor.js, where should I start with?  Thanks for your help in advance!

Best,

Erin

[mrkasmith]

Hello,  I've implemented the shipping rates calculator and it works perfectly on our stock Debut theme.  Only thing is when at the Shopping Cart page, if you adjust the cart quantity up or down the cart will no longer automatically update the total.  Anyone else seen this?  

[ogeid]

@mrkasmith: What theme are you using? I use a modified version of Debut and my cart total never automatically updated, but I have an "Update" button next to the "Check Out" button.

Now, if I do a shipping cost estimation and then change the quantities in my cart, the shipping cost doesn't change automatically either, I have to press the "Calculate Shipping" button again.

[mrkasmith]

Thanks for the reply,  I'm using the most recent available 'Debut' version.  My duplicated version with the Estimator would not auto update the cart price when I increased the quantity.  It does update the quantity automatically with increased with the Original version of Debut.  It's not a problem, I just switched off the auto update feature in settings for the Cart and manually select the Update button.  Does that make sense?

[alibabyph]

How to make it look like this? I don't like how mine turns out. I want to have that total weight too and that width. Thank you!

[TAGSAngel]

The calculator works off the css for your theme. (as far as colors / fonts)  I do not believe this will give weights etc.  This is merely to give your customer a preview of what their estimated shipping costs are prior to filling everything out in check out.  If it works with your theme, then it's perfect for what it's meant to do.  (customers don't want to give all info just to see if they are agreeable to shipping prices) Actual shipping prices are then calculated at the time of check out when they put in their shipping address.  So it does what it's meant to do.  

[ogeid]

@TAGSAngel :  Yes, this is meant to allow customers to see the shipping cost before typing in all their information.

As for the weight, I just added this :

Total cart weight: {{ cart.total_weight | times: 0.00220462 | round: 1 }} lbs

I'm using the Debut theme and this how I display it:

[TAGSAngel]

Cool!  I'm sure that will make others very happy.   Wish you (or someone) could get it to work with Simple theme! 🙂

[Zhuangwei]

I'm also using Debut theme, I followed the tutorial and the shipping calculator works, but when I modified the quantity in cart, the products disappeared, I have to refresh the page, and it shows up, do you know what wrong it is ?

[mrkasmith]

I'm using the Supply theme and this too is happening on our site.  Customers have to manually update the cart after changing a quantity in the cart to see the updated price.

[Zhuangwei]

I have the same question, when I adjust the quantity of the products in cart, the products disappeared, and a exclamation mark shows below the check out button. Anyone can fix this without infecting the cart products display when we adjust the quantity.