Overview
This tutorial shows you how to add a checkbox beneath the checkout button that requires customers to agree to your store’s terms and conditions. When unchecked, the checkout and express payment buttons are disabled.
This is a great way to ensure legal compliance, set clear expectations, and add professionalism to your cart experience.
What this customization does
Adds a terms and conditions checkbox under the checkout button
Prevents customers from checking out until they agree
Works with both standard and express checkout buttons
Supports fully customizable text and link
This customization requires basic HTML, JavaScript, and CSS. It is best for store owners or developers with beginner coding knowledge.
Step 1: Add custom HTML
Go to Upcart > Cart Editor > Settings > Custom HTML
Paste the following in Above announcements/rewards:
<script>
function TermsCheckboxUpdate() {
var checkbox =
window.upcartDocumentOrShadowRoot.querySelector("#agree");
var termsWarning =
window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");
var checkoutButton =
window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");
var cartElement =
window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");
var expressButtons =
window.upcartDocumentOrShadowRoot.querySelector(
"#upcart-additional-checkout-buttons"
);
if (checkbox.checked) {
termsWarning.style.display = "none";
if (checkoutButton) {
checkoutButton.classList.remove("upcartDisableCheckoutButton");
}
if (cartElement) {
cartElement.classList.remove("style_upcartDisableExpressButton");
}
if (expressButtons) {
expressButtons.classList.remove("upcartDisableExpressButton");
}
} else {
termsWarning.style.display = "block";
if (checkoutButton) {
checkoutButton.classList.add("upcartDisableCheckoutButton");
}
if (cartElement) {
cartElement.classList.add("style_upcartDisableExpressButton");
}
if (expressButtons) {
expressButtons.classList.add("upcartDisableExpressButton");
}
}
}
upcartOnCartLoaded = () => {
var checkbox =
window.upcartDocumentOrShadowRoot.querySelector("#agree");
if (checkbox) {
checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");
}
TermsCheckboxUpdate();
};
</script>
Paste the following in Below checkout button. Update the link and text to match your store’s terms:
<div class="upcartTermsWrapper"> <div <div class="upcartTermsWrapper">
<div class="upcartTermsCheckboxWrapper">
<input id="agree" type="checkbox" />
I accept the
<a
class="upcartTermsAnchor"
href="https://yourstore.com/terms"
target="_blank"
>
Terms & Conditions
</a>.
</div>
<div class="upcartTermsWarning">
Please accept the Terms & Conditions above before continuing.
</div>
</div>
Step 2: Add custom CSS
Go to Upcart > Cart Editor > Settings > Custom CSS
Paste the following to control styling:
.upcartDisableCheckoutButton {
pointer-events: none !important;
background-color: grey !important;
opacity: 0.5 !important;
}
.upcartDisableExpressButton {
pointer-events: none !important;
}
.upcartTermsWarning {
text-align: center;
width: 100%;
color: red;
font-size: 14px;
font-weight: bold;
}
.upcartTermsAnchor {
text-decoration: underline !important;
color: #0000EE;
font-weight: bold;
font-size: 14px !important;
padding: 0 !important;
}
.upcartTermsWrapper {
width: 100%;
}
.upcartTermsCheckboxWrapper {
font-size: 14px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.upcart-cart.style_upcartDisableExpressButton
.upcart-express-pay-button {
background-color: grey !important;
opacity: 0.5 !important;
}You can change the colors to match your branding by updating color, background-color, and opacity values.
Final result
When customers open the cart:
Checkout and express buttons are disabled until the checkbox is ticked
A red warning message appears if they try to proceed without agreeing
Once the box is checked, all buttons become active
Need help?
For advanced implementations or more complex requirements, we recommend working with a Shopify Expert. Upcart’s support team does not assist with writing or troubleshooting custom code.