Skip to content

Shopify Dude Fix

Why Does a Shopify Terms Checkbox Stop Working After the Cart Updates?

A Shopify terms checkbox that works once but breaks after cart updates usually lost its event listener during Ajax cart rerendering. Use delegated JavaScript or theme events.

Quick answer: A terms checkbox often stops working after cart changes because the cart drawer or cart footer was replaced with new HTML. Direct event listeners attached to the original checkbox or checkout button were removed. Use delegated events, rerender-safe bindings, or a checkout extension if enforcement must happen in checkout.

The real symptom

  • The checkbox works on first load.
  • After changing quantity or opening the cart drawer again, checkout is no longer blocked.
  • The cart page works but the drawer does not, or vice versa.
  • The store uses Ajax cart updates or Section Rendering.

Likely causes

  • Direct listeners were attached to elements that are replaced after cart updates.
  • The checkout button ID differs between cart page and cart drawer.
  • The checkbox lives outside the form or is not included in the rerendered section.
  • Dynamic checkout buttons bypass the cart-page gate.
  • The store needs checkout enforcement but only has a theme-level checkbox.

Fix path

  1. Put the checkbox and checkout button inside the cart section that gets rerendered, or bind from a stable parent such as document.
  2. Target both the cart page and drawer checkout buttons.
  3. Recalculate button state after every cart update.
  4. Disable or account for accelerated checkout buttons if the agreement must be mandatory.
  5. For Shopify Plus or Checkout Extensibility, enforce critical acceptance with an app block or validation pattern.

Simple checks

  • Change quantity, remove an item, and add another item before testing checkout.
  • Inspect whether the checkbox element is replaced after the cart update.
  • Verify the selector matches both #checkout and #CartDrawer-Checkout.

Useful code or DevTools check

document.addEventListener("change", (event) => {
  if (!event.target.matches("[data-agree-checkbox]")) return;
  document.querySelectorAll("[name=checkout]").forEach((button) => {
    button.disabled = !event.target.checked;
  });
});

Do not do this

Do not rely on a cart checkbox to legally enforce a checkout requirement if customers can use express checkout, draft invoices, or direct checkout links that skip the cart.

Sources