How to add an “Agree to terms and conditions” checkbox to Shopify cart page

If you want to have a “Terms and Conditions” checkbox on the Shopify cart page, which the customers have to agree to in order to proceed with their purchase, then you’ll have to follow a few simple steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, find a javascript file and click it to open.
4. At the bottom of the file, paste the following code:
   
   JavaScript

   $(document).ready(function() { $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() { if ($('#agree').is(':checked')) { $(this).submit(); } else { alert("You must agree with the terms and conditions of sales to check out."); return false; } }); });

   1 2 3 4 5 6 7 8 9 10 11

   $(document).ready(function() {     $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {       if ($('#agree').is(':checked')) {         $(this).submit();       }       else {         alert("You must agree with the terms and conditions of sales to check out.");         return false;       }     }); });

5. Click Save.
6. In the Sections directory, click cart-template.liquid. If there is no cart-template.liquid file in the Sections directory, then click cart-template.liquid or cart.liquid in the Templates directory.
7. Find the HTML code for your checkout button. Look for a <button> or an <input> element with the name attribute set to checkout. The code might look something like this:
   
   <button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>

   1	<button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>

   On a new line above the checkout button, paste the following code:

   <p style="float: none; text-align: right; clear: both; margin: 10px 0;"> <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" /> <label style="display:inline; float:none" for="agree"> I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>. </label> </p>

   1 2 3 4 5 6

   <p style="float: none; text-align: right; clear: both; margin: 10px 0;">   <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />   <label style="display:inline; float:none" for="agree">     I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.   </label> </p>

   Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.

8. Click Save.