How to add an “Agree to terms and conditions” checkbox to Shopify cart page
Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.
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:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Assets directory, find to a javascript file and click it to open.
- At the bottom of the file, paste the following code:1234567891011$(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;}});});
- Click Save.
- 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.
- Find the HTML code for your checkout button. Look for a
<button>or an<input>element with thenameattribute set tocheckout. The code might look something like this: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:
123456<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-conditionswith the URL of your terms and conditions page. - Click Save.
Source: Shopify
