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

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

TyW
Community Manager
457 67 1216

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 173 (173)
midwestsoapery
Tourist
4 0 3

D80E8EAA-DE21-49AF-8D5B-0465B2243284.jpeg

ItayS
Visitor
2 0 0

Hi,

I've been trying to play with this code for several days now, but once clicking the submit button it's always keep going to the checkout page without ticking the agreement checkbox

What am I doing wrong?

Using a sectioned theme (Prestige)

theme.js

 

$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
//documet.getElementById("submit").disabled = false;
$(this).submit();
}
else {
//documet.getElementById("submit").disabled = true;
alert("נא לאשר את תקנון השימוש באתר על מנת להתחיל בתהליך הרכישה");
return false;
}
});
});

 

cart-template.liquid


<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: left;" type="checkbox" id="agree" required="required"/>
<label style="display:inline; float:none" for="agree">
הנני מאשרת <a href="/pages/madam-terms-conditions">את תקנון האתר</a>.
</label>
</p>


<button type="submit" name="checkout" class="Cart__Checkout Button Button--primary Button--full">{{ 'cart.general.checkout' | t }}</button>

Buchholdt
Shopify Partner
25 0 2

Hi ItayS,
Did you ever manage to find a solution for this?

I'm in the same situation, and not able to find a solution for the Prestige theme.

eeclipse
Visitor
2 0 1

I managed to make it work on my Prestige theme by adding the following code line between <head> </head> in theme.liquid 

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

eeclipse
Visitor
2 0 1

I added this in my theme.liquid head section and now it works. My prestige theme version is the latest.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

raeganpennell
Visitor
1 0 0

Hi Super helpful tutorial it all worked great for me except one thing!

When trying to check out with this cart option there is no box to agree to T&A and it wont let me continue on without it. I am using the Narrative theme

saratrecate
Visitor
1 0 0

Hello @TyW ,

thank you very much for your tutorial, it works perfectly on my Sectioned theme.

 

I have a question:

I legally need to add 2 mandatory checkboxes on cart page (terms and conditions + privacy).

I tried copying your code twice on the cart template, and it worked, now I have 2 checkboxes, but the second checkbox is not mandatory (meaning if the user doesn't check it, no alert is shown).

 

Do you have any suggestions on how to make both mandatory?

 

Thanks again!

Sara

wychburyave
Visitor
3 0 2

I have successfully created a checkbox on the checkout page, however, if the box is not selected the pop up box says "undefined" instead of explaining that the box must be checked.  I have added the recommended code to the bottom of the theme.js file. Could someone please offer some advice on how to fix this?

RhiSquared
Tourist
4 0 1

I followed the guide (sectioned theme) about 6 months ago and it worked perfectly. Just this past week I noticed the 'agree to terms' checkbox is no longer working. A person can click 'checkout' without having to check the 'I agree...' box. I'm using the Boost paid theme. Any help would be greatly appreciated.

rhiandddept.com

Buchholdt
Shopify Partner
25 0 2

Hi all,

Has anyone figured out how to enable this with the Prestige theme?

JasonK3
Visitor
1 0 0

My checkbox doesn't appear on firefox for some reason. It works on all other browsers. Has anyone encountered this and know how to fix it? 

MatthewJames
Visitor
1 0 0

Hi,

 

Could we, in theory, use this code to add a confirmation to EU customers that there may be VAT and Duty charges?

 

And is there a way for tickboxes to only appear to EU customers, depending on the address in their account?

BrittanyD1
Visitor
1 0 0

Is there any way to tell if someone actually clicked this during checkout?

CraigMe
Visitor
2 0 0

Hi, I am using craft version 4.0.1

this is part of the 2.0 Shopify themes. 

This seems an older code fix to add a button. 

 

For example, I cannot find Cart-template.liquid

 

Please could I get assistance.

monadic
Tourist
5 0 8

To me it's a complete mystery why Shopify declines for many years now to implement this extremely basic functionality to the native checkout, just like the checkbox to agree with email marketing. It's ridiculous that there is a plethora of paid 3rd party apps for something as basic as this. Many countries and many shops will require such a functionality INSIDE the checkout to collect consent from people. We're all out here in risk of getting sued because we can't comply with local regulations because of this. Dodgy workarounds with a checkbox in the cart are not sufficient. It's not that big a deal to implement this, whoever doesn't need it, will just keep it deactivated. Such a pain, that would probably take Shopify devs about 1-2 days to safely implement. I just don't get it.

Stineck
Visitor
2 0 0

Hello TyW
Thanks for sharing this guide. I have now succeed to get the checkbox, but it seems like you can continue without marking the checkbox. How do I make sure that customers do not proceed before checking the box? See it at www.noddebazaren.dk 
Skærmbillede 2023-03-20 kl. 23.15.17.png

shoptheladyluck
Visitor
2 0 0

Hi Ty! 

I am trying my damnest to re-code my updated "Drop" these to have my agree to terms and conditions box with zero luck. I don't have some of the liquid theme sections you mentioned above. I am on like hour 3 of this about to lose my mind! lol

olleke
Visitor
2 0 3

I've completed all the steps and it all works except the checkbox isn't showing. I only have the text and a pop-up warning that I should check the checkbox that isn't there.

I've tried to fake it by replacing the checkbox with unicode checkbox, but that didn't work either. I've only managed to have the text without the box. How can I fix this?

Thougaard
Visitor
2 0 0

HI there, 

I have tried to follow the guide for Sectioned theme however the checkout is displayed but can get bypass even though the checkbox is not checked. 

Im using the theme Lorenza v 6.2.2

 

Do you have any suggestion on how to make sure the customer must check the checkbox before checking out?

Lolo_Racks_USA
Tourist
3 0 1

got it to work on dawn theme thanks to some notes in the replies below. THANK YOU!!

I am no coder , just a hack looking at google haha 

 

also got the requirement to work on the check out button.

only thing still wrong is it doesn't require anything if you click google pay or shop pay. 

Jahid-KlinKode
Excursionist
145 1 5

Hey @TyW, check out this helpful YouTube tutorial on adding a 'Agree to Terms and Conditions' checkbox in your Shopify cart without using any apps: https://www.youtube.com/watch?v=smyIqWWuZvs

omersharon
Tourist
4 0 0

Worked great for me, thank you.
i wanted to have the T&C checkbox both in the cart and in the drawer (Refresh theme) so i had to tweak a bit the implementation.
i resolved it and put it here in case anyone has this use case: 

  • what happens: the variable in the code "agree" will collide with both cart and cart drawer, you should have two variables one for each, like "agree" and agree2". otherwise even if you check the box on the drawer page (or cart page depends which loads first) you get the alert that you didn't check the box.
  • how i solved it:
    • cart-drawer.liquid: use the code "as is" in this post.
    • main-cart-footer.liquid: also here i used the same codes provided in this post, but wherever it says "agree" I changed it to "agree2"
    • top theme.liquid file: use the code here "as is"
    • bottom of theme.liquid file: here you need to add the OR statement to check for either "agree" or "agree2" as its a global check.  .
      so change this line:
      • if ($('#agree').is(':checked')) {
        $(this).submit();
        }
    • to this line: 
      • if ($('#agree').is(':checked')||$('#agree2').is(':checked')) {
        $(this).submit();
        }

i hope it helps someone. and thanks again for this great post. 
(PS a lot of comments here are about the "required" i didn't have that issue in the Refresh theme)

RelentlessApps
Shopify Partner
10 0 0

As everyone has already mentioned it isn't possible to add a terms and conditions checkbox to the checkout (unless you are on the super expensive Shopify Plus plan) but you can add it to the cart page.

We created a free app to do just that called RA Terms and Conditions Checkbox

 

RelentlessApps_0-1713790830528.png

 

RelentlessApps_1-1713790830529.jpeg

 

 

If my answer helps, please give it a Like 🙂

Relentless Apps

arafaatqureshi
Shopify Partner
1 0 0

<input style="float:none; vertical-align: middle;" form="cart" type="checkbox" id="agree" required/>

in the input of checkbox add this:
form="cart"