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)
gab33
Tourist
4 0 7

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 -%}
Marlan
Excursionist
20 0 0

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

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 7

The complete code is already pasted above.

Best regards

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

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

GARESIOVINI
Tourist
8 0 2

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.


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?

 

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?

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

MKMUMU2
Excursionist
13 0 3

HI @TyW ,

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

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