Add Terms and Conditions to Checkout

For Shopify Plus store, add this script to the bottom of your checkout.liquid file. Make sure you update the link to the terms and conditions page and check your checkout console for any errors. Also, test if checkout is stopped if the checkbox is not checked. 
{% assign terms_and_conditions_value = "false" %}
    {% for attribute in checkout.attributes %}
      {% if attribute.first == "terms_and_conditions" %}
        {% assign terms_and_conditions_value = attribute.last %}
      {% endif %}
    {% endfor %}

    <script>
      (function($) {
        $(document).on("page:load page:change", function() {
          if (Shopify.Checkout.step === "payment_method") {
            $(document).ready(function() {
              var newHTML = `
                <div class="section section--terms_and_conditions">
                  <div class="section__content">
                    <div class="content-box">
                      <div class="content-box__row">
                        <div class="checkbox-wrapper">
                          <div class="checkbox__input">
                            <input required aria-required="true" class="input-checkbox" aria-controls="section--terms_and_conditions" type="checkbox" value="{{ terms_and_conditions_value }}" name="checkout[attributes][terms_and_conditions]" id="checkout_terms_and_conditions" {% if terms_and_conditions_value == "true" %} checked {% endif %}>
                          </div>

                          <label class="checkbox__label content-box__emphasis" for="checkout_terms_and_conditions">
                            I agree that by making this purchase I am agreeing to <a href="/policies/terms-of-service" target="_blank">Terms of Service</a>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                `;

              $('.step__footer').before(newHTML);

              $('#checkout_terms_and_conditions').click(function() {
                if($(this).is(':checked')) {
                  $(this).val('true');
                } else {
                  $(this).val('false');
                }
              });
            });
          }
        });
      })(Checkout.$);
    </script>
Joe Pichardo | Shopify Developer

About Joe Pichardo

Joe Pichardo is a Shopify Developer creating themes and apps to help other programmers succeed on the ecommerce platform.

Having trouble? Ask for help.