> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a Mandatory Terms and Conditions Checkbox to Your Cart

> Require customers to agree to your terms before proceeding with checkout.

# 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

1. Go to **Upcart > Cart Editor > Settings > Custom HTML**
2. 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>
```

<Note>
  **Legacy note:** `window.upcartOnCartLoaded` callbacks still work but are deprecated and log console warnings. Use `upcartSubscribeCartLoaded` for all new scripts.
</Note>

1. 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

1. Go to **Upcart > Cart Editor > Settings > Custom CSS**
2. 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](https://www.shopify.com/partners/directory)