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 Terms and Conditions checkbox before clicking the add an agree to terms and conditions checkout button, an alert pop up will prevent them from continuing.

Add an “Terms and conditions checkbox” to your cart page that customers must always be check before continuing to the checkout. Add terms and conditions to your cart that customers must check before the checkout. Popup will show if there have no available checkbox.

The app will add the date and time of when the customer has ticked the checkbox and agreed to your terms and conditions to the order details under the Additional Details section. This app can be used to add a customizable ‘agree to terms and conditions checkbox’ very easily, to your cart page or drawer. 

Tip: It’s not possible to checkbox to the checkout pages. It can be added only to the cart page.

Editing your theme code to add Terms & Condition checkbox this feature

• Section directory, find the cart-template.liquidfile and locate the checkout button. The code for the checkout button will be look like the following code:

<input type="submit" name="checkout"
  class="cart__submit btn btn--small-wide"
  value="{{ 'cart.general.checkout' | t }}">

• Then add the following code right above the add agree to terms and conditions checkbox:

{% comment %} terms and conditions checkbox {% endcomment %}
                {% if section.settings.enable_tc_checkbox %}
                <p style="width:100%; text-align: right; display:block;  margin: 10px 0;">
                  <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
                  <label style="display:inline; float:none" for="agree">
                    {{ section.settings.tc_text }} <a style="text-decoration:underline" href="{{ section.settings.tc_link }}">{{ section.settings.tc_link_text }}</a>.
                  </label>
                </p>
                {% endif %}
          {% comment %} end terms and conditions checkbox {% endcomment %}

• For the Same file, locate the {% schema %} tag for making it dynamically manageable from the theme section. Inside the {% schema %} try to find the settings and add the following code before ]:

  ,
    {
        "type": "header",
        "content": "Terms & Conditions"
    },
    {
        "type": "checkbox",
        "id": "enable_tc_checkbox",
        "label": "Enable Terms & Conditions checkbox",
        "default": true
      },
        {
          "type": "text",
          "id": "tc_text",
          "label": "Text after checkbox",
          "default": "I agree with the "
        },
        {
          "type": "text",
          "id": "tc_link_text",
          "label": "Link text",
          "default": "Terms & Conditions"
        },
        {
          "type": "url",
          "id": "tc_link",
          "label": "Link URL"
        }

• In the Assets directory open theme.js and add the following code at the bottom of the file:

// Terms & Conditions checkbox at the cart

$(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;
            }
        }
    );
});

Congrats, You’ve completed the coding parts. Now Terms & Condition Checkbox available on the cart page. Also, Terms and Conditions Checkbox Shopify manageable from the theme section. You can customize this from Themes>Customize>cart