tetchi blog

Tetchi's blog about life and stuff

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

- or -

{{ content_for_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 %}

- or -

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



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.


  • Jamie
    Jamie on November 9th, 2009

    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.

  • Gavin Terrill
    Gavin Terrill on November 9th, 2009

    Thanks for the tutorial Tetsuro. Nice job!

  • Caroline Schnapp
    Caroline Schnapp on November 9th, 2009

    This is beautiful jQuery code. It could not be any better. Lovely. Vert good tutorial. All details in place, very clear. Pretty too. Fun.


  • admin
    admin on November 9th, 2009

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

  • Gavin Terrill
    Gavin Terrill on November 9th, 2009

    > Would you recommend using noConflict mode for all themes?


  • Jamie
    Jamie on November 18th, 2009

    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.

  • Maximilliano
    Maximilliano on November 18th, 2009


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

  • philippe
    philippe on November 20th, 2009

    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,

  • Tetsuro
    Tetsuro on November 20th, 2009

    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!

  • philippe
    philippe on November 21st, 2009

    hi tetsuro,
    yes it works like a charm now! thank you.

  • Stefan
    Stefan on November 24th, 2009

    Thanks Tetsuro!

    Adding in


    Please enable Javascript to proceed with checkout!

    your shoppers have to enable Javascript before actually even being able to submit.

  • Stefan
    Stefan on November 24th, 2009

    *ups* – long time no HTML post :/

    Just drop me a mail for the source :)

  • Tetsuro
    Tetsuro on November 24th, 2009

    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!

  • Mandy Stos
    Mandy Stos on December 18th, 2009

    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.


    Thanks so much to all of you!

  • Mandy Stos
    Mandy Stos on December 21st, 2009

    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.

  • Tetsuro
    Tetsuro on December 21st, 2009

    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.

  • Marco
    Marco on January 17th, 2010


    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:
    (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?

  • Tetsuro
    Tetsuro on January 18th, 2010

    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.



  • Sherika Meuser
    Sherika Meuser on March 5th, 2010

    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

  • Kevin
    Kevin on March 5th, 2010

    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?

  • Brent
    Brent on March 31st, 2010

    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

  • Brent
    Brent on March 31st, 2010

    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′){

    ~ brent

  • Mette Lykke
    Mette Lykke on April 13th, 2010

    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 Lykke
    Mette Lykke on April 14th, 2010

    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/



  • Mette Lykke
    Mette Lykke on April 14th, 2010

    Btw, I solved the logo thing.

  • CJ
    CJ on April 19th, 2010

    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.


  • Tetsuro
    Tetsuro on May 12th, 2010

    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.

  • JT
    JT on May 19th, 2010

    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

  • Laura
    Laura on September 16th, 2010

    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,

  • David
    David on June 22nd, 2011

    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…

  • Daniel
    Daniel on July 14th, 2011

    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


  • Tetsuro
    Tetsuro on July 20th, 2011

    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.

  • Tetsuro
    Tetsuro on July 20th, 2011

    David: thanks! I’m glad you found it useful!

  • Christian O
    Christian O on July 21st, 2011

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

  • Christian O
    Christian O on July 25th, 2011

    Oi, I figured this one out myself :-) I works perfectly. So thankfull for this script.

    /Christian O

  • Birgit
    Birgit on October 3rd, 2011

    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?

  • Andrew
    Andrew on November 26th, 2011

    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?


  • tetchi
    tetchi on November 28th, 2011

    Birgit and Andrew: It sounds like an issue with the jQuery selector. What are your shop’s URLs?

  • Andrew
    Andrew on November 29th, 2011

    http://www.blackstarchocolates.com Thanks for taking a look!

  • Mr.Piggy
    Mr.Piggy on December 19th, 2011

    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!



  • tetchi
    tetchi on December 21st, 2011

    Hey Andrew, it looks like all of your products are sold out, so I can’t test out the cart page :(

  • tetchi
    tetchi on December 21st, 2011

    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?

  • Rachel Lucie
    Rachel Lucie on February 18th, 2012

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

  • Brendon B Clark
    Brendon B Clark on February 24th, 2012

    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!

  • tetchi
    tetchi on February 24th, 2012

    Hey Rachel, Brendon – shoot me an email if you’d like a hand :)

  • Greg
    Greg on March 2nd, 2012

    Excellent post… worked straight away!
    Really needed this to work in order to use SagePay and 3D Secure (UK).

  • Jake
    Jake on March 3rd, 2012

    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!

  • Evy
    Evy on April 20th, 2012

    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!


  • sean
    sean on May 26th, 2012

    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



  • tetchi
    tetchi on May 28th, 2012

    hey sean, shoot me an email tetsuro at shopify.com, I’ll see if I can help you out.

  • Raph
    Raph on May 31st, 2012

    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.



  • emiko
    emiko on June 5th, 2012


    I am experiencing the same problem as Andrew and Jake.

    Is there any solution for that?

    thank you,


  • Sanford
    Sanford on June 7th, 2012


    Excellent Tutorial.

    A few Questions Please:

    Checkout Buttons Displaced on Cart Page After Adding the Code:
    I followed your tutorial – but my Checkout Page now looks like this:


    Any suggestions on how to correct the code to make all the Buttons look spacial-y correct again?

    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,

  • Caroline Schnapp
    Caroline Schnapp on June 19th, 2012

    Awesome rewrite, Tets! Thank you for taking the time!

  • tetchi
    tetchi on June 19th, 2012

    Thanks Caro! You da best!

  • WebMatros
    WebMatros on July 10th, 2012

    Thank you Tetsuro;-)

    And a very nice deed to make the instructions even easier to implement.


  • Todd
    Todd on July 16th, 2012

    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?


  • intin
    intin on July 16th, 2012

    thanks I got this working now!!!! very helpful!!

  • Todd
    Todd on July 17th, 2012

    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.

  • Maggie
    Maggie on August 25th, 2012

    I am code-challenged and having trouble. Is anyone willing to do this for me? I do appreciate :(

  • Jonathan Hodnett
    Jonathan Hodnett on August 28th, 2012

    Sure Maggie, I’ll get it for you! :-)

  • Jonathan Hodnett
    Jonathan Hodnett on August 28th, 2012

    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!

  • Sarah
    Sarah on September 6th, 2012

    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

  • Christine
    Christine on September 9th, 2012

    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

  • Andrea
    Andrea on September 26th, 2012

    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!

    PS: We are using Jitensha Theme – and love it!

  • intin
    intin on October 30th, 2012

    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

  • Ingrained Media
    Ingrained Media on November 24th, 2012

    Needed this for a client’s site ourselves, outstanding! Worked like a charm, great work! Thank you!

  • Palio
    Palio on November 29th, 2012

    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…


  • Geoff
    Geoff on January 11th, 2013

    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

  • Brian
    Brian on January 15th, 2013

    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.

  • Rob
    Rob on January 15th, 2013

    This is sweet – thanks Tetchi!

  • Rasmus
    Rasmus on February 27th, 2013

    This worked brilliantly – thanks a million!

  • Meindert
    Meindert on April 18th, 2013

    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(“.submit-cart input[type=’submit’],.submit-cart input[type=’image’]”).click(function(){
    jQuery(“.submit-cart input”).submit();

    and understand this should be changed. Any hints or ideas. Thanks again for the info.
    Kind regards.

  • Daniel Birch
    Daniel Birch on May 2nd, 2013

    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…

  • Julia
    Julia on May 23rd, 2013

    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.

  • tetchi
    tetchi on May 24th, 2013

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

  • Lise Andersen
    Lise Andersen on May 29th, 2013

    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!

  • tetchi
    tetchi on May 29th, 2013

    @Lise thank you so much for the kind words! Glad it worked! :)

  • Melissa Bowdoin
    Melissa Bowdoin on June 7th, 2013

    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.

  • tetchi
    tetchi on June 9th, 2013

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

  • Lisa
    Lisa on June 13th, 2013

    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.

  • tetchi
    tetchi on June 13th, 2013

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

  • Lisa
    Lisa on June 13th, 2013

    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.

  • tetchi
    tetchi on June 13th, 2013

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


  • Lisa
    Lisa on June 13th, 2013


    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!

  • tetchi
    tetchi on June 17th, 2013

    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.

  • Lisa
    Lisa on June 18th, 2013

    Hi, Sorry I’m being a pest now. Here is the screenshot.

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


    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.

  • tetchi
    tetchi on June 20th, 2013

    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.

  • Lisa
    Lisa on June 25th, 2013

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


  • Dan
    Dan on June 26th, 2013

    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.

  • Lisa
    Lisa on June 26th, 2013


    I put mine in between cart subtotal and estimated shipping. Hope this is of some help.


  • dan
    dan on June 27th, 2013

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

  • dan
    dan on June 27th, 2013

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

  • dan
    dan on June 27th, 2013

    I dont understand why I cant add the code to this post to show you guys? Every time I post the code disappears?

  • dan
    dan on June 27th, 2013

    These two

    div class=”submit-cart”

  • tetchi
    tetchi on June 27th, 2013

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

  • dan
    dan on June 27th, 2013

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


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

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

  • dan
    dan on June 27th, 2013

    That did not work either. Shoot!

  • fran
    fran on July 9th, 2013

    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

  • fran
    fran on July 9th, 2013


    BTW this is the best tutorial yet on shopify. Kudos!!!


  • dan
    dan on July 10th, 2013

    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


  • Lisa
    Lisa on July 10th, 2013

    Hi Fran,

    This is what I put in,

    I agree with theTerms and Conditions

    Hope this helps,

  • Fran
    Fran on July 11th, 2013

    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

  • Lisa
    Lisa on July 11th, 2013

    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

  • Lisa
    Lisa on July 11th, 2013

    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.

  • Phil Jordan
    Phil Jordan on July 15th, 2013

    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 Jordan
    Phil Jordan on July 16th, 2013

    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.

  • Melissa Bowdoin
    Melissa Bowdoin on July 26th, 2013

    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.

  • Justin Moore
    Justin Moore on August 10th, 2013

    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?

  • Johannes
    Johannes on August 23rd, 2013

    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.

  • Angela
    Angela on September 18th, 2013

    Works beautifully!!! Thank you for this quick and straightforward tutorial. Very much appreciated.

  • Fran
    Fran on September 18th, 2013

    Your tutorials are always very helpful! Thanks for taking the time to be clear, so technophobes like us can feel proud of ourselves! Lol!

  • Toby
    Toby on November 23rd, 2013

    Tetchi, many thanks. I used it on http://www.pokloni-zdravje.si and it works.

  • Holly
    Holly on November 28th, 2013

    Works perfectly, just what I was looking for – thank you so much!

  • Bryan Veloso
    Bryan Veloso on May 12th, 2014

    very nice tut. I’m gonna implement this in my magento site.

  • Raúl HD
    Raúl HD on September 25th, 2014

    Thank you so much!!! :D

  • Kostas
    Kostas on September 29th, 2014

    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!

  • Frank
    Frank on March 29th, 2015

    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:

    and change this example to use instead of:
    jQuery(“.submit-cart input[type=’submit’],.submit-cart input[type=’image’]”).click(function(){

    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.

  • Shane
    Shane on June 27th, 2015

    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.

  • Jayson
    Jayson on July 7th, 2016

    Hi Tetchi,

    Thank you for this tutorial.

    Anyone knows any workaround for Amazon payment button?


  • Scott Austin
    Scott Austin on August 20th, 2016

    Thanks! Works great in the Shopify Minimal theme

  • Scott Austin
    Scott Austin on August 20th, 2016


    Here’s the code that I used. Should help you format yours.

    I agree with the terms and conditions.

  • Jeremy E
    Jeremy E on October 17th, 2017


    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.


  • Gideon
    Gideon on March 7th, 2019

    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,

Post a comment