How to Add a Disclaimer Checkbox to the Cart/Checkout on Shopify

Last Updated on March 8, 2022 by Dan S
Originally Published April 22, 2021.

Depending on the products you’re selling in your Shopify store, you might want or need to add a disclaimer at checkout. By implementing this measure, you’ll know they’ve read and agreed to the disclaimer/terms before checking out.

Does Shopify allow you to add a disclaimer at checkout, or do you need a specific app for this? By default, there is no inbuilt method by Shopify. There are GDPR and California Privacy Act checkboxes for the Checkout but nothing custom for other needs such as ensuring the customer is over 18 for example.

Some themes have this option. If not, we can add one so let’s have a look.

Add A Disclaimer Checkbox On Shopify

Go to your Shopify admin page and click on Online Store.
Select Themes and choose the theme you want to edit.
Click on Actions and select Edit Code.
Go to Assets and click on theme.js. In some cases, it might be theme.js.liquid.
Go to the bottom of this file and paste the 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;

      }

    });

  });

Click on Save.
Select Sections.
Click on cart-template.liquid. If you don’t have this file in your Shopify admin, look for cart.liquid or cart-template.liquid in Templates.
Look for the HTML code. You should see one of the two elements: <input> or <button>.
The code here should look like this:

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

Paste this code on a new line over the checkout button.

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