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

TyW
Community Manager
Community Manager
435 50 1185

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 156 (156)
LadyKM
Excursionist
21 0 7

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:

Screenshot 2020-06-02 at 09.29.09.png

 

 

Here is the code:

 

 

Screenshot 2020-06-02 at 09.26.02.png

 

 

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
Tourist
7 0 0

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:

Screenshot 2020-06-02 at 09.29.09.png

 

 

Here is the code:

 

 

Screenshot 2020-06-02 at 09.26.02.png

 

 

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
Excursionist
11 0 4

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
Excursionist
11 0 4

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
Visitor
1 0 2

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
Tourist
6 1 4

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

Thanks a bunch, M
MatthewTucker
Visitor
1 0 0

That worked great, thanks so much!

goddessswag
Excursionist
12 1 3

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
Excursionist
12 1 3

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
Tourist
3 0 2

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
Tourist
4 0 1

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
Tourist
18 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

FrankvanBuiten
New Member
4 0 0

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
Visitor
2 0 1
 

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

herjourney
Excursionist
19 1 1

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
Visitor
1 0 0

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

gab33
Tourist
4 0 8

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
Tourist
7 0 0

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 -%}

 

gab33
Tourist
4 0 8

The complete code is already pasted above.

Best regards

TAGSAngel
Trailblazer
147 1 85

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
Excursionist
13 0 3

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
Tourist
8 0 2
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
Excursionist
13 0 3

Hi,

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

noebouture
Tourist
8 0 2

Which expert to recommend please? i need it

noebouture
Tourist
8 0 2

@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
Tourist
8 0 2
I’ve asked to them: kcprvn@gmail.com
They are Shopify certified experts
Have fun!
MKMUMU2
Excursionist
13 0 3

@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?

HoppahDaphne
Visitor
1 0 1

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
Visitor
1 0 0

Hello,

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

Thank you

Ersin
Visitor
1 0 0

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
Visitor
1 0 0

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
Excursionist
13 0 3

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
Tourist
14 0 1

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
Excursionist
13 0 3

Hi, 

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

alibabyph
Tourist
8 0 3

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