Cart - Add a shipping rates calculator to your cart

TyW
Community Manager
Community Manager
413 40 1107

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)
hugoindustries
Tourist
11 0 8

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
Explorer
56 0 17

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
Tourist
11 0 7

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
Explorer
56 0 17

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

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
Trailblazer
147 1 68

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

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

TAGSAngel
Trailblazer
147 1 68

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
Tourist
8 0 3

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!Untitled.png

 

TAGSAngel
Trailblazer
147 1 68

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
Shopify Partner
47 0 12

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

cart.jpg

D.E.W. L.A. - Web Design
https://dew.la
TAGSAngel
Trailblazer
147 1 68

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

Igor_Souza1
New Member
5 0 0

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

TAGSAngel
Trailblazer
147 1 68

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
New Member
5 0 0
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
Trailblazer
147 1 68

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

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
Trailblazer
147 1 68

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

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

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.