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");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>

Legacy note: window.upcartOnCartLoaded callbacks still work but are deprecated and log console warnings. Use upcartSubscribeCartLoaded for all new scripts.

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. See Shopify Experts

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Add a mandatory terms and conditions checkbox to your cart

Overview

What this customization does

Step 1: Add custom HTML

Step 2: Add custom CSS

Final result

Need help?

​Overview

​What this customization does

​Step 1: Add custom HTML

​Step 2: Add custom CSS

​Final result

​Need help?

Overview

What this customization does

Step 1: Add custom HTML

Step 2: Add custom CSS

Final result

Need help?