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

TyW · ‎12-02-2019

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.

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

ItayS · ‎12-29-2021

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 · ‎03-01-2022

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 · ‎08-10-2022

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

eeclipse · ‎08-10-2022

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 · ‎01-18-2022

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 · ‎01-22-2022

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 · ‎01-31-2022

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 · ‎01-31-2022

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 · ‎03-01-2022

Hi all,

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

JasonK3 · ‎05-30-2022

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 · ‎08-15-2022

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 · ‎08-19-2022

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

CraigMe · ‎08-30-2022

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 · ‎11-29-2022

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 · ‎03-20-2023

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

shoptheladyluck · ‎06-01-2023

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 · ‎08-01-2023

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 · ‎11-05-2023

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 · ‎11-09-2023

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 · ‎01-23-2024

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

Join our Free Shopify Support Group on Facebook

omersharon · ‎02-07-2024

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)

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

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links