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)
Zhuangwei
Tourist
3 0 0

I have the same question, when I adjust the quantity of the products in cart, the products disappeared, and a exclamation mark shows below the check out button. Anyone can fix this without infecting the cart products display when we adjust the quantity.

Zhuangwei
Tourist
3 0 0

I'm also using Debut theme, I followed the tutorial and the shipping calculator works, but when I modified the quantity in cart, the products disappeared, I have to refresh the page, and it shows up, do you know what wrong it is ?

mrkasmith
Excursionist
12 0 9

I'm using the Supply theme and this too is happening on our site.  Customers have to manually update the cart after changing a quantity in the cart to see the updated price.

Max11
Shopify Partner
72 4 23

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

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
Shopify Partner
72 4 23

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

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

Hello!

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

TAGSAngel
Trailblazer
147 1 68

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

tb929
New Member
1 0 0

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.

DanAtK3D
Tourist
7 0 1

Did you ever get a fix for this?

 

Mine is doing the same thing

made4Uo
Shopify Partner
1392 209 319

I followed the "Updating older themes to use a supported version of jQuery"  and it works for me. If the first one does not work. Try to change it to the second one. I really do not have an idea what jquery version do I have

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
chenster
Shopify Partner
132 4 20

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

Cartoo
chenster
Shopify Partner
132 4 20

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

Cartoo
TAGSAngel
Trailblazer
147 1 68

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.


TAGSAngel
Trailblazer
147 1 68

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
Shopify Partner
132 4 20

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.

Cartoo
chenster
Shopify Partner
132 4 20

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

Cartoo
TAGSAngel
Trailblazer
147 1 68

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.

DabsDesign
Shopify Partner
17 1 0

Thanks for sharing this piece of code, it's a great improvement to the implementation. So there is the possibility to show all forms of shipping and not just the price. For Brazil, it works perfectly!