Shopify Tutorial: Making Sure a User Agrees to the Terms & Conditions Using jQuery
Shopify Tutorial – learn how to implement a checkbox on your cart page that forces customers to agree to your terms and conditions.
In this tutorial, I will be walking you through how to prevent users from going to the checkout page unless they have agreed to the Terms and Conditions using jQuery. We’ll be doing this by adding a checkbox to the cart page, which if checked, will allow the user to go the the checkout page. If it’s not checked, an alert box will be shown, and the user will be prevented from going to the checkout page.
You can see an example of this here. You’ll need to add a product to the cart first, though.
1. Adding the checkbox in cart.liquid
In Template Editor, open cart.liquid. Enter the following code – this will insert a checkbox and a label to your cart page. Please make sure that the ids of the checkbox and the label are the same (I named mine “agree”).
The location of where the above code goes will depend on how you want to style your cart page, but it can really go anywhere within the cart.liquid template. In my case, I’ve placed the checkbox and its label directly above the checkout button. Here is what my cart page looks like:
2. Wrap your checkout buttons with a div with a unique ID
The next thing you want to do is wrap the buttons for checking out (this includes the regular checkout buttons as well as any other buttons added by Paypal or Google Checkout) with a special div so that we can target all checkout buttons in our Javascript code. This step is very theme-dependent, so if you’re unsure about anything please make a post on the forums.
As an example, your theme’s cart template might look like this:
{% if additional_checkout_buttons %}
{% endif %}
What you want to do now is wrap is in a new div, and give it a class called “submit-cart” (shown in red below). This class name is used for the jQuery script that we’re going to add in the next step.
{% if additional_checkout_buttons %}
{% endif %}
3. Insert the jQuery code
The last step is to add the jQuery code that checks to see if the checkbox has been checked or not. In your Template Editor, create a new snippet, and name it “terms-and-conditions”.
Next, copy the code from this gist, paste it inside the “terms-and-conditions” snippet, and hit save.
Finally, in “theme.liquid”, place the code below right before the closing </body> tag.
{% include 'terms-and-conditions' %}
Once this code is in place, your customers will not be able to proceed to the checkout without having checked the “I agree” checkbox. If they don’t have it checked, they will be shown a Javascript alert box instead of being taken to the checkout page. This code will work even if you have additional buttons for checking out (Paypal, Google Checkout).
Conclusion
This may be a bit bothersome from a buyer’s point-of-view, but from my understanding some places have laws that make it imperative to have an “I agree” checkbox when buying products online.
Hope that helped, ’til next time!
UPDATED: June 18th 2012 to make it easier to implement.
124 Comments
Nice write-up Tetsuro!
I had to do this a few weeks ago for a client. Mine was a bit trickier though. This could only be present in the cart if 1 certain item was present, which required a three month recurring charge commitment. It also had to allow for a combination of that item plus other items. So I added a conditional to the class name on the checkbox for jquery to hook that would change depending on IF that one item was in the cart or not.
Thanks for the tutorial Tetsuro. Nice job!
This is beautiful jQuery code. It could not be any better. Lovely. Vert good tutorial. All details in place, very clear. Pretty too. Fun.
Aaaaaahhhhhhh.
Jamie: Cool thanks! Man, that does sound a bit tricky. I guess you just used an if-statement that would output the checkbox only if the {{ item.product.title }} matched that of the specific product eh?
Gavin: Thanks! Would you recommend using noConflict mode for all themes? I typically write jQuery code normally (with the $), but perhaps this is bad practice… I did mention noConflict mode in my write-up though :)
Caroline: Thanks Caroline! I’m actually not very good with Javascript, so your comment was very reassuring :)
> Would you recommend using noConflict mode for all themes?
Definitely.
I guess you just used an if-statement that would output the checkbox only if the {{ item.product.title }} matched that of the specific product eh?
Exactly! Not tricky really.
Tetsuro,
Brilliant Jquery – altho I did stuble on the id=”checkout”, eventually figured to put that in my cart.liquid file, right after name=”checkout”.
I presumed it would just work – which it almost did. Had to use the no conflict script, but hey – it’s great.
Thank you for taking the time to write a nice, simple to follow set of rules, for us newbies!!
hi tetsu, great tutorial and thanks for sharing. I installed it on http://www.swingcity.me and it works but it changed the checkout layout. you can see the screenshots here: http://picasaweb.google.de/swingcheese/FreePixs?feat=directlink
it’s not too important but maybe you know a solution.
thank you in advance and best regards from berlin,
philippe
Hey there Philippe, greetings from Ottawa :). I think I know exactly what’s going on here. From what I see from the two screenshots, it looks like the code that you inserted (which I wrote in jQuery) is conflicting with the MooTools script that you are using for the multiple options dropdown.
To fix this, please use the noConflict mode script that I have above, instead of the first script. This should make it so that my script won’t make the MooTools script for multiple options go bonkers.
Let me know how that goes!
hi tetsuro,
yes it works like a charm now! thank you.
Thanks Tetsuro!
Adding in
jQuery.noConflict();
jQuery(‘#checkoutButton’).html(”);
Please enable Javascript to proceed with checkout!
your shoppers have to enable Javascript before actually even being able to submit.
*ups* – long time no HTML post :/
Just drop me a mail for the source :)
Hi Stefan, hmm I’m not sure if I fully understood your comment. Are you trying to check if the user has Javascript enabled?
Thanks for reading!
Hello Tetsuro:
I am having problems with getting the pop-up to well pop-up if the box is not check. I have uploaded the code I am using and where I placed it. If you could help at all I would appreciate it. Im stuck, big time.
http://i124.photobucket.com/albums/p32/graphicmaniac/themeliquid.jpg
http://i124.photobucket.com/albums/p32/graphicmaniac/cartliquid.jpg
Thanks so much to all of you!
Does anyone have any feedback they can supply to me? I researched over the weekend and am still not getting the checkbox to work. Please help!! I appreciate it very much.
Hi Mandy,
Just took a look at your site’s source code, and it doesn’t look like you’ve inserted the jQuery framework (step 2-3), as well as the Javascript code (step 5). Both of these are required in order for this to work.
Please go over the steps again and let us know how it goes.
Hello,
I can not install this fonction. it doesn’t work.
Perhap’s I miss something.
1st thing I still have the jquery-1.3.2.min.js
It was include in the theme.
I have the Reconfigured templates.. .Perhap’s it’s the reason why…
I did add the checkbox in cart.liquid= OK
I didn’t add this code cause it was still in my theme:”{{ ‘jquery-1.3.2.min.js’ |asset_url | script_tag }}
”
I did replace:
»
by
»
(I add # at checkout)
I had try with the noConflict mode too…
If I put # before checkout nothing happened except a refresh…
If I take of the # in the cart.liquid I’m in the checkout page…
I had try to change the js file name as jqueryalert.js…
Same problem…
Can some one help me?
hey Marco, can you post the URL to your store? Maybe looking at your source code will help me figure out what’s going on.
Cheers,
Tets
Hello, I came across this blog article while searching for help with JavaScript. I have recently switched browsers from Chrome to IE. Now I seem to have a issue with loading JavaScript. Everytime I browse page that needs Javascript, my computer freezes and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix the problem. Any help is greatly appreciated! Thanks
This is great, but not quite what I am trying to do. I actually need to require a number in a textarea. How do I alter this to require the text field to not be empty and to be a numerical entry?
Yo Kevin. Instead of checking for a checked checkbox, which the answer is either yes or no, you want to look at the value of a text field input.
So looking above at Tetsuro’s example at the top of the page, you need to replace his live 5 with this:
if(jQuery(‘#kevinsNumber’).attr(‘value’) == null){
So that will look at your input with an id=kevinsNumber, and see if it has a value. If it does, then it will continue and submit the form on the next line. If not his code pops a js alert.
If you wanted to make sure the number was at least “3” or whatever, do this:
if(jQuery(‘#kevinsNumber’).attr(‘value’) >= 3){
Peace out. Hope that helps ya.
~ brent
Cool Tetsuro. A few comments:
Grabbing the submit event would make the func fire on BOTH the click AND ‘enter’ key press.
example: jQuery(“#checkout”).submit(function(){
Also, Kevin, revisiting that input value, I think I would look for the value of the field instead of checking for null. Like this:
FOR EMPTY if(jQuery(’#kevinsNumber’).val()==”){
FOR A VALUE if(jQuery(’#kevinsNumber’).val()>=’3′){
cheers,
~ brent
Great tutorial!
Do you by any chance also have one on how to insert a logo to the Minimify theme?
That would be really helpful too.
Mette
Thanks for a great tutorial!
I do have a problem though. The checkbox is there but not checking it does not cause a pop up. I followed the steps and read the advice above – any clues for me?
I’m completely new at html and would appreciate any help!
My store is http://shop.endomondo.com/
Thanks!
Mette
Btw, I solved the logo thing.
I have followed the instructions, but I am still having an issue. When you click on the go to checkout button, it just refreshes the page, no pop-up or anything. It doesn’t matter whether the boxed is check or not.What should I look for in solving this issue.
Thanks
CJ
Brent: Thanks a bunch for your help and input. Do you think it’s a bad thing if pressing ‘enter’ calls the function as well? Personally I think it’s okay to leave it as is because some people may choose to tab into the submit button and push enter.
Mette: Sorry I couldn’t get back to you sooner, but good to know you got your logo working. It seems like the cart page is working as well. Please let me know if you need any help.
CJ: Strange, it shouldn’t be refreshing anything. Can you post the URL to your store? Thanks.
Hi Tetsuro,
Many thanks for the tutorial. It is working brilliantly with most browsers on our shopify site – except with Opera which happily lets you checkout whether you check the box or not. (I’m currently testing with Opera 9.2). Anything I can add to the script to get Opera to work? (I tried both scripts and both fail with Opera).
Many thanks
Thanks so much for this. I have a lot of liability and need to have customers select this option!
I’m new to all this however, and can’t seem to get it to work. I think adding the # sign is the most confusing part. The Agree box has shown up, but I’m still able to go through the checkout without it checked.
Also, curious, where to add the text for the terms and conditions? That should be a link for another pop-up, yes?
Thanks in advance,
Laura
Thanks for this Tetsuro! I am launching my site next week and I needed this functionality built in. I was able to add it to my site in less than 20 minutes following your step by step guide.
It’s not often I find a useful 2 year old post on anything tech related…
Hey Tetsuro,
Thanks for the tutorial. Is it possible that this won’t work if there are other jQuery scripts running on the cart? For example my store has a jQuery script for a “gift” box that, when checked, generated additional customer input boxes. Will adding another checkbox complicate this? Thanks
Dan
Yep, that shouldn’t be an issue. However, if you’re using noConflict mode for your other scripts, make sure the script from this tutorial is in noConflict mode as well.
David: thanks! I’m glad you found it useful!
Hi Tetsuro,
Great script! This is (almost) exactly what I need.
If I combine some of your script with “Gift wrapping” (by Caroline Schnapp) I might be able to insure that our costumers
1) will add packaging
and
2) wont be able to remove it?
I was thinking about hiding the check box and making it “pre checked” – is this even possible?
Anyways, GREAT tutorial :-) Easy to understand and very well written.
Our page is http://www.cckis.dk
Thanks :-)
Oi, I figured this one out myself :-) I works perfectly. So thankfull for this script.
/Christian O
Hi,
I’ve following problem:
I installed everything following the instruction, but now it gives me always an alert box – whatever I do. For example, if i’m adding a product to my cart it also tells me “xxx was added to your shopping cart / with an ok button”.
Any solution here?
Great tutorial, got it installed quickly, with only a minor bug I’m curious about. The script runs when the customer clicks on the “Update Cart” button as well, which isn’t catastrophic, but is confusing. If they check the box, update their cart, the checkbox returns to un-checked. Again, not catastrophic, but confusing. Any thoughts on a fix?
Best,
Andrew
Birgit and Andrew: It sounds like an issue with the jQuery selector. What are your shop’s URLs?
http://www.blackstarchocolates.com Thanks for taking a look!
Hey tetsuro this is great!
I’ve been looking for this scrip for a while, glad i came across to your site.
I do have a small question, how do you remove or change the “this page at http://ABCD.myshopify.com says” on the pop-up screen?
I would rather to have my primary domain name shown, other than the shopify one.
Once again thank you for your time and love your work!
Regards,
Mr.Piggy
Hey Andrew, it looks like all of your products are sold out, so I can’t test out the cart page :(
Hey Mr. Piggy, I’m actually not too sure which popup you’re referring to. Can you point me to a specific page that’s showing that popup?
hey Tetchi,
Great tutorial, thanks for this.
Mine does not appear to be working. Would you be able to take a look?
It might be that I have added 2 checkboxes?
Or that I have done something wrong with naming the id as checkbox (I didn’t understand that part fully)
thanks for your help
Rachel :)
Woo hoo!
A question with a long history. Great to read it all – sad to say I’m so inept I can’t make it work…
I think I’m having a problem with the id input but not really sure!
Got the check box up which was great but, then…
Any help greatly appreciated!
Hey Rachel, Brendon – shoot me an email if you’d like a hand :)
Excellent post… worked straight away!
Really needed this to work in order to use SagePay and 3D Secure (UK).
Thanks!
Hi guys, I’m having the same issue as Andrew.
The script runs when the customer clicks on the “Update Cart” button as well. Could you please help me resolve that?
Also, the check box is appearing above the text and not in line for me and not sure how to fix that.
Thanks in advance!
Hi,
thanks, this was really helpful.
I seem to have the same problem as Mette, I don’t seem to get the checkbox to work. It takes me to the next step both with and without a checked box.
It would be helpful if you could email me the whole section from theme.liquid to see if I have placed this wrongly in the section as I am no programmer…
I also need help on how to include a link to the actual Terms and Conditions in the cart, since they only appear on the next page (and its required that people actually can read them to accept them). This can be a separate popup page – have no clue on how to create this…
Thanxs a lot for your help!
Evy
Hi Tetsu,
Many thanks for your script and instruction. Followed all steps and it didn’t work, then reverted to using appropriate first 4 steps and used No Conflict version at step 5, and all seems to work now, Great stuff, thanks
Cheers
sean
hey sean, shoot me an email tetsuro at shopify.com, I’ll see if I can help you out.
Thanks this really helped me.
If I have set up the checkbox so that it only shows when products with a certain tag are in the cart, how would I change the jQuery script so that it only works when the checkbox exists?
At the alert comes up even if the checkbox isn’t showing on the cart? (I tried adjusting the script but my javascript & jQuery skills are not good enough to get it to work).
Any help would be appreciated.
Cheers
Raph
Hi,
I am experiencing the same problem as Andrew and Jake.
Is there any solution for that?
thank you,
e
Tetsuro,
Excellent Tutorial.
A few Questions Please:
1.
Checkout Buttons Displaced on Cart Page After Adding the Code:
I followed your tutorial – but my Checkout Page now looks like this:
http://bit.ly/LsrCXG
Any suggestions on how to correct the code to make all the Buttons look spacial-y correct again?
2.
Checkout with PayPal Button:
I need to also make sure that if the customer selects the “Checkout with PayPal Button” that the customer is also required to put a check-mark in the “I agree to Terms” checkbox.
Currently, if they choose the “Checkout with Paypal” Button, they are allowed to completely by-pass the “I agree to Terms” Check Box and proceed straight to the Checkout page(without having to click the Checkbox).
Is there some Code that I can add that requires Customers to Also have to put a check-mark in the Checkbox – before they are permitted to proceeed to the Checkout page – when they select “Checkout with Pay Pal” Button?
3. How to Make the Text Following the Checkbox a LINK to the actual “Terms”:
Is there a way to make the “I Agree with the Terms” text – that immediately follows the checkbox – a LINK to the actual “Terms” page?
Making this text (after the checkbox) LINK to the actual “Terms” – would enable the Customer to read the “Terms” before s/he checked the checkbox.
4. Do I need to also use the “NoConflict” Script?
Like Maximilliano (above in the Comments) I added id=”checkout” to my cart.liquid file, right after name=”checkout” .
However, Unlike Maximilliano, I did NOT use/implement the “NoConflict” Script – but instead just used the “Standard” script that you first recommended in the tutorial.
So, do you suggest I go back now and implement/use the “No-Conflict” Script – or is it OK for me to just stick with using the “Standard” Script that I did implement?
For instance, might the “No-Conflict” Script improve anything (like make the “Checkout Buttons” appear spacial-y correct on the Cart page)?
Much Appreciated,
Sanford
Awesome rewrite, Tets! Thank you for taking the time!
Thanks Caro! You da best!
Thank you Tetsuro;-)
And a very nice deed to make the instructions even easier to implement.
Oliver
Thanks for the Tutorial, very slick and easy to follow. One problem though, it works fine for me in IE for me, but can’t seem to get it to work in Chrome or Firefox? I’ve checked with firebug and view source..JS/Jquery is in the header and the div is wrapping the proceed to checkout button.
Any thoughts?
Cheers
thanks I got this working now!!!! very helpful!!
So in case anyone has the same problem, I got it all working, followed your steps in the other blog( http://blog.tetsutakara.com/593/ )? and used the noConflit script.
I am code-challenged and having trouble. Is anyone willing to do this for me? I do appreciate :(
Sure Maggie, I’ll get it for you! :-)
Worked perfectly! Thanks so much for the tutorial.
For those of you having trouble with the “update cart” button needing to have the check box checked to function, this is what worked for http://www.vedgecandle.com
Put the code from step two around each button (Vedge Candle uses the regular checkout and PayPal) separately instead of wrapping the whole mess. I’d recommend checking your code again and if the “update cart” button is inside the the … then get it out! The screen shot for step #2 shows it inside the code, which may be causing some of these problems. That said, there may be a reason I don’t know for why it’s in there, but this is what worked for us.
Also, html code (text) should work fine to link the “Terms and Conditions” text from step #1 to where ever you want it to go.
Thanks so much again!
Hi – need an ‘agree to T’s & C’s’ checkbox added to my cart – help someone please? I’m also code challenged.
Thanks so much
Hi !
What a great tutorial !
I’m trying to follow your tutorial. I’m totally new in liquid and already completing step one in the tutorial I’m stuck. I hope you can give me a hint on this..
I’ve have completed step 1. Adding the checkbox in cart.liquid – this is easy however the “I agree with the…”-text conflicts with my checkout button.
How do I make it look nice layout-wise? I guess this is very basic..but how do I add som line spacing before and after? Can you give me a clue?
Thank you :)
All the best from Copenhagen
Hi Tetsuro,
We are so happy to have found this tutorial which enables us to add the “I agree” checkbox (a legal requirement here in Germany)!
A couple of questions:
1. How/where we can resize the font of the “I agree with Terms & Conditions” text?
2. Also, we’d like to have the whole text in one line, not split into 3 rows.
I guess if we try to adjust the padding or the margin (?) of “.cart_table tr td” in the style.css, that should do the trick, right?
Many thanks in advance!
Regards,
Andrea
PS: We are using Jitensha Theme – and love it!
Hi This is a very helpful blog I wanted to add an agreement checkbox on my checkout page but I want it for a specific products or collection only I have been reading through and you can do that by doing if on {{ item.product.title }} but I am not an advance programmer and I just started learning it can please show an example, thank you this would be very helpful
Needed this for a client’s site ourselves, outstanding! Worked like a charm, great work! Thank you!
Hi! So happy I found your tutorial. I am using the new standard theme and followed your instruction, but unfortunately I am able to continue the check-out process without checking the terms and conditions box?
I am a coding beginner, so any help is highly!!!!! appreciated…
Regards,
Roman
Thanks, I’m not a programmer and run a small business. I have never done anything like this before your tutorial made it happen easy, first time. Geoff
Followed the tutorial and it worked – sort of: When I click the checkout button, I get the message telling me I need to agree to the terms, but when I click OK in the message box, I am taken to the checkout page.
This is sweet – thanks Tetchi!
This worked brilliantly – thanks a million!
Great info but I am trying to let this work on the top menu of Shopify. Like: making – I agree…… – visible just beneath the menu links -, visitor needs to check and if not, visitor is not allowed to use the menu item links. (not allowed to see info) Is this also possible with your solution? See in script:
jQuery(document).ready(function(){
jQuery(“.submit-cart input[type=’submit’],.submit-cart input[type=’image’]”).click(function(){
if(jQuery(‘#agree’).is(‘:checked’)){
jQuery(“.submit-cart input”).submit();
}
and understand this should be changed. Any hints or ideas. Thanks again for the info.
Kind regards.
Worked straight out of the box, and the tutorial was easy to follow. Thanks!
Would it be possible to change the formatting of the box if the script returns a “fail”?
I’m thinking that if the customer forgets to check the box initially, and receives the error-pop-up, the box and text would then be highlighted (e.g. red color) to show the customer where to go next…
Thank you for this nice and easy tutorial!
However, I have some difficulties to implement the last step. I do not understand where to put the code in the theme.liquid. Everywhere I tried it, the shop gave me the error message, that it could not find the snippet.
So, the checkbox appears, but you can go on to check out, wheather it is checked or not.
Could you maybe take a look at the code if I send it to you and tell me, maybe by marking the spot, where to put it?
That would be great!
Sadly I have no idea about code, I’m following blindly.
Hey Julia, try looking for the closing </body> tag instead, and placing the ‘include’ right above it. So it’ll look like this:
{% include ‘terms-and-conditions’ %}
</body>
As a non-programmer may I thank you from the bottom of my heart for doing a tutorial that a non-geek can understand. I just tried following your instructions, and it just worked. THANK YOU!
@Lise thank you so much for the kind words! Glad it worked! :)
I can not get the last code to work in the theme.liquid can you please show me where in the script it should go. I got the first step down and that is there. I just need the other step to work.
Hey Melissa, try looking for the closing tag instead, and placing the ‘include’ right above it. So it’ll look like this:
{% include ‘terms-and-conditions’ %}
Thank you so much for this tutorial managed to do it. Struggled a bit when I placed the snippet in originally I put terms and conditions then I noticed the dashes in between. Sorted!!! Now I am trying to link terms and conditions information to this button. Any ideas would be great!
Thank you so much I still don’t understand how you come up with compter codes.
Hey Lisa! I’m glad I could help :)
> Now I am trying to link terms and conditions information to this button.
By that, do you mean you’re trying to add a link to your T&C page in the label for the checkbox (like this: http://take.ms/V4vSC)?
Yes exactly that, so if they want to look at the terms and conditions, they can do so easily.
Hope this makes sense.
Thanks for getting back so quickly.
That’s easy enough! Instead of this:
<input type=”checkbox” id=”agree”/>
<label for=”agree”>I agree with the Terms and Conditions</label>
do this:
<input type=”checkbox” id=”agree”/>
<label for=”agree”>I agree with the</label><a href=”/pages/terms-and-conditions”>Terms and Conditions</a>
… where “terms-and-conditions” is the handle of your T&C page.
Cheers :)
tetchi
Hi,
Have tried that but the text and the box are coming up separately and even though I have put my handle in for my terms and conditions page it is bringing up 404 error.
Please help, Thank you!
Hey Lisa, can you clarify what you mean by “coming up separately”? Do you have a screenshot you can show me? Also for the 404, make sure the handle of your T&C page matches up with the handle in the code.
Hi, Sorry I’m being a pest now. Here is the screenshot.
http://snag.gy/DNzVs.jpg
What I would really like is in this screenshot I would like the terms and conditions to be highlighted and just be able to click on that to take you to my terms and conditions page. Any chance????
http://snag.gy/O415P.jpg
Thanks Lisa
Oh still not working when I put my terms and conditions handle in. Also the original code you sent me isn’t the same as in the blog. When I wanted to put it back to how it was I copied and pasted the code from the last mail you sent me but it didn’t work so I had to go and copy it from the original blog. Hope this makes sense.
Hey Lisa, the code I pasted should do that already – it simply contains a link to /pages/terms-and-conditions, where ‘terms-and-conditions’ is the handle of your page.
Hi, Thanks for all your help, managed to do it by keeping the original paste and adding the link manually. Works now, thank you so much!!!!
Lisa
I am trying to add this to my shopify website with the radiance theme. My code is a little different on the cart.liquid page and I cannot for the life of me figure out where to put:
Everywhere I seem to place it will not let me add:
Customers can check out without having to check the box and no popup comes up. Please help I would love to add this to my website.
Hi,
I put mine in between cart subtotal and estimated shipping. Hope this is of some help.
Regards,
Lisa
Sorry that does not help. My last post should have read like this. I dont know why the code didnt show up:
(I am trying to add this to my shopify website with the radiance theme. My code is a little different on the cart.liquid page and I cannot for the life of me figure out where to put:
Everywhere I seem to place it will not let me add:
Customers can check out without having to check the box and no popup comes up. Please help I would love to add this to my website.)
The code still isnt showing up. Let me try this again:
(I am trying to add this to my shopify website with the radiance theme. My code is a little different on the cart.liquid page and I cannot for the life of me figure out where to put:
Everywhere I seem to place it will not let me add:
Customers can check out without having to check the box and no popup comes up. Please help I would love to add this to my website.)
I dont understand why I cant add the code to this post to show you guys? Every time I post the code disappears?
These two
div class=”submit-cart”
/div
It doesn’t looks like you can type in HTML here. Try using Pastie (http://pastie.org/) and link to your code snippet through that (I’ll see how I can enable HTML in comments when I get a chance).
Ok here is my cart.liquid where would I paste the submit cart and div?
Shopping Cart
{% if cart.items == empty %}
Your shopping cart is empty. Check out our catalog to see what’s available.
{% else %}
Item
Price
Quantity
Total
{% for item in cart.items %}
{{ item.title }}
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains ‘/uploads/’ %}
{{ p.last | split: ‘/’ | last }}
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
{{ item.price | money }}
{{ item.line_price | money }}
Remove
{% endfor %}
{{ cart.total_price | money }}
{% if settings.allow_note %}
Add a note for the seller…
{{ cart.note }}
{% endif %}
{% if additional_checkout_buttons %}
Or check out using:
{{ content_for_additional_checkout_buttons }}
{% endif %}
{% endif %}
That did not work either. Shoot!
Hi Lisa,
How did you manually resolve the problem of linking the T & c to a page? i had the ‘404’ issues as well.
thanks Fran
Tetchi,
BTW this is the best tutorial yet on shopify. Kudos!!!
Fran
Ok here is a link to a screen shot I took of my code. Maybe you guys can help by seeing the code in the photo
http://applied-graphics.net/images/shopify%20cart%20code.jpg
Hi Fran,
This is what I put in,
I agree with theTerms and Conditions
Hope this helps,
Lisa
Hi Fran,
Thanks for your response. What I actually mean is, how did you make the “terms and conditions” bit hyperlink back to your t&c page?
Many thanks
Fran
Sorry Fran,
Tried to answer you late last night and pasted in what I had put on mine, didn’t work, so here is the code I put in mine and it worked after that. I did type some of it manually and didn’t paste it in.
I agree with theTerms and Conditions
You have to put in your handle though for your terms and conditions page, mines is terms-conditions you can see that I’ve put it after pages/. Hope this works, I’m no expert and I have typed it out so hopefully I’ve not missed anything small.
Good luck
Lisa X
Hi Fran,
It won’t let me type out the code. It keeps just highlighting terms and conditions. You can email me at info@housekeepingstore.co.uk and I’ll mail you back.
Hi Tetchi
This is exactly what I need for an ‘about-to-go-live’ Shopify store. However, the checkbox appears but with no label text showing (I haven’t altered yours, just copied pasted).
As a total newbie, perhaps I don’t know something obvious to most? The checkbox appears in the place I want it, but is a box with no text next to it!!
I haven’t put the final bit of code in the theme.liquid page yet as I guess I should get this bit right first!
Thanks for any help. It’s great to find this sort of thing so easily, excellent resource.
Phil
Further to the above … I have a work around, which is basically putting the label info that I want to show (including a link) right after a dummy label which doesn’t show up as far as I have tried on Safari (Mac and iPad) or Firefox, but may do on another browser one day.
I have substituted the html brackets for normal ones () in the hope it shows the code here:
(input type=”checkbox” name=“agree” id=”agree” /)
(label for=“agree”) *Yes,(/label) I agree with the (a href=pages/terms-and-conditions target=“_blank”)Terms and Conditions(/a)
Which on my site just shows the checkbox, followed by:
I agree with the Terms and Conditions
Thanks again Tetchi, perhaps this will be useful for anyone else who has the same ‘no label showing’ issue I have had.
ok I still need help with the code on my page. I have tired putting the terms and conditions in several spots in the cart code and it shows up when the customer removes and item from the cart instead of before they can add one. my page is http://www.wholesale-furniture-co.myshopify.com can someone please help.
Trying to do something similar to this – but NOT related to checkout. The textbooks for our college store are outsourced, and so we don’t list them in our Shopify store. Instead, we link out to our outsourced vendor’s affiliate page. We’d like to present a page in Shopify with some standard disclaimer text, require the customer to check a box that they understand, and then have the button/link take them to the other site. Suggestions?
Hi Tetchi,
I have included the code in my website. It seems to work very well, but I have two little quetions here:
1. How can I manage to have the checkbox aligned to the right, just on top of the actual button (as on your example)? It always aligns to the left and there it seems a bit lost.
2. I did not understand how to create the link to my “Terms & Conditions” page.
I would be greatful for help here.
Otherwise, great great tutorial! Thanks so much.
Johannes
Works beautifully!!! Thank you for this quick and straightforward tutorial. Very much appreciated.
Your tutorials are always very helpful! Thanks for taking the time to be clear, so technophobes like us can feel proud of ourselves! Lol!
Fran
Tetchi, many thanks. I used it on http://www.pokloni-zdravje.si and it works.
Works perfectly, just what I was looking for – thank you so much!
very nice tut. I’m gonna implement this in my magento site.
Thank you so much!!! :D
Hi Tetchi,
Thanks so much for the great tutorial! You nailed it better than official Shopify forum! As a person not very comfortable with web programming, however, I can’t still figure out how to make your script work only for a certain product. Someone mentioned using “if statement”, but how the hell would you combine these two?
I would really appreciate your advice!! Thank you!
The click event wasn’t registered for me, so I also got the same problem as many have reported that not checking the box allowed you to proceed. After some debugging, I think that the jQuery(document).ready handler is executed when the Add to Cart page is up, but the Checkout button somehow wasn’t isn’t loaded that that moment, so the event handler is probably never attached.
I am using the default shopify jquery in my themes.liquid:
{{ ‘//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js’ | script_tag }}
I follow the example from:
http://stackoverflow.com/questions/5540561/jquery-click-event-not-firing
and change this example to use instead of:
jQuery(“.submit-cart input[type=’submit’],.submit-cart input[type=’image’]”).click(function(){
to:
jQuery(document).on(‘click’, “.submit-cart input[type=’submit’],.submit-cart input[type=’image’]”, function(){ // this works
This attach the handler to the whole document, not the most efficient, but that worked for me as a workaround.
I have the same questions as Johannes. Is it possible to update your post to include these instructions? Thanks.
I have the checkbox working on http://www.organicfamily.co just needs to be right justified and have a link to the Terms and Conditions page.
Hi Tetchi,
Thank you for this tutorial.
Anyone knows any workaround for Amazon payment button?
Thanks
Thanks! Works great in the Shopify Minimal theme
@Shane
Here’s the code that I used. Should help you format yours.
I agree with the terms and conditions.
Tetchi,
Thank you so much for this workflow. I have gone through and added the entire content and am able to get everything to work except the Paypal button.
I have wrapped the checkout buttons in div code but the PayPal button allows you to bypass the script.
additonally my pop up is not as nice as yours that you show. testing on google chrome web.
Any suggestions would be amazing. This will help me reduce the number of returns this year.
Cheers.
Thank you for the tutorial.
I am a novice to Shopify. I have a custom requirement to have 1 to 3 checkbox on the checkout page. When a user chooses any of it, 1% discount should be applied to the cart.
Please suggest your ideas or code snippets to achieve this.
Thank you,
-Gideon