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

[kabobmaster]

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}}

[ogeid]

Thanks.

[kabobmaster]

---

@GoodFy_Brasil wrote:

---

@kabobmaster wrote:

I have not been able to solve this. I am currently using Shopify's Debut theme. I had a Shopify expert help me but they did not get it working. All they did was place all of the github code in the cart-template.liquid

When the button is pressed, it displays "Calculating..." but returns without results and the button text reads "Calculate Shipping" again. 

Also it might be helpful to note that I am using a shipping calculator app called Intuitive Shipping. I was also using Advanced Shipping Rules prior and with both shipping apps the calculator would not work.

---

Ok ... I will try this in DEBUT Theme ...

If you watn you can share me an admin staff account so I can take a look in your store .

My email is william@beautylet.com.br

Best Regards 

---

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.

[ogeid]

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

[nstipic]

Is there a way to making calculator this working well in cart drawer/popup?

---

[3rdmiracle]

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

[mrkasmith]

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?  

[ogeid]

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

[mrkasmith]

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?

[mohmoustafa]

Várias tags com erro, não deu para concluir o processo....

[The-Sock-Goblin]

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

[mrkasmith]

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 -##

[boobiebu]

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.

[boobiebu]

I did it again and it's working! 

No idea why it shows 2 results though.

[mrkasmith]

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?

[martuza]

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

[Bikes-Angel]

delete please

[Bikes-Angel]

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!

[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