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

[IamLLIIME]

Is this applicable in Philippines? @TyW 

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

[DabsDesign]

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

[chenster]

Glad you figured out

[pp7]

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]

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.

[ZaeuneBilliger]

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]

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]

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

[DabsDesign]

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.

[carlyobrien]

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]

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

[SR_Author]

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]

Vc programa?

[hugoindustries]

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]

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]

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!

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

[JTorregano]

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

[chenster]

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

[JTorregano]

---

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

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]

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.

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