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

TyW
Community Manager
Community Manager
413 40 1107

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 143 (143)
amir_zsafaei
New Member
3 0 0

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
New Member
2 0 0

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

Andrew231
New Member
2 0 0

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?

PJeatery
New Member
2 0 0

This didnt work for me

goclaire
New Member
1 0 0

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>


 

Dagmar1
New Member
3 0 0

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 🙂 

mArcoAl
New Member
1 0 0

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

LadyKM
Excursionist
15 0 6

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.

Dagmar1
New Member
3 0 0
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
Excursionist
15 0 6

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

wildjunkiebtq
New Member
2 0 0

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

Dagmar1
New Member
3 0 0
Hi,

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

thank you
Dagmar
PommeAndPlay
New Member
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 5

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

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.



 

CS69
New Member
2 0 0

Thank you!

I'm on theme Venture, it works but the text appears in uppercase...

How can I have it in a normal font, with a capital letter only when I put a capital letter?

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