fbpx

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

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

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 

If you’re using a sectioned theme, follow this process to add a disclaimer on checkout. 

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

 

  • Instead of the /pages/terms-and-conditions part of the code above, paste the URL of the Terms and Conditions page of your store. 

If you don’t have a Terms and Conditions page, make one. Click Save. If you’re using non-sectioned themes, follow the guides here.

Related Posts
Leave a Reply