Add an 'Agree to terms and conditions' checkbox

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.

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.

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS 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 non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Adding a checkbox to your cart page in sectioned themes

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

  2. In the Assets directory, click theme.js or theme.js.liquid.

  3. At the bottom of the file, paste the following code:

      $(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;
          }
        });
      });
    
  4. Click Save.

  5. In the Sections directory, click cart-template.liquid.

  6. Find the HTML code for your checkout button. Look for a <button> element with the name attribute set to checkout. The code might look something like this:

    <button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>
    

    On a new line above the checkout button, paste the following code:

    <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>
    
  7. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.

  8. Click Save.

Boundless

If you use Boundless, you will also need to add the checkbox code to your theme.liquid file in the Layout directory.

  1. In your theme.liquid file, find this line of code:

    <button type="submit" class="btn btn--full cart__checkout" name="checkout">
    
  2. On a new line before the above line of code, paste the following code:

    <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>
    
  3. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.

  4. Click Save.

Brooklyn

If you use Brooklyn, you will need to add the checkbox code to your ajax-cart-template.liquid file in the Snippets directory.

  1. In your ajax-cart-template.liquid file, find this line of code:

    <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">
    
  2. On a new line before the above line of code, paste the following code:

    <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>
    
  3. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.

  4. Click Save.

    The next step for Brooklyn is to comment out a line of code in your theme's JavaScript file.

  5. In the Assets directory, click theme.js.liquid. Find this line of code:

    theme.checkoutIndicator();
    

    Replace it with:

    // theme.checkoutIndicator();
    
  6. Click Save.

Removing the additional checkout buttons from your 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, then 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.

  1. In the Sections directory, click cart-template.liquid.

  2. Find the following code:

      {% if additional_checkout_buttons %}
        <div>{{ content_for_additional_checkout_buttons }}</div>
      {% endif %}
    
    
  3. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, and you can easily add it back if you want to change your new template later. Your code should look like this:

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

Adding a checkbox to your cart page in non-sectioned themes

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

  2. In the Layout directory, click theme.liquid.

  3. Find the closing </body> tag near the bottom of the file.

  4. Above the closing </body> tag, 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>
    
  5. Click Save.

  6. In the Templates directory, click cart.liquid.

  7. Find the HTML code for your checkout button. Look for a <button> element with the name attribute set to checkout. The code might look something like this:

    <button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>
    

    On a new line above the checkout button, paste the following code:

    <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
  8. Within the code you pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.

  9. Click Save.

Boundless

If you use Boundless, you will also need to add the checkbox code to your theme.liquid file in the Layout directory.

  1. In your theme.liquid file, find this line of code:

    <button type="submit" class="btn btn--full cart__checkout" name="checkout">
    
  2. On a new line before the above line of code, paste the following code:

    <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>
    
  3. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.

  4. Click Save.

Brooklyn

If you use Brooklyn, you will need to add the checkbox code to your ajax-cart-template.liquid file in the Snippets directory.

  1. In your ajax-cart-template.liquid file, find this line of code:

    <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">
    
  2. On a new line before the above line of code, paste the following code:

    <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>
    
  3. Within the code you just pasted, replace /pages/terms-and-conditions with the URL of your terms and conditions page.

  4. Click Save.

    The next step for Brooklyn is to comment out a line of code in your theme's JavaScript file.

  5. In the Assets directory, click theme.js.liquid. Find this line of code:

    theme.checkoutIndicator();
    

    Replace it with:

    // theme.checkoutIndicator();
    
  6. Click Save.

Removing the additional checkout buttons from your 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, then 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.

  1. In the Templates directory, click cart.liquid.

  2. Find the following code:

      {% if additional_checkout_buttons %}
        <div>{{ content_for_additional_checkout_buttons }}</div>
      {% endif %}
    
    
  3. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later. Your code should look like this:

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

Updating older themes to use a supported version of jQuery

If you are having trouble getting the 'Agree to terms and conditions' checkbox to work, then confirm that your theme is using a jQuery version of 1.7 or newer. If your theme is running a version of jQuery that is older than 1.7, then you can edit your theme code to use a supported version instead.

  1. In the Layout directory, click theme.liquid.

  2. Within the <head> element, find a script tag that references your theme's jQuery source. The src attribute for the script tag contains a URL that includes /jquery/, followed by the version number. The tag looks something like this:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    

    In the script tag above, the jQuery version being used is 1.4.2. This is an older version of jQuery that will need to be updated for the customization to work. If your theme is using a version that is older than 1.7, replace the version number in the URL with 1.7. The result should look like this:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    
  3. Click Save.

Want to discuss this page?

Visit the Shopify Community