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

[hugoindustries]

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]

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!

[DifferentDogs]

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]

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

[lauramachado9]

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!

[TAGSAngel]

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]

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

[TAGSAngel]

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.

[alibabyph]

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!

[TAGSAngel]

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]

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

[TAGSAngel]

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

[Igor_Souza1]

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

[TAGSAngel]

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.

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

[mak143]

Hi There,

Do you know where to modify the code so that it picks up the suburb as well? I am using BESPOKE SHIPPING to calculate live rates and as the live rates also depend on the suburb, the shipping calculator does not calculate the live rates. 

[Martin_S]

Hi,
I´m using Narrative theme and the calculater appears, looks pretty good but does not calculate anything. It seems that it doesn do anything, not even an error message. Does anybody know, what the problem could be? Does anybody tried it with Narrative theme?
Second question: Is it possible to have only the country-field and leave the zip-field? We configered our shipping costs equal for all regions in a country.