Skip to main content

Add a Mandatory Terms and Conditions Checkbox to Your Cart

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

Updated today

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");     }   }    upcartOnCartLoaded = () => {     var checkbox = window.upcartDocumentOrShadowRoot.querySelector("#agree");     if (checkbox) checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");     TermsCheckboxUpdate();   }; </script>
  1. Paste the following in Below checkout button. Update the link and text to match your store’s terms:

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

Did this answer your question?