I do not understand how you solved the issue by placing the code that goes
in the main-cart-footer.liquid just before the div tag?
My main-cart.liquid looks like this:
id=“agree” />
I agree with the terms
and conditions.
{{ ‘cart.general.checkout’ | t }}
My theme.js looks like this:
$(document).ready(function() {
$(‘body’).on(‘click’, ‘[name=“checkout”], [name=“goto_pp”],
[name=“goto_gc”]’, function() {
if ($(‘#agree’).is(‘:checked’)) {
console.log(‘Checkbox is checked!’);
$(this).submit();
}
else {
alert(“You must agree with the terms and conditions of sales to
check out.”);
console.log(‘Checkbox is checked!’);
return false;
}
});
});
Can you please tell me how you fixed it in your theme?
Other suggestions I took to deal with the issue that it was possible to click on the Checkout button even if the checkbox was not selected were the following:
Create custom.js in Assets and put in there the code that was supposed to go in theme.js or theme.js.liquid.
Add the following in theme.liquid just before the tag :
I also had that the same issue as you while implementing the proposed solution, I solved it by following the advice about putting the code in a new file called custom.json and Assests and adding the following in theme.liquid just before the tag :
This worked really well. Thank you! I used the first set of codes on your list. I do not see the added terms and conditions on mobile or iPads. Is there a solution for this?
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
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)
did you guys find a solution for this? This thread is so full of old answers, it’s hard to swift through them all and find something useful :(. I’m in Germany and would also need this check box. All the links to policies are actually visible at the bottom of the checkout page, but there is no check box. I’m losing it with all these regulations really…
I’m also reading that one has to send a PDF for both the Terms of Service (AGB) and Refund Policy (Widerrufsrecht) to the customers after order confirmation (maybe this is specific to Germany, I don’t even know). Do you or anyone know how to do this? Thank you so much in advance!
Thanks so much! In the end I’ve found a video tutorial that worked wonderfully, but it is only for page checkouts, not drawer. I believe it works for all themes. In case anyone is still interested! https://www.youtube.com/watch?v=smyIqWWuZvs&t=1s
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.
Hello. I’ve added this code to my Narrative with Installments message Theme but the Terms and Conditions are still not showing up. What did I do wrong? Website is www.bisontrack.com
Wasted a bunch of time trying to manually code and it not working (Prestige theme). Thanks to Relentless Apps to replying to another thread with their free app, simple and works:
