Add a custom "I agree" checkbox to Product page

This guide will go over how to add a custom "I agree and read the terms & conditions" checkbox to a product page, not allowing the customer to add to cart unless they have checked the box.

1). Add tag to product The first step is to go into your Shopify admin, go to Products, and select the product(s) you wish to add the checkbox too. Add a tag to the product called "readagree", or something similar. Hit save and go to your code.

2). Add Checkbox to code The next step is to open up product-add-to-cart-form.liquid, and paste this code somewhere above the price/quantity area.

This is the checkbox HTML that will be hidden unless a product has the tag of "readagree". Add some CSS in your custom.scss.liquid that will hide it by default.

.check-wrapper{
   display: none;
   visibility: hidden;
}

3). Add functionality Now we need to add the functionality to make sure our checkbox not only appears on the right products, but works. Open your product-page.liquid, scroll to the bottom, and add this code above any script tags in the file.

{% for tag in product.tags %}
  {% if tag == "readagree" %}{% endif %} {% endfor %}

This code first loops through all of the current product's tags, and looks for the tag "readagree" that we added in step 1. If the current product has that tag, you notice a script will run that disables the Add to Cart button (#purchase), as well as changes the display of our checkbox from hidden to visible. Now, we need to make sure once the checkbox is checked, that the Add to Cart button will no longer be disabled. We also need to make sure that if for some reason it becomes unchecked again, that the Add to Cart button will be disabled once again. Still on the product-page.liquid, scroll down and add this code, into an existing script tag, or in one that you created. The important part is to make sure it's wrapped in a document.ready function.

This code listens for a change in our checkbox, and if a change is detected, an if statement fires off. It checks to see if the box is checked, or unchecked, and makes the appropriate changes to the Add to Cart button. And you're done! Add some custom styling to your checkbox and you're ready to go.