For many Shopify stores, especially those selling customized products, digital items, or items with special terms, it’s important to make sure customers agree to your policies before they can continue to checkout.

In the Horizon theme, this logic isn’t built-in — but you can add it with a small customization.

This guide walks you through a practical implementation that works on the cart page/drawer, making sure the checkout button only becomes clickable when the customer checks the agreement box.

1. Update the cart page structure

Open the cart summary file: snippets/cart-summary.liquid

Look for the code block:

<div class="cart__ctas">Copy

Replace it with below code.

<div class="cart__ctas">
  <div class="cart-terms-checkbox">
    <input type="checkbox" id="agree-checkbox" />
    <label for="agree-checkbox">I agree to the <a href="/policies/terms-of-service" target="_blank">Terms of Service</a></label>
  </div>
  <button
    type="submit"
    id="checkout-button"
    class="cart__checkout-button button"
    name="checkout"
    disabled
    form="cart-form"
  >
    {{ 'content.checkout' | t }}
  </button>

  {% if additional_checkout_buttons and settings.show_accelerated_checkout_buttons %}
    <div class="additional-checkout-buttons additional-checkout-buttons--vertical">
      {{ content_for_additional_checkout_buttons }}
    </div>
  {% endif %}
</div>Copy

This ensures that the cart page checkout button stays disabled until the checkbox is selected.

2. Add a new logic controller file

Create a new JavaScript file in your theme assets: assets/agreeCheckout.js

Paste below code to the new file.

(function agreeCheckout() {
  document.addEventListener("DOMContentLoaded", function () {
    const agreeCheckbox = document.getElementById("agree-checkbox");
    const confirmCheckbox = document.getElementById("confirm-buy-now-checkbox");
    const checkoutButton = document.getElementById("checkout-button");

    let paymentButton = null;

    function updateButtonStates(source) {
      const checked =
        (source && source.checked !== undefined)
          ? source.checked
          : (agreeCheckbox?.checked || confirmCheckbox?.checked || false);
    console.log(source)
     
      if (checkoutButton) {
        checkoutButton.disabled = !checked;
      }

      if (agreeCheckbox && source !== agreeCheckbox) {
        agreeCheckbox.checked = checked;
      }

      if (confirmCheckbox && source !== confirmCheckbox) {
        confirmCheckbox.checked = checked;
      }
    }

    // Bind checkbox change event
    if (agreeCheckbox) {
      agreeCheckbox.addEventListener("change", () => updateButtonStates(agreeCheckbox));
    }
    if (confirmCheckbox) {
      confirmCheckbox.addEventListener("change", () => updateButtonStates(confirmCheckbox));
    }

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });

    // Initialization status
    updateButtonStates();
  });
})();Copy

This file will handle the checkbox-triggered logic, such as enabling/disabling the Checkout button.

3. Load your new script in the theme layout

Go to: layout/theme.liquid

Add your script reference at the end of the <header> block.

{{ 'agreeCheckout.js' | asset_url | script_tag }}Copy

After the above updates, the checkbox selection is added to your cart. Customers must check the agreement before they can continue — making your checkout flow clearer, safer, and compliant with your store’s requirements.

If you need further customization—such as showing different agreement terms for specific products, adding multi-step confirmations, syncing custom rules across product and cart pages, or applying validations only to certain collections—feel free to leave us a message. We’re happy to help you extend this setup to fit your store’s needs.