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

[NomarAdea]

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

Live

Does anyone here experienced this issue?

[slideontheway]

Thank you for information

Wanna ซื้อ บิทคอยน์ with low fee ซื้อ บิทคอยน์

[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?

[cherylfoh]

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]

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]

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

Is this applicable in Philippines? @TyW 

[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?

[honeysbadgers]

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]

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]

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]

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]

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]

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]

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]

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]

Worked like a charm! Thank you so much!