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

[JTorregano]

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

[chenster]

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

[JTorregano]

---

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

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]

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.

[pp7]

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]

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.

[arflorezo]

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]

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

[Joan65]

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. 

[labeauty]

Greetings, I would like to add this to my theme. I have one question about the assets section. I do not have a vendor.js or a theme.js. Mine has a theme-editor.js. Is that where I should make the first change or should I place it elsewhere?

[AnnieA]

Hi there, I have the Shipping Rates Calculator working on my cart page, but it's only showing our custom rates, and not our live courier rates. After a bit of investigation, I believe this is not a simple request. So if I assume that I can only have the custom rates (which are generally higher), is there a way i can add a note to the result suggesting that the customer click through to the checkout for more accurate rates?