Cart - Add a shipping rates calculator to your cart

TyW
Community Manager
Community Manager
404 39 1174

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 131 (131)
kabobmaster
Tourist
4 0 2

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

Thanks.

D.E.W. L.A. - Web Design
https://dew.la
kabobmaster
Tourist
4 0 2

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

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

D.E.W. L.A. - Web Design
https://dew.la
nstipic
New Member
1 0 1

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


3rdmiracle
New Member
1 0 0

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
Excursionist
12 0 9

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

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

cart.jpg

D.E.W. L.A. - Web Design
https://dew.la
mrkasmith
Excursionist
12 0 9

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

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

The-Sock-Goblin
Tourist
5 0 2

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

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

I did it again and it's working! 

No idea why it shows 2 results though.

ship.JPG

mrkasmith
Excursionist
12 0 9

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

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
Explorer
62 0 16
Bikes-Angel
Explorer
62 0 16

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

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
Explorer
62 0 16

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