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.liquid
file 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; } } ); });