Re: Cart - Add a shipping rates calculator to your cart

Cart - Add a shipping rates calculator to your cart

TyW
Shopify Staff (Retired)
463 71 1237

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 144 (144)
DabsDesign
Shopify Partner
49 1 10

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

 

 

DABS Design - Sua Agência Shopify no Brasil. Somos especialistas em Shopify e Shopify Plus, oferecendo consultoria, suporte, criação, integração de Apps e desenvolvimento para sua loja virtual. Conte com uma agência Shopify Expert Partner para potencializar o seu negócio! Entre em contato conosco. Transforme sua loja com os especialistas em Shopify no Brasil!
ogeid
Shopify Partner
68 0 23

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
134 5 30

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
68 0 23

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
ogeid
Shopify Partner
68 0 23

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

D.E.W. L.A. - Web Design
https://dew.la
nstipic
Visitor
1 0 1

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


3rdmiracle
Visitor
1 0 0

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
Excursionist
16 0 11

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
Shopify Partner
68 0 23

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

cart.jpg

D.E.W. L.A. - Web Design
https://dew.la
mrkasmith
Excursionist
16 0 11

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
Tourist
8 0 3

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!Untitled.png

 

TAGSAngel
Trailblazer
148 1 88

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
Shopify Partner
68 0 23

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

cart.jpg

D.E.W. L.A. - Web Design
https://dew.la
TAGSAngel
Trailblazer
148 1 88

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

Zhuangwei
Tourist
3 0 0

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
Excursionist
16 0 11

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
Tourist
3 0 0

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.

DifferentDogs
Tourist
11 0 8

I think I've followed all the instructions and it shows nicely on the cart in my debut theme. But when I actually test the Estimate Shipping Button, the results are not good:

class="success" <% } else { %> class="error" <% } %>> <% if (success) { %> <% if (rates.length > 1) { %> There are <%- rates.length %> shipping rates available for <%- address %>, starting at <%= rates[0].price %>. <% } else if (rates.length == 1) { %> There is one shipping rate available for <%- address %>. <% } else { %> We do not ship to this destination. <% } %> <% } else { %> <%- errorFeedback %> <% } %>

    <% for (var i=0; i<rates.length; i++)="" {="" %="">
  • <%- rates[i].name %> at <%= rates[i].price %>
  • <% } %></rates.length;>

Where did I go wrong?

Bikes-Angel
Explorer
65 1 23

1. Make sure that you FULLY copy pasted everything correctly.  If you miss a ;  you’re going to end up with a result like that. ( happened to me).  Re trace your steps.  Something is missing or in the wrong spot.  Get a cup of coffee, go nice and slow.   Also there are 2 different versions of the shipping-calculator.  One that ends in some type of if IE8 stuff (sorry, not on the computer right now I can’t check). I found that that is the correct one.

But..... with all that being said,  I’m not on Debut...  but I think for the most part it’s somewhat the same as far as the results you’re getting

 

NomarAdea
Visitor
1 0 0

I'm not sure what the problem is, but I followed the steps and made it appear on the preview of the store but when it's not on preview, the calculator only shows Country and Postal Code.

Preview

NomarAdea_0-1604563864464.png

Live

NomarAdea_1-1604563930435.png

Does anyone here experienced this issue?

IamLLIIME
Trailblazer
269 2 50

Is this applicable in Philippines? @TyW 

GardGroup
Tourist
4 0 1

I am having a problem with the shipping rates calculator. I followed all the instructions as outlined above and the calculate shipping button doesn't do anything when clicked. It's odd because the province drop down is not showing either. you can view it at www.surfacescience.ca.

Any chance someone can help me figure out what is going on?

Thanks in Advance!

Baz1
Shopify Partner
33 1 6

Hi @GardGroup  your Cart page throws a javascript error.  i think you are miising a reference to 'Jquery'  somethink like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

which needs to be in the head section of the page. 

digga
Tourist
5 0 1

Our shipping calculator on the cart page was working fine for a couple of months and then today it just stopped working. 

This is the error displayed when getting an estimate:

Error : zip is not valid for Australian Capital Territory and Australia.

The shipping calculator on the checkout page works fine.

 

GardGroup
Tourist
4 0 1

Worked like a charm! Thank you so much!

DabsDesign
Shopify Partner
49 1 10

@TyW hello, thank you very much for all this information, it is really helpful and helped me in an incredible way.

But I would like to know if you can teach how the shipping calculation should also work within the product page, but without the customer having to add the product to the cart? It would only be for him to estimate the shipping cost of the product to his address, but doing so from within the product page!

Can you help?

DABS Design - Sua Agência Shopify no Brasil. Somos especialistas em Shopify e Shopify Plus, oferecendo consultoria, suporte, criação, integração de Apps e desenvolvimento para sua loja virtual. Conte com uma agência Shopify Expert Partner para potencializar o seu negócio! Entre em contato conosco. Transforme sua loja com os especialistas em Shopify no Brasil!
chenster
Shopify Partner
134 5 30

Glad you figured out

Cartoo
pp7
Visitor
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
134 5 30

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
ZaeuneBilliger
Visitor
2 0 0

Hi TyW,

thank you for this, but i got a visibility problem. I am currently using CRAFT Theme Version 10.0.0 and i can't see the Shipping Calculator in my cart page. In the Theme Editor I can configure the Calculator but it doesn't get visible in the cart page.

 

astrovac
Visitor
2 0 0

Hi, regarding step 12, on Dawn template there is no card-template.liquid, and instead of card.liquid it has card.json on the template folder. Please advise how to go around this issue to make it work. Thank you kindly. Regards, Albert.  

RA86
New Member
19 0 0

@TyW is it possible to show this calculator on product main page?

rahmad
DabsDesign
Shopify Partner
49 1 10

Yes, it is possible. Our agency DABS Design (Shopify Experts), are developing an special app that will only be for you to display the way you want the shipping calculation on the product page. I'll let you know here soon when it launches.


--------
PT-BR:

Sim é possível. Nossa agência DABS Design (somos Shopify Experts), estamos desenvolvendo um app que será somente para você exibir da forma que deseja p calculo de frete na página do produto. Em breve informo aqui, quando for lançando.

DABS Design - Sua Agência Shopify no Brasil. Somos especialistas em Shopify e Shopify Plus, oferecendo consultoria, suporte, criação, integração de Apps e desenvolvimento para sua loja virtual. Conte com uma agência Shopify Expert Partner para potencializar o seu negócio! Entre em contato conosco. Transforme sua loja com os especialistas em Shopify no Brasil!
carlyobrien
Shopify Partner
2 0 0
Any advice on how to code this without having to wait for an app? Not
having city conflicts with some of the shipping actuals we are displaying
to customers.
ogeid
Shopify Partner
68 0 23

@carlyobrien ,  It has been a few year since I last used this code. The original code is provided in this discussion thread. You might need to edit it to work with your theme, but the basics are still valid. If you want to display the calculator on the product page, you will need to change where you get the weight information from. The original code uses the cart information. On the product page this is not available, so you will need to use the product weight instead. 

 

Disclaimer: Depending on the shipping services you offer, it might not show all of them. If you use a 3rd-party app to calculate freight cost or if you use home and commercial delivery, you will quickly reach the limits of this code. On the sites we have implemented this code, we don't call it a "calculator", but rather an "estimator", since the actual cost might be different in the checkout.

D.E.W. L.A. - Web Design
https://dew.la
SR_Author
Shopify Partner
13 0 1

Hi, Let me draw your attention to this calculator widget: https://apps.shopify.com/shiprate-estimator


I'm its author and welcome any feedback and assistance requests (if needed).

Jeansilva
Visitor
1 0 0
Vc programa?

hugoindustries
Excursionist
13 0 10

Has anyone been able to get this to work with the Simple theme? The calculator shows up in the cart but when I press the Calculate button it says "Calculating..." and then goes back to "Calculate" and doesn't show anything. If I put an incorrect zip code for the state though, it will give me an error saying the zip code is wrong. So it seems like part of it is working.

Any help would be greatly appreciated as this is a huge money loser for my site in terms of customers abandoning cart.

Bikes-Angel
Explorer
65 1 23

I was not able to get this to work with simple theme, but now that I’ve gotten it to work with supply theme, i’m going to try simple again i’ll let you know how i make out

hugoindustries
Excursionist
13 0 10

Thank you! I am not very familiar with the liquid language so I'm finding it difficult to try to troubleshoot what's going on. Please do post back if you find out how to get it to work. Seems like the Simple theme never works with any of the custom code people post on these forums.

Bikes-Angel
Explorer
65 1 23

Seems no matter what I do it wont work in Simple Theme 😞
I applied the changes suggested by both @Voltage_Matt (to add both codes to the bottom )  and @kabobmaster   for rates available.
That didn't help. 
I added the css to make it go across the page thinking that might kick it into gear but no luck there either.

There's got to be a way to get this to work.  I'm almost ready to swap out for supply theme but I have so many custom liquid files for customization fields plus I'm a stickler for that side menu.

Can someone help?  it works perfectly on supply   why not simple.

and one of the other things with simple is it seems like I have to customize to get rid of the dynamic button for every product I put in.  That's quite annoying also!

TAGSAngel
Trailblazer
148 1 88

OK so no matter what I do, how much I play, and how many different versions / suggested fixes / placements etc to this code it just does not work with simple theme.  (one version actually made all the items on the collection list invisible  (just whited over like opacity 5* or something like that)

Anybody out there can help?   At this point, I've removed all the code and will gladly do it all over again if I can just find what's wrong.  It looks lovely in the cart, allows you to choose country/ state / enter zip code and click calculate   one version (I don't remember which anymore - will throw an error code if the zip doesn't match... the other tells you the zip doesn't match the state - as it should)  but no rates!  

I was able to put this up on supply theme with no issue (just a tweak to show all rates instead of rates start at)  So, it's not me  lol.  why does this not work with simple them and how can we get it to work.

Heeeeelp!

Discountcornhol
Visitor
2 0 0

Same issue. Loads to cart page but has all images in the collections like greyed over and doesn't actually calculate . 

TAGSAngel
Trailblazer
148 1 88

Isn't there a way to get someone from the "Simple Theme" team to work on this?   I've already tried this like 5 - 6 different times.  They need to have specific theme forums where they're monitored by the theme developers for things just like this.

JTorregano
Tourist
8 0 2

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

chenster
Shopify Partner
134 5 30

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

Cartoo
JTorregano
Tourist
8 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.

lauramachado9
Visitor
2 0 1

Hi!

I followed the tutorial but when I select Canada, it doesn't allow me to choose the province, so when I click calculate nothing happens.

Any idea on why this may be happening or how could I fix it?

Thanks!

Igor_Souza1
New Member
5 0 0

Do you have any solution to show a calculator like this on the product page?

TAGSAngel
Trailblazer
148 1 88

At this point, I think most are lucky we have it on the cart page (for the themes it works on)    I would think, though, that there is no logic (on the coding end) to be placed on the product page because there is no way to know what is actually being ordered until it is placed in the cart.