Introduction

In this tutorial, we’ll walk you through how to add a checkbox for terms and conditions below your checkout button. This ensures that customers must agree to your terms before they can complete their purchase, helping protect your business while making sure shoppers are aware of your policies.

By using a bit of CSS and some basic coding knowledge, you can easily add this functionality to your store. These customization options are perfect for store owners or developers with a little bit of CSS experience. Plus, it adds an extra layer of trust and professionalism to your checkout process!

Example Images

Here is an example of what the checkout button looks like before the Terms and Conditions have been checked:

Example Images

Here is an example of what the checkout button looks like after the Terms and Conditions have been checked:

Accessing Custom CSS/HTML Settings

To begin customizing the CSS for your UpCart, follow these steps:

Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll to the bottom of the page until you find the section labeled “Custom HTML” and "Custom CSS".

Here is the HTML Code to Copy and Paste into the HTML Sections titled “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)
        {
            // Hide the warning
            termsWarning.style.display = "none";
           if(checkoutButton != null)
            {
                // Enable pointer events & remove disabled styling from the checkout button
                checkoutButton.classList.remove("upcartDisableCheckoutButton");
            }
            if(cartElement)
            {
                // Remove disabled styling from the express buttons
                cartElement.classList.remove("style_upcartDisableExpressButton");
            }
            
            if(expressButtons)
            {
                // Allow pointer events on the express buttons
                expressButtons.classList.remove("upcartDisableExpressButton");
            }
        }
        else
        {
            // Show the warning
            termsWarning.style.display = "block";
            if(checkoutButton != null)
            {
                // Disable pointer events & add disabled styling to the checkout button
                checkoutButton.classList.add("upcartDisableCheckoutButton");
            }
            if(cartElement)
            {
                // Add disabled styling to the express buttons
                cartElement.classList.add("style_upcartDisableExpressButton");
            }
            if(expressButtons)
            {
                // Disable pointer events on the express buttons
                expressButtons.classList.add("upcartDisableExpressButton");
            }
        }
    }

upcartOnCartLoaded = (cart) => 
{
    var checkbox = window.upcartDocumentOrShadowRoot.querySelector("#agree");
    if(checkbox)
        checkbox.setAttribute('onclick', "TermsCheckboxUpdate()");

    TermsCheckboxUpdate();

}
</script>

Here is the HTML Code to Copy and Paste into the HTML Sections titled “Below Checkout Button”:

Note: In this code, make sure to adjust the URL and wording for the “Terms & Conditions” link.

<div class="upcartTermsWrapper">
  <div class="upcartTermsCheckboxWrapper">
    <input id="agree" type="checkbox">
  I accept the 
  <a class="upcartTermsAnchor" href="https://www.google.ca" target="_">Terms & Conditions</a>.
  </div>
  <div class="upcartTermsWarning">
    Please accept the Terms & Conditions above before continuing.
  </div>
</div>

Here is the CSS Code to Copy and Paste into the CSS Section:

Note: In this code, the colors are red and bright blue, please feel free to change them as needed to match your own branding preferences.

.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;
    padding: 0px !important;
    font-size: 14px !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;
}

Conclusion

By following these steps, you'll have a fully functional terms and conditions checkbox that ensures customers are aligned with your store’s policies before they check out.

Still Need Help?

If you need any assistance with customizations, we recommend consulting with a Shopify Expert about adding HTML, CSS, and even JavaScript to your cart drawer.

See Shopify Experts

Adding A Subtotal Line To UpCart

Add an End Total Line Above the Checkout Button with CSS

Prevent Upsell-Only Purchases with CSS: Require Regular Products in Cart

How To Add Code To Your Shopify Theme For Accelerated Checkout Buttons