Cart - Add a shipping rates calculator to your cart

TyW
Community Manager
Community Manager
415 40 1108

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 133 (133)
NomarAdea
New Member
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?

slideontheway
New Member
3 0 0
Soren_Jacobi
New Member
1 0 0

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?

cherylfoh
Explorer
68 5 18

This is working in my theme, but for some reason it shows the results twice. 

Anybody know why? This is my code for the snippet:

{% unless settings.shipping_calculator == 'Disabled' %}
<div id="shipping-calculator">
  <h3>{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}</h3>
  <div>
    <p class="field">
      <label for="address_country">Country</label>
      <select id="address_country" name="address[country]" data-default="{% if shop.customer_accounts_enabled and customer %}{{ customer.default_address.country }}{% elsif settings.shipping_calculator_default_country != '' %}{{ settings.shipping_calculator_default_country }}{% endif %}">{{ country_option_tags }}</select>
    </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="{% if shop.customer_accounts_enabled and customer and customer.default_address.province != '' %}{{ customer.default_address.province }}{% endif %}"></select>
    </p>  
    <p class="field">
      <label for="address_zip">Zip/Postal Code</label>
      <input type="text" id="address_zip" name="address[zip]"{% if shop.customer_accounts_enabled and customer %} value="{{ customer.default_address.zip }}"{% endif %} />
    </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 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}}
            Rates start at {{price}}.
        {{/if}}
      {{/rates}}
    {{else}}
      We do not ship to this destination.
    {{/if}}    
  {{else}}
    {{ errorFeedback }}
  {{/if}}
  </p>
  {% endraw %}
</script>

<!--[if lte IE 8]>
<style> #shipping-calculator { display: none; } </style>
<![endif]-->
RDB00
New Member
2 0 0

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

aninhab
Tourist
8 0 3

@Igor_Souza1 Igor, você por acaso conseguiu uma maneira de incluir o calculo do frete na página do produto
Também estou muito em busca deste tutorial rsrs
Se você conseguiu poderia me informar como?
Obrigada!

IamLLIIME
Trailblazer
257 1 49

Is this applicable in Philippines? @TyW 

jrltrend
Excursionist
42 0 11

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
Excursionist
15 2 1

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
Excursionist
15 2 1

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
Tourist
5 0 1

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

Has anyone achieved this?

honeysbadgers
New Member
5 0 0

I get this?

 

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

 

Admin2021
Excursionist
15 2 1

Hi @honeysbadgers 

Lots of us are facing the same issue:

There is a separate thread which deals with this issue:

https://community.shopify.com/c/Shopify-Design/Adding-Shipping-Calculator-which-shows-multiple-rates...

Which explains that there is 'old' code - that displays ALL the shipping options that meet the conditions,

and the 'new' and improved/worse code that just displays the first/lowest

FarmerTony
New Member
1 0 0

Is there any way to make this work in the "Buy Button" version of Shopify? Are there alternative solutions for those using embedded products on another site? (i.e. WordPress or other site?)

JoabeLedran
New Member
1 0 0

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.

Margareth
New Member
1 0 0

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

GardGroup
New Member
2 0 0

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
New Member
2 0 0

Worked like a charm! Thank you so much!