Tutorial Overview:
This advanced tutorial explains how to add a shipping rates calculator to Shopify cart pages, allowing customers to estimate shipping costs before checkout. The implementation differs between sectioned (newer) and non-sectioned (pre-October 2016) themes.
Key Features & Limitations:
Implementation Issues Reported:
Workarounds & Solutions:
theme.liquid before </body> tag instead of vendor.js/theme.jsCurrent Status:
Many users remain unable to implement the free solution successfully. The tutorial appears outdated for newer themes like Dawn 4.0, with ongoing requests for updated documentation or native Shopify integration.
You can do this to display shipping method and the rate. I don’t know how to do the taxes.
Modify the response in the shipping-calculator.liquid
{{#if success}}
{{#if rates}}
{{#rates}}
{{#if @first}}
<br/>
Available rates are:
<br/><br/>
{{/if}}
{{name}}: {{price}}
<br/>
{{/rates}}
{{else}}
We do not ship to this destination.
{{/if}}
{{else}}
{{ errorFeedback }}
{{/if}}
Thanks.
I found my problem. My theme was still on Debut V1. I had to port all my customizations to a new Debut theme and things worked.
As I stated in a previous post, the calculator works great, but for some reason it disables the password protection button on my development site. When I click on the “Enter Using Password” button, my login prompt doesn’t load.
Not a deal breaker, but thought this is odd. Some of the code must be overlapping (my guess the part that goes into theme.js from step 6.).
Is there a way to making calculator this working well in cart drawer/popup?
Hi, I have a sectioned theme. Though I don’t have neither vendor.js nor theme.js under the folder ‘Asset’
So I tried to follow the steps for Non-sectioned theme and everything seeemed to be okay but then there was an error when it’s selceted. Id’ like to follow the right step but not sure which one is for me. If I don’t have those files, theme.js or vendor.js, where should I start with? Thanks for your help in advance!
Best,
Erin
Hello, I’ve implemented the shipping rates calculator and it works perfectly on our stock Debut theme. Only thing is when at the Shopping Cart page, if you adjust the cart quantity up or down the cart will no longer automatically update the total. Anyone else seen this?
@mrkasmith : What theme are you using? I use a modified version of Debut and my cart total never automatically updated, but I have an “Update” button next to the “Check Out” button.
Now, if I do a shipping cost estimation and then change the quantities in my cart, the shipping cost doesn’t change automatically either, I have to press the “Calculate Shipping” button again.
Thanks for the reply, I’m using the most recent available ‘Debut’ version. My duplicated version with the Estimator would not auto update the cart price when I increased the quantity. It does update the quantity automatically with increased with the Original version of Debut. It’s not a problem, I just switched off the auto update feature in settings for the Cart and manually select the Update button. Does that make sense?
Várias tags com erro, não deu para concluir o processo…
Does anyone know if we can configure this calculator to display the shipping prices we set from our settings?
Our current shipping settings are:
1 Pair of socks = $5 shipping
2-3 Pairs = Free Shipping
4+ Pairs = Free Express shipping
Please help.
Thanks
Wasn’t able to get this working without losing menu functionality on mobile
and a css issue with the Collection feature for the main page. Calculated
my rates correctly via UPS, USPS and a category set up for progressive flat
rates based on cart amounts. I’m using the Supply Theme.##-
Please type your reply above this line -##
I set up my shop but I can’t make it “live” as I want shoppers to know what the shipping is before they purchase. I followed all the instructions but it didn’t work. Is there any support to help integrate this?
I doesn’t make sense to have the postage rates after you put in your bank details. In my opinion that will just put people off.
I was able to get this working, we use the Supply Theme. A couple problems we identified was on the Home Page, the “Collection List” became distorted and blocked the Title partially, and the Mobile Menu didn’t work while using a smart phone (Android). Wasn’t sure if anybody else had this issue?
Hey Sarah,
Did you find any solution of this issue? I’m facing the same issue. Please let me know if you have any solution.
Thanks
delete please
I don’t know how to just reply to the whole post as opposed to someone else’s reply post but just wanted to say,
I tried this on simple theme a while back and could not get it to work. I now tried it with supply theme and it works perfectly. ( I even changed the position of where it rendered and the css) There were so many good questions and answers here Thank you everyone!
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.
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
