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

[Igor_Souza1]

Here in Brazil, it's very common to see a shipping calculator that shows
the estimated shipping price only of the currently viewed product, followed
by advice that the cost of the entire order will be presented on checkout.
That's why I'm interested 😄

[TAGSAngel]

on shopify sites? or just in general. I would assume that if on shopify, then there might be a tutorial out there somewhere. 

[Igor_Souza1]

In general. It's kind of a cultural thing to calculate shipping on the product page because shipping costs here are way to high and often prevent the user from completing the purchase.

[TAGSAngel]

Thank you for that understanding.  Here in the U.S. postage is not that high, but people think it is! (Unfortunately with what's going on the the mail right now, it's only going to get higher 😞   So we may soon need it on the product page as well.   However,  with the shipping calculator it's just a quick add to cart to check.   I do understand though, wanting your cart to be part of the regional norm as people get confused.  Good Luck, I hope you find a tutorial or app *reasonably priced* that will do that for you.

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

[slideontheway]

Thank you for information

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

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

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

[Max11]

I have been trying to troubleshoot an issue I have.

I can get the shipping calculations to work fine on my site, but it breaks the predictive search drawer on the cart page.
I have tried an older version of plain debut that I keep for testing purposes and it also breaks the predictive search drawer on the cart page.
I have tried different placements of the scripts but it doesn't seem to help, it also isn't throwing any errors in the dev console.
It seems to be this block causing it (predictive search function works properly when this is commented out) and I can't figure out why.

<script>
theme.strings = {
shippingCalcSubmitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }},
shippingCalcSubmitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }},
{% if customer %}shippingCalcCustomerIsLoggedIn: true,{% endif %}
shippingCalcMoneyFormat: {{ shop.money_with_currency_format | json }}
}
</script>

I then tried a completely fresh copy of debut, and I can't actually get it to function properly using the instructions given (plus the search is broken).

Am I missing something?

[TAGSAngel]

I just ended up getting an app by code black  (shipping rates calculator)

Although it pains me to have to spend money on apps that should be part of shopify vanilla and all themes I need the functionality and after all this time it's not getting fixed or tweaked by the theme developers so....   The only theme I was able to get it to work on properly was supply theme which is ok for 1 of my stores and product lines but not the other.

So....  If you find your'e tired of wasting your time (which also equates to $) trying to get it to work, and you need the functionality to save you from customers not wanting to go through check out to see how much it's going to cost them to ship, then get the app.  It was easy to install and it works fine from what I can see.  I was able to set what I wanted to show (as far as if it says how many days till receipt etc)  and although it defaults to the customers ip location for quoting rates, they can put in a different zip code if shipping to a gift recipient or their office tc.

I do not usually recommend paying for an app when it should be a feature within shopify, but at this point with this issue I'm going out of the norm.

[Max11]

After some thought, I decided to remove the calculator completely for now. My reasoning is that there is a reason why Shopify cart and checkout is set up like this.

Shipping charges are an extra hurdle that can deter some customers, some customers are likely to drop off after finding out the charges.
If you inform a new customer before they begin checkout you will never receive their details to re-engage them after they drop off (aka, you never get their email).

This is probably why Shopify checkout asks customers to fill in their email and details before proceeding to the shipping choice page.
Customers who drop off due to shipping can be re-engaged with an abandoned cart email, you can even then offer free shipping or a discount to try to rewin the sale.

Adding a shipping estimate before checkout breaks the flow designed by Shopify to get details of customers allowing abandoned carts to be won.

[TAGSAngel]

Although your logic sounds good, I personally will not put my email address into anything or create an account just to get a price and I know that lots of people feel the same. 

My old html cart sent me an abandoned cart message whether an email was entered or not and although you cannot engage the customer you can get a clearer view of what items are being abandoned and review those items for weight / shipping prices, descriptions etc to get an idea of the possibilities of why those items are being abandoned.  Is it Abandoned Cart / or Abandoned Check Out?  I'd prefer abandoned cart! 
and if we need to engage and give a coupon for every abandoned cart then maybe we should just post a coupon on the site to begin with. 
Some will abandon purposely to get a coupon code as they think that's the norm (thanks to the shops who have unfortunately changed culture of shoppers with their forever emails of 40% off  etc or the after email.  the customer now thinks OK I'll drop out and in an hour that shop will send me a discount to purchase.  :0(   Silly Rabbit tricks are for kids......   the price is bloated so you can get that discount.  Id prefer to be upfront and let them know what it's going to cost without having to try and re-bait them after the fact. 

BUT.... with that being said, I'm sure shopify can figure out a way to do both, get an email and give a shipping estimate all on the view cart page.  I mean look at the stunning 3d spinning globe they made for Real Time activity <note the sarcasm> (that doesn't even show you where your visitors are until they've actually placed the order)  Such brilliance can be put to better use I"m sure. 

[mayquesouza2]

Hello!

Is there any way to put the shipping calculation on the product page?

[TAGSAngel]

@mayquesouza2   I believe with the logic needed to actually pull a rate from the shipping module an item would need to be added to the cart.  

[chenster]

---

@Max11 wrote:

After some thought, I decided to remove the calculator completely for now. My reasoning is that there is a reason why Shopify cart and checkout is set up like this.

Shipping charges are an extra hurdle that can deter some customers, some customers are likely to drop off after finding out the charges.
If you inform a new customer before they begin checkout you will never receive their details to re-engage them after they drop off (aka, you never get their email).

This is probably why Shopify checkout asks customers to fill in their email and details before proceeding to the shipping choice page.
Customers who drop off due to shipping can be re-engaged with an abandoned cart email, you can even then offer free shipping or a discount to try to rewin the sale.

Adding a shipping estimate before checkout breaks the flow designed by Shopify to get details of customers allowing abandoned carts to be won.

---

That's a very good observation.  However, customers don't like surprises in the checkout process. Usually they want to see the total costs as early as possible. I think it is Ok to list any additional fees, subtotal, shipping option, and free shipping minimum orders. The shipping and handling fee can be noted as estimate only, or at least say "calculated at checkout" to clearly indicate there might be additional charges.  

If not possible to show, provide clear links to shipping rates through the site as customers might want to know before even start shopping. Always offer a free shipping like 'Free shipping over $100' and show much more they need to spend to qualify.

[TAGSAngel]

It is a very good observation and maybe shopify should notice too.   I'm sure they can get shipping quotes and an email all into the view cart page (for all themes) so that we can really see what's being abandoned.  Shopify is giving you an abandoned check out not an abandoned cart so you're really not getting a clear view of how many times items are put into the cart and then abandoned. Seeing what's abandoned from the view cart page would give a much better perspective of what's happening I believe.    

[chenster]

Another observation, the hack does not work with the new Dawn theme in Online Store 2.0 as neither vendor.js nor theme.js exists. 

Another issue is as pointed out by the OP and a few others, the method works on in /cart, not on drawer or popup carts.  

It also would make sense to move the calculator ABOVE checkout buttons since users could easily overlook what's below the buttons.

[chenster]

Are you still using 'shipping rates calculator' app? How did you like it?

[TAGSAngel]

I am still using it.
One of my sites was able to utilize the free code / similar function but the other is on a different theme where that code doesn't work regardless of all the additional code/tweaks to it.

Although I hate having to pay for it (and I think the price is a tad high too) and especially on my "slower store"  The amount of orders still do not justify the expense on this particular site but it's already set up and working so....  Eventually I will most likely play more with the free code to get it to work or ask a programmer friend to work on it, but for the time being I'm still using the paid "shipping rates calculator".  If it were a tad less expensive I would just be ok with it but.... alas  the shopify motto seems to be to increase their income by shortening the features/functionality and then make a percentage off of apps.

I did need to do a few tweaks to wording and features to get the information I need / didn't want to show / not show  where as I think the developer could have made that a little easier to accomplish but I persisted and got it done to the point where it was at least about 80%. (although I don't like all the extra wording as customers often don't read)
One problem being that if USPS quotes 2 -3 days delivery for 1st class mail, we all know that's not going to happen even on a good mail day  and also time quotes do not take production/processing time into consideration so I needed to add a bunch of  "these are estimates - this is plus production time" type of disclaimers. 

I'm not sure what your industry is but you may need to do the same tweaking if you have other than an off the shelf (ships right away) product.

[chenster]

---

@TAGSAngel wrote:
...

The amount of orders still do not justify the expense on this particular site but it's already set up and working so....  Eventually I will most likely play more with the free code to get it to work or ask a programmer friend to work on it, but for the time being I'm still using the paid "shipping rates calculator".
...

---

Ty.Perhaps I'm looking at the wrong  app. Did you mean this app https://apps.shopify.com/shipping-rates-calculator-plus? Did it raise its price? I hope it will work on drawer carts.

[TAGSAngel]

I am referring to that app  at 6.99 a month (along with other apps you need to get a good version of what should really be vanilla shopify) on a slow store really cannot be justified.    This is something that should be included in every theme.  It should not be a paid app so anything really is too much but... 6.99 is a bit much  The most I would justify for this app would be about $3 - 4  but again, it should just be part of regular set up. 

Shopify thinks it's ok to allow app developers to create what their developers should have incorporated in the first place.  Had it been a well thought out platform  or had they included different industries / sellers / salable item types   liaisons in the creation they could've really made a great product. But these days they're more interested in creating things that are unnecessary (like a spinning globe for live view that doesn't even show where your customer is until they've already placed an order)  or adding things like installments (so they can bump up your % by 2+ on payments) then actually fix / implement things that are helpful to increase sales by functionality instead. 
And how about the fact that some financial reports are on UTC and others EST so your numbers don't match  makes for fun reconciliation! 
And Oh yes, lets let USPS quote dates for delivery when they never stick to that schedule so your customer can get angry at you when their package doesn't arrive on time.    naaaaa   I wish they would look at it from a sellers perspective.

I'm sorry, I'm just moaning and complaining now but they keep marketing to my type of seller / industry, yet they don't implement things that are necessary for us nor do they take our complaints / suggestions into considerations.  I see things on the forum being requested / complained about for 3+ years that are not being fixed or even considered.  And then their tech support says they take our frustrations seriously.  ( I dont' think so)

OH and as far as I know, pretty much NOTHING works on draw carts.

[chenster]

Just following up, app In-Cart Shipping Rates it is now available in app store. It displays shipping rates right in the shopping cart. It works on Online Store 2.0 and older themes.

The app gets its shipping rates from zip code resolved from IP address. In addition, the shipping rate estimate can be updated on-the-fly by editing the destination via the autosuggestion input. 

It supports cart page, cart drawer and popup cart. 

Yeap, it's free. Enjoy!

(Disclaimer, I made this app.I've tried hard to support all themes, but it's just impossible to cover them all. Please let me know any issues so I can fix them promptly.)

[TAGSAngel]

Do you know if it works with Simple Theme?

[chenster]

Yes. It works with all free themes including Simple, I tested them all.

[TAGSAngel]

@chenster Do you know if it works with Simple Theme?

[TAGSAngel]

Just from the test store on the app page, I found a problem.  1.  to change location you are not taking zip codes  your requesting city/state names.   Some cities have multiple zip codes which would bring different rates due to rural / city etc.   I typed in New York, NY and it says there are no results  😞    I think you might want to change that to get rates from zip codes instead.

[chenster]

Thanks for letting me know. I did overlook some nuanced use cases and still need to add fuzzy search. Will fix and post back. 

[TAGSAngel]

I'll keep watch,   I did after trying a bunch of things get it to show a rate for "New York City" but no one is going to type that in  they're going to do NY or New York.   Zip codes are the best way to go.
Also, I found that when you choose a city and a rate does come up, the box where you typed the city covers the first rate.  you need to click down in the rate box to get it to go away  (and then it also jumped around with different names)  I think it needs a lot of tweaking but I'm confident and hopeful you'll iron everything out.

[chenster]

Also, I found that when you choose a city and a rate does come up, the box where you typed the city covers the first rate.  you need to click down in the rate box to get it to go away  (and then it also jumped around with different names)

---

Possible for you to attach a screenshot (or even better a screencast)? 

[TAGSAngel]

@chenster  I don't know how to do a screen cast  and when I try to use the snip tool what I'm experiencing goes off the screen so I can't help in that manner.  But I tried to get rates for Massapequa NY (11758)  Although it shows it as a choice, 4 times it said there were no rates for Massapequa.  Then it filled in Massapequa Park (11756)  the 5th time it gave me rates for Massapequa (11758) . Right now it's too quirky for me.  I'll check back when you've done some improvements, but thank you so much for doing this.  When it's working nicely I'm sure it will solve many issues for a lot of users.

[chenster]

Did you choose one of the options from the auto-suggestion? It should only have the those options. 

You can try "RecordIt" for recording screen.  It would worth more than so much than words.   

[chenster]

Quick update, zip code search now is supported! See attached. @TAGSAngel @DabsDesign 

View in example store

Please report any other bugs you found or need additional features!

[tb929]

How would I be able to get this calculator to work with "Local Delivery"?

I only do local delivery. I offer free delivery based on a certain radius and charge for delivery outside of that radius. I'm trying to set this up so that users can check if they are eligible for free delivery or not before they tap checkout.

Any help is appreciated.

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

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

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

[ZaeuneBilliger]

Hi Labeauty, did you find any solution for this? 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 😞

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

[carlyobrien]

Is it possible to add an input for city?  I am adding this code but it is not displaying on the live version. 

    <div class="form-group">

      <label for="address_city”>{{ 'cart.general.shipping_city’ | t }}</label>

      <input type="text" name="address[city]” class="form-control" id="address_city” {% if shop.customer_accounts_enabled and customer %} {{ customer_city}}{% else %} {{ all_text }}{%endif%}/>

    </div>