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

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.

• Sectioned themes
• Non-sectioned themes

[TyW]

Sectioned themes

Adding a checkbox to your cart page

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click theme.js or theme.js.liquid.
   Note: For the Narrative theme, click theme.min.js.
4. At the bottom of the file, paste the following code:
   
   

     $(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;
         }
       });
     });

5. Click Save.
6. In the Sections directory, click cart-template.liquid. If there is no cart-template.liquid file in the Sections directory, then click cart-template.liquid or cart.liquid in the Templates directory.
7. Find the HTML code for your checkout button. Look for a <button> or an <input> element with the name attribute set to checkout. The code might look something like this:
   
   

   <button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>

   On a new line above the checkout button, paste the following code:
   
   

   <p style="float: none; text-align: right; clear: both; margin: 10px 0;">
     <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
     <label style="display:inline; float:none" for="agree">
       I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
     </label>
   </p>

8. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.
   
   Note: You will need to create a terms and conditions page if it doesn't already exist.
   
   
9. Click Save.

Debut

If you use Debut version 17.3.0 or higher, you will need to add JQuery to your theme.liquid file in the Layout directory.

1. In your theme.liquid file, find </head>.
2. On a new line above </head>, paste the following code:
   
   

   <link rel="preload" href="https://code.jquery.com/jquery-2.2.4.min.js" as="script">
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

3. Click Save.

Boundless

If you use Boundless, you will also need to add the checkbox code to your theme.liquid file in the Layout directory.

1. In your theme.liquid file, find this line of code:
   
   

   <button type="submit" class="btn btn--full cart__checkout" name="checkout">

2. On a new line before the above line of code, paste the following code:
   
   

   <p style="float: none; text-align: right; clear: both; margin: 10px 0;">
     <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
     <label style="display:inline; float:none" for="agree">
       I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
     </label>
   </p>

3. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.
4. Click Save.

Brooklyn

If you use Brooklyn, you will need to add the checkbox code to your ajax-cart-template.liquid file in the Snippets directory.

1. In your ajax-cart-template.liquid file, find this line of code:
   
   

   <button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>

2. On a new line before the above line of code, paste the following code:
   
   

   <p style="float: none; text-align: right; clear: both; margin: 10px 0;">
     <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
     <label style="display:inline; float:none" for="agree">
       I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
     </label>
   </p>

3. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.
4. Click Save.
   The next step for Brooklyn is to comment out a line of code in your theme's JavaScript file.
5. In the Assets directory, click theme.js.liquid. Find this line of code:
   
   

   theme.checkoutIndicator();

   Replace it with:
   
   

   // theme.checkoutIndicator();

6. Click Save.

Removing the additional checkout buttons from your cart page

If you've added checkout buttons other than PayPal to your cart page, then the terms and conditions checkbox won't work properly. For example, if you have the Pay with Amazon button on your cart page, then your customers will be able to click it and check out without agreeing to your term and conditions.

If you have a payment option that has its own checkout button, other than PayPal, you will have to remove the additional checkout buttons from the cart page. After customers have checked the checkbox you've added and reached the checkout, they will still be able to select the additional payment option from the Payment method page.

1. In the Sections directory, click cart-template.liquid.
2. Find the following code:
   
   

   {% if additional_checkout_buttons %}
     <div>{{ content_for_additional_checkout_buttons }}</div>
   {% endif %}

3. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, and you can easily add it back if you want to change your new template later. Your code should look like this:
   
   

   {% comment %}
   {% if additional_checkout_buttons %}
     <div>{{ content_for_additional_checkout_buttons }}</div>
   {% endif %}
   {% endcomment %}

4. Click Save.

Updating older themes to use a supported version of jQuery

If you are having trouble getting the 'Agree to terms and conditions' checkbox to work, then confirm that your theme is using a jQuery version of 1.7 or newer. If your theme is running a version of jQuery that is older than 1.7, then you can edit your theme code to use a supported version instead.

1. In the Layout directory, click theme.liquid.
2. Within the <head> element, find a script tag that references your theme's jQuery source. The src attribute for the script tag contains a URL that includes /jquery/, followed by the version number. The tag looks something like this:
   
   

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

   In the script tag above, the jQuery version being used is 1.4.2. This is an older version of jQuery that will need to be updated for the customization to work. If your theme is using a version that is older than 1.7, replace the version number in the URL with 1.7. The result should look like this:

   
   

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

3. Click Save.

[TyW]

Non-sectioned themes

Adding a checkbox to your cart page in non-sectioned themes

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Layout directory, click theme.liquid.
4. Find the closing </body> tag near the bottom of the file.
5. Above the closing </body> tag, paste the following code:
   
   

   <script>
   $('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;
     }
   });
   </script>

6. Click Save.
7. In the Templates directory, click cart.liquid.
8. Find the HTML code for your checkout button. Look for a <button> or an <input> element with the name attribute set to checkout. The code might look something like this:
   
   

   <button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>

9. On a new line above the checkout button, paste the following code:
   
   

   <p style="float: none; text-align: right; clear: both; margin: 10px 0;">
     <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
     <label style="display:inline; float:none" for="agree">
       I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
     </label>
   </p>

   
10. Within the code you pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.
    
    Note: You will need to create a terms and conditions page if it doesn't already exist.
    
    
11. Click Save.

Boundless

If you use Boundless, you will also need to add the checkbox code to your theme.liquid file in the Layout directory.

1. In your theme.liquid file, find this line of code:
   
   

   <button type="submit" class="btn btn--full cart__checkout" name="checkout">
   

2. On a new line before the above line of code, paste the following code:
   
   

   <p style="float: none; text-align: right; clear: both; margin: 10px 0;">
     <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
     <label style="display:inline; float:none" for="agree">
       I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
     </label>
   </p>

   Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.
3. Click Save.

Brooklyn

If you use Brooklyn, you will need to add the checkbox code to your ajax-cart-template.liquid file in the Snippets directory.

1. In your ajax-cart-template.liquid file, find this line of code:
   
   

   <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">

2. On a new line before the above line of code, paste the following code:
   
   

   <p style="float: none; text-align: right; clear: both; margin: 10px 0;">
     <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
     <label style="display:inline; float:none" for="agree">
       I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
     </label>
   </p>

3. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.
4. Click Save.
   
   The next step for Brooklyn is to comment out a line of code in your theme's JavaScript file.
   
   
5. In the Assets directory, click theme.js.liquid. Find this line of code:
   
   

   theme.checkoutIndicator();

   Replace it with:
   
   

   // theme.checkoutIndicator();

6. Click Save.

Removing the additional checkout buttons from your cart page

If you've added checkout buttons other than PayPal to your cart page, then the terms and conditions checkbox won't work properly. For example, if you have the Pay with Amazon button on your cart page, then your customers will be able to click it and check out without agreeing to your term and conditions.

If you have a payment option that has its own checkout button, other than PayPal, you will have to remove the additional checkout buttons from the cart page. After customers have checked the checkbox you've added and reached the checkout, they will still be able to select the additional payment option from the Payment method page.

1. In the Templates directory, click cart.liquid.
2. Find the following code:
   
   

     {% if additional_checkout_buttons %}
       <div>{{ content_for_additional_checkout_buttons }}</div>
     {% endif %}

3. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later. Your code should look like this:
   
   

    {% comment %}
     {% if additional_checkout_buttons %}
       <div>{{ content_for_additional_checkout_buttons }}</div>
     {% endif %}
     {% endcomment %}

4. Click Save.

Updating older themes to use a supported version of jQuery

If you are having trouble getting the 'Agree to terms and conditions' checkbox to work, then confirm that your theme is using a jQuery version of 1.7 or newer. If your theme is running a version of jQuery that is older than 1.7, then you can edit your theme code to use a supported version instead.

1. In the Layout directory, click theme.liquid.
2. Within the <head> element, find a script tag that references your theme's jQuery source. The src attribute for the script tag contains a URL that includes /jquery/, followed by the version number. The tag looks something like this:
   
   

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

   In the script tag above, the jQuery version being used is 1.4.2. This is an older version of jQuery that will need to be updated for the customization to work. If your theme is using a version that is older than 1.7, replace the version number in the URL with 1.7. The result should look like this:
   
   

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

3. Click Save.

[Nvision112]

Hi,

I am using Debut theme and I could not get it working with the gived guidelines. Anything specific I should do when using Debut theme?

[Nvision112]

The button now shows on my site, but it can be bypassed by either not simply marking the box or clicking buy it now button.

[LandofWaterfall]

I have the same issue when using Debut theme. Everything appears to look fine, but the logic is faulty.

If a customer does not select "I Agree" they can still click checkout and be directed straight to checkout with no pop up.

A solution to this would be much appreciated!

[dclopez]

Good morning,

It seems as if the line was missing the required="required" in the line for the cart.liquid. It's working for me now. Try this.

Original:

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
  <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
  <label style="display:inline; float:none" for="agree">    I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
  </label>
</p>

Updated with required added ----- USE THIS BELOW:

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="Replace with your link to terms and conditions here">terms and conditions</a>.
</label>
</p>

[maison1]

Hello Thank you for commenting on the article, it did not work for me also, I did follow your adjustments and was still not able to get the "required" portion to work out. Would you be able to assist me that? That would seriously be awesome thank you! 

[dclopez]

Can you paste the 2 sections here?

[AlexS]

I am using the Venture theme and I had noticed this and changed it to required but you are still able to bypass the checkbox. Any other solutions to fixing this problem?

The logic makes sense it just doesn't want to work! So frustrating!

[amir_zsafaei]

Thank you for the great tutorials but the required is not working for me. Also, I don't have that JS line in my theme, should I add that manually? 

[Andrew231]

Hi Dclopez, I tried this but it still let's me checkout with having to click the button, is yours still allowing you to have to click the checkbox?

[goclaire]

Hello! This worked for me, but how do I add a pop-up to remind the customers to tick the checkbox before clicking checkout? When they don't click the checkbox, the page just loads and does not proceed to checkout.

---

@dclopez wrote:

Good morning,

It seems as if the line was missing the required="required" in the line for the cart.liquid. It's working for me now. Try this.

Original:

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
  <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
  <label style="display:inline; float:none" for="agree">    I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
  </label>
</p>

Updated with required added ----- USE THIS BELOW:

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="Replace with your link to terms and conditions here">terms and conditions</a>.
</label>
</p>

---

[developertmc]

Thanks for this post, it's very helpful.

How do I make the checkbox optional and how do I get that data on the product order?

I need to know if the customer checked or did not check the checkbox.

[goddessswag]

Hello - not sure if you are asking me or@gab33 ?   This is not my original post.

I would ask @gab33 

Wish I could assist but I don't know the answers to your questions.  I am not a developer or a guru.  I used the code for my brooklyn theme and it worked.

https://goddessswag.com  if you want to see my checkout set up.

[jkids]

@TyW thank you for the posts. I have the same question as developertmc below, would you be able to point us in the right direction please?

@developertmc did you work out how to make the checkbox optional and collect the information of whether they tick the checkbox? We are trying to do the same here...

---

@developertmc wrote:

Thanks for this post, it's very helpful.

How do I make the checkbox optional and how do I get that data on the product order?

I need to know if the customer checked or did not check the checkbox.

---

[Kerchie]

Any updates as to how to make this checkbox required? I can bypass it by clicking the checkout button.

[WGarzon]

Hi,

I'm running Debut theme and this seems to not work. Any way around it that you can find? It's still not making it "Required". 

Thank you!

[sherley]

how do i preselect the checkox

[RhiSquared]

Hello! I added the required part to the line of code, but mine is still not working. Have you had any issues with this by chance?

Thanks!

rhiandddept.com

[TanmayCreations]

Thanks for the code snippets to achieve the required functionality.

In the Dawn theme, please look for the other matching files as mentioned below:

1. cart.js INSTEAD OF theme.js or theme.js.liquid
2. main-cart-footer.liquid INSTEAD OF cart-template.liquid or cart.liquid

Also, use <a href="/pages/terms-and-conditions" target="_blank"> INSTEAD OF just <a href="/pages/terms-and-conditions"> so that the original cart page is intact. And, the terms & conditions page opens up in a new window, which could be closed after reading and still the cart window is available for the customer to checkout.

All this worked for me in Debut theme. I believe this information would help!

[highdesertsci]

 This didnt work for me. Is there another way to make the check box required? Im using the Dawn theme. 

I'd also like to position the checkbox and statement to the left and elongateits margins. how can I achieve this?

[Buchholdt]

I enden up using the app "Terms and Conditions Checkbox". Not a perfect solution, but for now it works.

[evotionchastity]

I made the change but it still lets customers go through without clicking the checkbox.

[Marlan]

Hi , Would you mind letting me know how you find the link of URL of your terms and conditions page? Thanks in advance 

[mArcoAl]

Debe ser porque estas utilizando theme.liquid en ves de theme.js  

Yo tuve el mismo problema pero si copias el código html correctamente todo funciona bien, revisa lo que te digo, no utilices la sección theme.liquid

[Dagmar1]

Hi,

thank you for your answer regarding o checkbox. First step in section
Layout - Theme.js I did changes but second step in section action
Template- cart. liquid. I don't have required codesand I dont know where to
put coes for checkout button I have just codes in attachment.
Can you help me how to manage it please?

thanks
Dagmar

[LadyKM]

Sorry - i was asking a question of the community, not providing an answer!

[wildjunkiebtq]

Which format/coding section did you use for your debut theme? I also have debut and am not sure which one to use. 

[Dagmar1]

Hi,

I use Modular not Debut theme. Thats why it is different.

thank you
Dagmar

[kalobyte]

Just want to say to all, if you are from Germany.

This tutorial is useless, because the ckeckbox appears on cart, but not on the last step of checkout.

I spend some hours to realize that I'am working on cart-template and this file is not the checkout page, on which I test it and refresh it like idiot.

Ckeckout page appears if the buyer clicks "buy now" button and goes thru many pages with forms.

And according to german laws this checkbox muss be near of the "complete order" button on the last step.

[RuDu]

Hi Kalobyte,

as i am intergrating the buy button in our wordpress page, could you tell me how you solved to implement this at the last page (complete order?)

Thanks a lot and greetings from germany

[GARESIOVINI]

Thanks for the tutorial. I'm using Debut and the button now shows on my site, but it can be bypassed by either not simply marking the box or clicking "buy now" button. Moreover, now when you click "Buy now" button, the button fades away before taking you to checkout, resulting in a longer waiting time before reaching the checkout page.

Any solution?

P.S I'm using the latest debut version, which is probably updated compared to the one of this tutorial.

---

[Dagmar1]

Hi I am using Modular theme and in second step: 

1. In the Templates directory, click cart.liquid.
2. Find the HTML code for your checkout button. Look for a <button> or an <input> element with the name attribute set to checkout. The code might look something like this:

I dot have in this section <button> or an <input> I have just this codes:

<section class="container-wrap">

<div class="container">

{% include 'site-cart' %}

</div>

</section>

{% include 'ajax-cart' %}

Can someone help with this what to do?

thank you so much 🙂 

[LadyKM]

Hi - I'm using Debut and this worked great, just one thing I can't work out - the 'font' of 'terms & conditions' is not adopting my theme font. How can I do this? Here is how it looks:

Here is the code:

Is it also possible that when the read the terms it can open in a new window rather than take them away from the checkout?

Thank you so much! It would be awesome to sort this final fixes.

[staudinger]

I had the same question as you. Have you been able to figure it out? Any help is appreciated!

---

---

@LadyKM wrote:

Hi - I'm using Debut and this worked great, just one thing I can't work out - the 'font' of 'terms & conditions' is not adopting my theme font. How can I do this? Here is how it looks:

Here is the code:

Is it also possible that when the read the terms it can open in a new window rather than take them away from the checkout?

Thank you so much! It would be awesome to sort this final fixes.

---

---

[Joanna11]

Hello!

 I am completly new in shopify. I have the same problem as all - NO confirmation for terms and Policy on the checkout.

I have read all the blog. and I saw , you have figure out , and it is  working good for you. I have DEBUT theme as you. Could you plase tell me step by step, what to do,  to get -   I agree with Therm and Conditions on my shop?

 I am not advance person with computers would be great to follow your steps!!!

Thank you so much! 

Loooking  forward to your answer! 

Joanna 

[Joanna11]

Hello! I have follow the instruction and its working for me good. Thank you for this advice.  Just it is not working for ExpressPay Pal button. any sygestion?

[reibel]

Not working on Narrative theme. As others mentioned the js inserted into theme.js is simply ignored. Not sure why. Inserting the js into the file custom.js works though.

[Remoair]

Thank you! Made my day! 🙂 Was about to have a mental breakdown.. hehe

[MatthewTucker]

That worked great, thanks so much!

[goddessswag]

Hello -thank you doe this!   So I am using Brooklyn theme.  I completed your steps, "however"  since your post of 2019 - perhaps the code changed a little?

this code doesn't appear to be the same anymore 😞   I tried adding "//" in front of it, and it def didn't work.

theme.checkoutIndicator();

I WAS able to add a check box at checkout - it says: I agree with the terms and conditions.  BUT - it still allows users to click on CHECKOUT without clicking the box 😞

If you can update this line of code, that would be awesome!!!

[goddessswag]

Hi There.  This wasn't my original post.  My input here is from the last few weeks 🙂  I would say the code has changed a bit from 2019.

Hmmmm  I am not sure what else to tell you.  I wish I had something.  I would try and add the // again and make sure you save it.

I somehow got mine to work.  Maybe you can post a new thread?   Best of luck.  Sorry I can't help further.

This is what my code section looks like:

theme.checkoutIndicator = function() {
// Add a loading indicator on the cart checkout button (/cart and drawer)
theme.cache.$body.on('click', '.cart__checkout', function() {
$(this).addClass('btn--loading');
});
};

[Soissimple]

Hi,

In the brooklyn theme,  In the ajax-cart-template.liquid file, I can not find this line of code: <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">

But instead, I found something similar : <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">

Does it work the same way?

Thanks!

[RhiSquared]

Thank you so so much!!! This mini tutorial is so incredibly helpful and it worked like a charm! Thank you very much for providing this for all of us ♥︎

[skmeico]

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

Please help me

[FrankvanBuiten]

Hi,
I'm using the Dawn theme. I've added every piece of code and I'm seeing the accept terms and conditions checkbox. However I still can go to checkout without checking the box. 

[scrapemetal]

thank you for this helpful tutorial, saved me some money 🙂

[scrapemetal]

thank you for this helpful tutorial, saved me some money 🙂

[herjourney]

Thanks! This worked great in my debut theme but I'm having an issue with adding it to the line above the checkout button. I tried adding a <p> and a <br>  right before the input tag but it doesn't seem to be working. 

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="/pages/terms-and-conditions">terms and conditions. </a>
<br>
<p></p>
</label> 


<input type="submit" name="checkout"
class="cart__submit btn btn--small-wide"
value="{{ 'cart.general.checkout' | t }}">
</div>

[OpticMo]

Did you find the solution to this problem? Would love to know if you have.

[gab33]

Hello, this tutorial is really helpful and I manage to add a required checkbox on my cart page.

However, the "required" field doesn't prevent the customer to proceed with checkout through the additional checkout buttons (Google Pay, Apple Pay etc). Is there any way to block the user to compile required fields before heading to the quick checkout experience?

Thanks in advance

EDIT: I was able, in the meantime, to disable the buttons until the checkbox is selected:

theme.js

$("#additional-buttons-c").addClass("div-disabled");
$(document).ready(function() {
  $('body').on('click', '[name="agree"]', function() {
    if ($('#agree').is(':checked')) {
      $("#additional-buttons-c").removeClass("div-disabled");
    }
    else {
      $("#additional-buttons-c").addClass("div-disabled");
    }
  });
});

theme.scss.liquid:

.div-disabled {
    pointer-events: none;
    opacity: 0.4;
}

cart template:

{%- if additional_checkout_buttons -%}
<div id="additional-buttons-c" class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}

[gab33]

Hello, this tutorial is really helpful and I manage to add a required checkbox on my cart page.

However, the "required" field doesn't prevent the customer to proceed with checkout through the additional checkout buttons (Google Pay, Apple Pay etc). Is there any way to block the user to compile required fields before heading to the quick checkout experience?

Thanks in advance

EDIT: I was able, in the meantime, to disable the buttons until the checkbox is selected:

theme.js

$("#additional-buttons-c").addClass("div-disabled");
$(document).ready(function() {
  $('body').on('click', '[name="agree"]', function() {
    if ($('#agree').is(':checked')) {
      $("#additional-buttons-c").removeClass("div-disabled");
    }
    else {
      $("#additional-buttons-c").addClass("div-disabled");
    }
  });
});

theme.scss.liquid:

.div-disabled {
    pointer-events: none;
    opacity: 0.4;
}

cart template:

{%- if additional_checkout_buttons -%}
<div id="additional-buttons-c" class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}

[AlexS]

Hey thanks for the update Gab,

any chance you could send a screenshot of what it would look like incorporated into your code?

Thanks in Advance

---

@gab33 wrote:

Hello, this tutorial is really helpful and I manage to add a required checkbox on my cart page.

However, the "required" field doesn't prevent the customer to proceed with checkout through the additional checkout buttons (Google Pay, Apple Pay etc). Is there any way to block the user to compile required fields before heading to the quick checkout experience?

Thanks in advance

EDIT: I was able, in the meantime, to disable the buttons until the checkbox is selected:

theme.js

$("#additional-buttons-c").addClass("div-disabled");
$(document).ready(function() {
  $('body').on('click', '[name="agree"]', function() {
    if ($('#agree').is(':checked')) {
      $("#additional-buttons-c").removeClass("div-disabled");
    }
    else {
      $("#additional-buttons-c").addClass("div-disabled");
    }
  });
});

theme.scss.liquid:

.div-disabled {
    pointer-events: none;
    opacity: 0.4;
}

cart template:

{%- if additional_checkout_buttons -%}
<div id="additional-buttons-c" class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}

---

[AlexS]

Hello, this tutorial is really helpful and I manage to add a required checkbox on my cart page.

However, the "required" field doesn't prevent the customer to proceed with checkout through the additional checkout buttons (Google Pay, Apple Pay etc). Is there any way to block the user to compile required fields before heading to the quick checkout experience?

Thanks in advance

EDIT: I was able, in the meantime, to disable the buttons until the checkbox is selected:

theme.js

$("#additional-buttons-c").addClass("div-disabled");
$(document).ready(function() {
  $('body').on('click', '[name="agree"]', function() {
    if ($('#agree').is(':checked')) {
      $("#additional-buttons-c").removeClass("div-disabled");
    }
    else {
      $("#additional-buttons-c").addClass("div-disabled");
    }
  });
});

theme.scss.liquid:

.div-disabled {
    pointer-events: none;
    opacity: 0.4;
}

cart template:

{%- if additional_checkout_buttons -%}
<div id="additional-buttons-c" class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}

[gab33]

The complete code is already pasted above.

Best regards

[TAGSAngel]

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

[MKMUMU2]

hi there,

could you find a solution for the error in the "required" portion,i am still unable to find the perfect solution for this. Easily can be bypassed without giving tick mark in the check box.

Can you help me?

[GARESIOVINI]

Hello,
I've contacted for 25 dollars a shopify expert that worked on the code and
did a perfect job.
In just one day everything was working well. Honestly I'd advice this.
Best,

[MKMUMU2]

Hi,

Thanks a lot..i got the solution.....

[noebouture]

Which expert to recommend please? i need it

[noebouture]

---

@GARESIOVINI wrote:
Hello,
I've contacted for 25 dollars a shopify expert that worked on the code and
did a perfect job.
In just one day everything was working well. Honestly I'd advice this.
Best,

---

Which expert to recommend please? i need it

[GARESIOVINI]

I’ve asked to them: kcprvn@gmail.com
They are Shopify certified experts
Have fun!

[MKMUMU2]

@gab33 

hi there,

could you find a solution for the error in the "required" portion,i am still unable to find the perfect solution for this. Easily can be bypassed without giving tick mark in the check box.

Can you help me?

[MKMUMU2]

hi there,

could you find a solution for the error in the "required" portion,i am still unable to find the perfect solution for this. Easily can be bypassed without giving tick mark in the check box.

Can you help me?

[HoppahDaphne]

Hi @gab33 

Your function to disable the pay buttons like Google and Apple pay is extremely helpful, so thank you!

However, I do have a small issue. I copied your code exactly into my template (I am using the theme Debut), but the pay buttons stay greyed out and unclickable even after selecting the checkbox. 

What am I doing wrong?

Cart-template.liquid:

<input type="submit" name="checkout"
class="cart__submit btn btn--small-wide"
value="{{ 'cart.general.checkout' | t }}">
</div>
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
Ik ga akkoord met de <a href="/policies/terms-of-service"><strong>algemene voorwaarden</strong></a>.
</label>
</p>

<div class="cart__error-message-wrapper hide" role="alert" data-cart-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="cart__error-message" data-cart-error-message></span>
</div>

{%- if additional_checkout_buttons -%}
<div id="additional-buttons-c" class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}

</div>
</div>
</div>
</div>

theme.scss.liquid:

}
.div-disabled {
pointer-events: none;
opacity: 0.4;
}

theme.js: 

}

$("#additional-buttons-c").addClass("div-disabled");
$(document).ready(function() {
$('body').on('click', '[name="agree"]', function() {
if ($('#agree').is(':checked')) {
$("#additional-buttons-c").removeClass("div-disabled");
}
else {
$("#additional-buttons-c").addClass("div-disabled");
}
});
});

$(theme.init);

$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("Om de bestelling te kunnen plaatsen dien je akkoord te gaan met de algemene voorwaarden");
return false;
}
});
});

[Andrea_Rausch]

Hello,

I have the same issue. Were you able to fix it?

Thank you

[Ersin]

Hi,

thanks for the tutorial. This really worked fine for me!

But I need more than 1 check box.

Can you give me code for second checkbox?

Thank  you!!

[KevGol]

Has anyone figured out how to solve the issue with being able to proceed to checkout even if the checkbox isn't checked? 

I have spent several hours troubleshooting with JS and HTML and can't seem to figure it out.

I would greatly appreciate some help. I am using the Supply theme if that helps.

Thanks!

[MKMUMU2]

Hi,

i have added this in my registration page, you can add the below code in your respective page where you want to see the "terms and policy".

##If you want to add this in your cart page, then just add name="register" in the respective input button line. 

##put the script tag below your html code, at the last part.

hope that it works out for you.

Here i have added the code which works well for me in my registration page before entering into my store.

HTML Part:

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="your reference page link">terms and conditions</a>.
</label>
</p>
<p class="text-center">
<input id ="account_submit" type="submit" value="{{ 'customer.register.submit' | t }}" class="btn" name="register">
</p>

JS Part:

<script>
$(function() {
$('body').on('click', '[name="register"]', function() {
if ($('#agree').is(':checked')) {
$("#create_customer").submit();
}
else {
alert("You must agree with the terms and conditions of sales to register.");
return false;
}
});
});

</script>

[JP30]

Hi Ty, 

Thanks for the info.

Any chance you could tell me how to display the terms and conditions page within a popup instead of leaving the cart page as it is now.

Thanks

[MKMUMU2]

Hi, 

That is what i couldn't figure out how to add those terms and condition page

[alibabyph]

are you able to do this? here is how if you are still interested

this is popup

I agree with the <a href="/pages/terms-conditions" target="popup" onclick="window.open('http://alibaby.ph/pages/terms-conditions','popup','width=600,height=600'); return false;">terms and conditions</a>.

this is for new tab if you want

I agree with the <a href="/pages/terms-conditions" target="_blank">terms and conditions</a>.

[JP30]

Thanks Alibabyph

But unfortunately it does not work...

[Kerchie]

I got it to work. Now I need to know how to make the error message inline instead of a popup. Like if they don't click the box, I want the error message to point to the box.