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

TyW
Community Manager
451 63 1206

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 167 (167)
shopcami
Explorer
49 0 18

Hello @TyW 

Thank you for this! Is there a way to make the checkbox bigger?

Ty3shia
Visitor
1 0 0

Super easy and straightforward 

SiamBlades
Tourist
8 0 1

Are we able to view the Terms & Conditions Checkbox after the cart page? Is there an overview order page that shows the customer selected the Terms & Condition box?  I am looking for evidence the customer selected this box on the order page or elsewhere to provide in the event of chargebacks.

CallmeAJ
Tourist
3 0 2

I added the code you have posted on your comment, the box is there and able to be checked... I am not getting the prompt when the box is left uncheck and I then click check out. 

Pauline_Millwar
Tourist
10 0 9

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 🙂

MikeCronin
Excursionist
30 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?

skmeico
Tourist
18 0 2

I added the codes to my my Dawn Theme and able to see the terms and conditions box, but it is not alligned properly, how to allign it? Also the Check out Box became more height

skmeico_0-1636710018419.png

Please help me

 

TAGSAngel
Trailblazer
148 1 88

this tutorial was extremely helpful.  My only question is how do we get the  "Agreed to terms & conditions" to show up on the order confirmation and our notification of order.  unfortunately sometimes we need to provide proof to them that they agreed .

Michelle_Lee
Shopify Partner
1 0 0

I also want to know the same: 
1. How can we show proof/confirmation that the terms are checked? 

2. Can we ensure that customer cannot proceed to checkout until the checkbox is ticked? 

cvolden
Visitor
2 0 0

@TyW Hello! I have inserted the two code snippets for the sectioned theme, the checkbox is there, however you can still go to the checkout without checking the box. I tried the js version script edit but could not find it within theme.liquid. This is on the Prestige theme, do you happen to have further insight on this solution for this particular theme? Thank you!   

Dan444
Visitor
2 0 0

I am using Crave theme. So that I am following steps for sectioned themes. However, I can't find  theme.js or theme.js.liquid under the my code. I am able to input the check box but not function. Please help.

Rifi
Visitor
1 0 0

Worked like a charm in the Clean Canvas Symmetry (Shopify 2.0) theme. Thank you!

daved1234
Explorer
63 6 15

Hello!

This worked great for me on the Dawn theme!

Just one thing, the box shows a check mark by default. Anyway to remove it so that a customer has to manually check the check box by clicking on it with their mouse?

Erinh
Visitor
1 0 0

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?

dclopez
Tourist
6 0 4

Used the sectioned Theme instructions and everything worked, except for the warning doesn't pop up. You can still check out without selecting you agree. Any advice on this? I'm using the Block Shop Theme. This is what I found.

//<script type="text/javascript">
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 1200;
window.lazySizesConfig.loadMode = 3;
window.lazySizesConfig.ricTimeout = 50;
</script>
{{ 'lazysizes.min.js' | asset_url | script_tag }}

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js' | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}

{% if template contains 'customers' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{{ 'customer_area.js' | shopify_asset_url | script_tag }}
{% endif %}

<script>//

scrapemetal
Visitor
2 0 1

thank you for this helpful tutorial 🙂

Andrew231
Visitor
2 0 0

Hi dclopez, I am using Blockshop as well did this work for you end the end?

olil
Visitor
1 0 0

Hi, the info for the Brooklin theme does not match to the code.  Why is it so ?  I need a solution to this subject. I can not edit the code due to this problem.

dclopez
Tourist
6 0 4

Can you add the 2 sections here? 

lewishughes
Visitor
3 0 0

What if there is no theme.js or theme.js.liquid file and only a theme.min.js file?

 

Please can I have some assistance with this.

GARESIOVINI
Tourist
8 0 2

Hi, I followed the tutorial and everything is great, except for one thing. If I use internet explorer to reach the shop, in the shopping cart page the checkout button vanishes and doesn't work properly. The popup for consent doesn't come out and you can't finalize the payment

benj-
Visitor
1 0 1

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.

And this is exactly the kind of restrictions that make me move to another solution as soon as I can, because -aside of the fact that I don't feel free to do what I want with my shop- the checkbox is a mandatory thing in some countries, and having it in the cart before payment pages is a very bad choice as it hurts conversions.

GARESIOVINI
Tourist
8 0 2

It's a shame that shopify don't offer the possibility to add this checkbox........

MKMUMU2
Excursionist
13 0 3

HI @TyW ,

Thanks a lot for your guided tutorial......

PommeAndPlay
Visitor
2 0 0

Nice tutorial, pretty easy to implement BUT... Is there a way to translate the text shown on the page and the popup that appears if the box is not checked ?

Dirky
Excursionist
39 0 6

Thanks, I got this working fine on Debut theme. However it's not immediately obvious that you have to click the text to proceed, see screenshot.

Debut theme does not allow a different colour for links only. Anyway to underline the text to make it more obvious to at least have the hover colour different?

 

Thanks

Screenshot 2020-06-07 at 22.45.26.jpg

mikepr11
Visitor
1 0 0

Hi, this works great for me with only one issue. The text and checkbox appear next to the "checkout" button instead of right above. Is there a way to do it as it's pictured in the screenshot? Thank you! 

Natb
Visitor
1 0 0

I can see that the checkbox has been added to the "cart page" in the editor:

Natb_0-1597762422873.png

 

However, when the cart icon is clicked on the home page and the "quick view" is used it does not appear and can be bypassed:

Natb_1-1597762477949.png

I am using the Narrative theme, hoping someone can help me with a fix.  Thanks!

Htag
Visitor
1 0 0

Hi TyW and  thank you . I have  followed your tuto  to the letter and  magic :  the checkbox is there in my cart but the link does not work. Either something wrong with the  URL I  entered or maybe it  comes from the fact that I  created the page which was automatically integrated to the footer menu "Link". I  tried several combinations of  the url  without success . Can you help me further ? The last one I entered is href= "/policies/terms-of-service" ... The theme is Minimal. Should I create a separate page ? Cheers 

jopmoreira
Tourist
3 0 2

Hi, 

Is it possible to make another type of warning? Just like on contact forms where the text goes red or something..

Can I add a second one to my contact form?

 

Don't understand why shopify don't add this option on the checkout page.. 

 

kamstelis
Visitor
1 0 0

Hi,

My store is multilanguage (2 languages). I managed to add this checkbox to my store and even got text next to it displayed in correct language, but cannot figure out how to fix text in alert popup window so it is displayed in correct (user chosen) language. Any tips on this?

Anthonymikha
Visitor
2 0 0

Hello,

I would like to ask if it is possible to add this checkbox to the checkout page right above the continue to shipping button

WhatsApp Image 2020-12-08 at 2.13.49 AM.jpeg

I do not have enough expertise to do it of the top of my head and I am seeking help.

diego_ezfy
Shopify Partner
2908 557 872

@Anthonymikha 

Hey Anthony,

No, it is not. The checkout page is not customizable unless you're using the Pro plan (the one that starts at $2.000 USD/month).

Kind regards,
Diego

Anthonymikha
Visitor
2 0 0
Thank you for the reply.
I want to ask if it could be possible to put the checkbox on above the
continue to checkout or a prompt that pops up and would not let you
continue to the checkout until you agree to the terms and conditions how
would you go about this task?
Thank you in advance for taking the time to reply
diego_ezfy
Shopify Partner
2908 557 872

@Anthonymikha 

Yep, in this case it surely would be possible. Would require custom coding though, a solution developed by a programmer. There is not a copy/paste solution for this.

If it's of your interest feel free to reach me out via email,

diego.boarutto.fortes@gmail.com

Kind regards,
Diego

Acar
Visitor
1 0 0

Hello,

I Use the Brooklyn theme and unfortunately I Have a problem with the first step. When I add the code in the end, my shop looks messed up. Is there another solution?


Kind regards
Fatih

pearlleads
Visitor
1 0 0

..........

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
23 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
23 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. 🙂

Mike5241
Excursionist
42 0 7

Hi Idwithin,

Just to thank you for the trick, it worked for me.

My problem was that it was possible to click on the Checkout button and continue even if the "Agree to terms" checkbox was not selected.

I noticed that the popup windows appears very near the top of the screen, do you know by any chance how to make it show in the center of the screen?

Thank you,

Mike

midwestsoapery
Tourist
4 0 3

I told you how to figure it out so the snark is not necessary. I was busy at the time and didn’t see your response until now. Had you read the instructions like I said you would have seen it.

✌🏻

MikeCronin
Excursionist
30 0 3

How did you fix? Same issue.

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>