| Shopify Developer

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 checkbox before clicking the checkout button, an alert pop up will prevent them from continuing.

 

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

Editing your theme code to add this feature

  • In the Section directory, find the cart-template.liquidfile and locate the checkout button. The code for the checkout button will look like the following :
<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 checkout button:
{% 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 %}

 

  • In 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 it’s available on the cart page. Also, it’s manageable from the theme section. You can customize this from Themes>Customize>cart

cart search