Add an agree to terms and conditions checkbox

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.

Agree with terms

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.

Add the checkbox to the Cart page

To add the checkbox to your Cart page:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under Layout, click theme.liquid:

    Agree with terms theme liquid

  4. Locate the closing </body> tag.

  5. Above the closing </body> tag, copy and 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>
Agree with terms theme liquid code
  1. Click Save.

  2. Under Templates, click cart.liquid:

    Agree with terms cart

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

<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>
Agree with terms cart code

Tip

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:

Agree with terms cart code brooklyn
Agree with terms cart code brooklyn 2

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

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

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under Templates, click cart.liquid.

  4. Find the following code:

      {% if additional_checkout_buttons %}
        <div>{{ content_for_additional_checkout_buttons }}</div>
      {% endif %}
    
    
  5. Above this code, copy and paste {% comment %}.

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

      {% comment %}
      {% if additional_checkout_buttons %}
        <div>{{ content_for_additional_checkout_buttons }}</div>
      {% endif %}
      {% endcomment %}
    
    
  7. Click Save.

Want to discuss this page?

Visit the Shopify Community