Cart - Add a shipping rates calculator to your cart

TyW
Community Manager
Community Manager
404 39 1174

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.

 

calc01.jpg

 

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.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 131 (131)
JTorregano
Tourist
6 0 2

This is my exact issue aswell. No results at all other than the zip error. Very frustrating.

chenster
Shopify Partner
132 4 20

Sorry to hear that. What was the location you’ve tried to search?

Cartoo
JTorregano
Tourist
6 0 2

@chenster wrote:

Sorry to hear that. What was the location you’ve tried to search?


I tried a few in the USA. I am seeing a common issue with the theme SIMPLE though. I'm thinking maybe it's that.

Jerryok
New Member
1 0 0

I need assistance, please. I have configured the shipping estimate. It is displayed on my cart page. However, when I enter the postcodes, It's not responding. No estimate is shown.  Your assistance will be highly appreciated.

https://bestpricefurniture.com.au

Thanks

Jerry

chenster
Shopify Partner
132 4 20

Sorry to hear that. I'm looking into it. Do you remember what zip code you were trying to search for?

I saw you have installed https://apps.shopify.com/estimated-shipping-rates, not In-Cart Shipping Rates. There's no way for me to test.

Cartoo
pp7
New Member
2 0 1

I have implemented the code on Sectioned theme  - Supply. It worked just fine till placing the estimator on the cart page. But after clicking the Get Estimate button, nothing is being displayed. The button is not functioning. Kindly help me out !

chenster
Shopify Partner
132 4 20

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.

Cartoo
arflorezo
New Member
3 0 0

Hi TyW, I followed the steps but the bottom is not working, it does not provide any rates.

The theme version is not old....  {{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

Thanks for any help 🙂 

ogeid
Shopify Partner
47 0 12

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? 

D.E.W. L.A. - Web Design
https://dew.la
chenster
Shopify Partner
132 4 20

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.

Cartoo
ogeid
Shopify Partner
47 0 12

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

D.E.W. L.A. - Web Design
https://dew.la
Joan65
Tourist
10 0 1

Good morning.  I have edited the code in my Shopify Dawn 4.0 theme in all the appropriate directories, etc. according to your tutorial. I am still not seeing the new "Shipping Calculator" option in my Settings. Please help.  There was one setting I had to find a solution. I followed this solution https://community.shopify.com/c/technical-q-a/where-is-the-cart-template-liquid-or-cart-liquid-in-da...  Very grateful for any help. 

Joan Smith