{% 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>
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.
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.