Add an agree to terms and conditions checkbox

add-terms-and-conditions-checkbox.md

layout	title	sidebar_title	description	nav
default	Add an agree to terms and conditions checkbox	Add a terms and conditions checkbox	Add an Agree to terms and conditions checkbox to the cart page of your online Shopify store.	group cart

In this tutorial, you will add an I Agree with the terms and conditions checkbox to the Cart page that the customer must check to continue with the checkout process. If the checkbox is not checked and the customer attempts to check out, an alert box will be shown that prevents them from moving forward.

{{ '/manual/customize/agree-with-terms.jpg' | image }}

{% block "note-information" %} 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. {% endblock %}

Add the checkbox to the Cart page

To add the checkbox to your Cart page:

{% include admin_sidebar/online-themes-edit-html-css.html %}

2. Under Assets, click theme.js: {{ '/manual/customize/agree-with-terms-theme-liquid.png' | image }}

3. At the bottom of the theme.js file, copy and paste the following code:

{% highlight html %}{% raw %}

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

{% endraw %}{% endhighlight %}

{{ '/manual/customize/agree-with-terms-theme-liquid-code.png' | image }}

4. Click Save.

5. Under Sections, click cart-template.liquid: {{ '/manual/customize/agree-with-terms-cart.png' | image }}

6. Locate the HTML code for your checkout buttons, and copy and paste the following code just above it:

{% highlight html %}{% raw %}

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

{% endraw %}{% endhighlight %}

{{ '/manual/customize/agree-with-terms-cart-code.png' | image }}

{% block "note-information" %} If you use the Brooklyn theme, you will need to add your checkbox to the ajax-cart-template.liquid snippet file instead. You will also need to comment out the line theme.checkoutIndicator(); inside the theme.js.liquid JavaScript file: {{ '/manual/customize/agree-with-terms-cart-code-brooklyn.png' | image }} {{ '/manual/customize/agree-with-terms-cart-code-brooklyn-2.png' | image }} {% endblock %}

9. Within the code you pasted, replace /pages/terms-and-conditions with the URL of your Terms & Conditions page.

   You will need to create the Terms & Conditions page if it doesn't already exist. It's not possible to refer to the Terms of Service of your Checkout settings, which is why you create this page.

10. Click Save.

Remove additional checkout buttons from the 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, 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.

To remove the additional checkout buttons from the Cart page:

{% include admin_sidebar/online-themes-edit-html-css.html %}

3. Under Templates, click cart.liquid.

4. Find the following code:

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

5. Above this code, copy and paste {% raw %}{% comment %}{% endraw %}.

6. Below the code you found, copy and paste {% raw %}{% endcomment %}{% endraw %}:

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

7. Click Save.