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

TyW
Community Manager
556 38 1013

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

sherley
New Member
1 0 0

how do i preselect the checkox

Mike5241
Excursionist
14 0 3

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

skmeico
Tourist
17 0 1

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

 

skmeico
Tourist
17 0 1

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-1636786959036.png

 

Please help me

TAGSAngel
Trailblazer
146 1 62

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 .

TAGSAngel
Trailblazer
146 1 62

Does it matter where in the code your code is placed or can we just put it down on the bottom of the page?

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? 

ItayS
New Member
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>