Cart - Add an 'Agree to terms and conditions' checkbox

TyW
Community Manager
556 38 1001

You can add an I agree with the terms and conditions checkbox to your cart page that customers must check before continuing to the checkout. If a customer doesn't check the checkbox before clicking the checkout button, an alert pop up will prevent them from continuing.

 

tc-01.jpg


Tip: It's not possible to add the checkbox to the checkout pages. It can be added only to the cart page that exists at http://www.your-shop-URL.com/cart.

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 button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button 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 125 (125)
pearlleads
New Member
1 0 0
Pauline_Millwar
Tourist
10 0 7

Hi,

Please can you advise what needs to be done to the new Dawn theme for this to work ie add the checkbox and restrict the customer from continuing unless they have "checked" the box. Many thanks

midwestsoapery
Tourist
4 0 3

I am using the Debut theme and I have everything in the code but it isn't making it mandatory. Any idea what I am doing wrong?

 

Never mind, I figured it out. Thanks!

CallmeAJ
Tourist
3 0 2

I am having the same issue. 

CallmeAJ
Tourist
3 0 2

can you tell me how you figured it out?

midwestsoapery
Tourist
4 0 3

For the debut theme there was an extra step in the instructions!

idwithin
Excursionist
20 0 5

What is the extra step, can you not tell us what it is instead of not providing the answer? I am using debut and cannot get it working either and have tried everything.

 

idwithin
Excursionist
20 0 5

Hi there everybody so i've figured it out myself and instead of telling you I figured it out, I am actually going to reveal to you how to do it.

I am using debut theme, yet I wonder if this is the reason why most people cannot get it to work in the other themes.

The trick is adding this code in a new custom.js file, as debut theme preloads theme.js and I think this is why as most people will add jquery below this file, so it loads before jquery causing it not to work. So creating a new file and keeping it separate works better:

$(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;
}
});
});


So find where you added your jquery and make sure this new custom.js file is in the code below it.

So where I have jqeury loading in theme.liquid in the header:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> : I added my new custom.s file with the code in it right below. Just like this, on a new line right below.
{{ 'custom.js' | asset_url | script_tag }}

Hopefully this helps.

MikeCronin
Excursionist
29 0 3

Hi there. Followed all the steps to do so but hit an issue with the dialog warning not popping up if the checkbox isn't checked-off. 

Any recommendations on how to solve?

MikeCronin
Excursionist
29 0 3

How did you fix? Same issue.