Exigir aceptación de términos antes del checkout

Agrega una casilla de verificación debajo del botón de checkout e impide que el comprador continúe hasta que la marque. Útil para aceptación de términos, verificaciones de edad y confirmaciones de productos hechos a pedido.

El evento checkout no puede cancelar el checkout. Se dispara como una notificación justo antes de que el navegador navegue, así que devolver false o llamar a preventDefault no hace nada. La única forma de condicionar el checkout es impedir que el botón responda a los clics antes de que se presione, que es lo que muestra esta página.Trátalo como un elemento disuasorio de UI, no como una garantía legal. Un comprador decidido todavía puede llegar al checkout directamente.

Cómo funciona

Tres piezas:

Un bloque de código personalizado debajo del botón de checkout renderiza la casilla.
Mientras la casilla está sin marcar, el bloque agrega una clase a los botones de checkout y de pago exprés del carrito a través del shadow root.
CSS personalizado hace que esa clase deshabilite los clics.

Paso 1: Agrega el bloque de la casilla

Agrega un bloque de código personalizado debajo de tu bloque de botón de Checkout, cámbialo al modo React component y pega:

function CustomCode(props) {
  const [accepted, setAccepted] = useState(false);

  useEffect(() => {
    const root = window.aftersell?.cart?.shadowRoot;
    if (!root) return;

    const targets = root.querySelectorAll(
      '.cart-external-checkout-button, .cart-external-express-buttons'
    );
    targets.forEach((el) => el.classList.toggle('checkout-gated', !accepted));
  }, [accepted, props.cart]);

  return (
    <div style={{ width: '100%', fontSize: '14px', textAlign: 'center' }}>
      <label style={{ display: 'flex', gap: '6px', justifyContent: 'center', alignItems: 'center' }}>
        <input
          type="checkbox"
          checked={accepted}
          onChange={(e) => setAccepted(e.target.checked)}
        />
        <span>
          I accept the{' '}
          <a href="https://yourstore.com/terms" target="_blank" rel="noopener noreferrer">
            Terms &amp; Conditions
          </a>
        </span>
      </label>
      {!accepted && (
        <div style={{ color: '#c00', fontWeight: 600, marginTop: '6px' }}>
          Please accept the terms above to continue.
        </div>
      )}
    </div>
  );
}

Haz clic en Compile y luego activa “Use custom template”. El bloque no renderiza nada hasta que lo hagas. La dependencia props.cart importa: vuelve a aplicar la clase después de que el carrito se re-renderiza, lo que de otro modo la borraría.

Paso 2: Agrega el CSS

En Cart settings → Custom CSS:

.checkout-gated {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

pointer-events: none es lo que realmente bloquea el clic; la opacidad solo le muestra al comprador el porqué.

Paso 3: Pruébalo

En la vista previa, confirma que:

El botón de checkout está atenuado y no responde a los clics al cargar.
Marcar la casilla lo habilita; desmarcarla vuelve a deshabilitar el botón.
Los botones de pago exprés también están bloqueados.
Agregar o quitar un artículo no vuelve a habilitar el botón mientras la casilla está sin marcar.

Este último punto es el fallo más común. Si el botón se vuelve a habilitar solo después de un cambio en el carrito, el efecto no se está volviendo a ejecutar. Verifica que props.cart esté en el arreglo de dependencias.

Registrar quién aceptó

La casilla es estado que solo existe en el navegador; nunca llega al pedido. Para registrar la aceptación, estámpala en cada línea como una propiedad en el momento de agregar al carrito:

<input type="hidden" name="properties[_terms_version]" value="2026-01">

Agrégalo a tu formulario de producto en el tema. Shopify lee properties[...] directamente del formulario, así que el valor llega al pedido sin importar quién realice el agregado: Aftersell, el tema u otra app. Una propiedad con el prefijo _ no aparece en la línea visible para el comprador pero sí llega a Shopify, por lo que figura en el pedido. Esto registra qué versión de los términos estaba vigente, no que el comprador marcó la casilla.

Cosas que debes hacer bien

Apunta solo a las clases cart-external-*. Las gemelas cart-internal-* son la plomería interna del carrito, no un asidero para tu código. Consulta CSS personalizado.
Verifica que shadowRoot exista antes de usarlo. Es undefined hasta que el carrito arranca.
El bloque no renderiza nada hasta que el carrito carga, así que el botón de checkout nunca está brevemente activo antes de que se aplique el bloqueo.
Un bloque React que lanza un error no renderiza nada y el resto del carrito sigue funcionando, lo que aquí significa un botón de checkout sin proteger. Prueba en la vista previa antes de publicar.

Adónde ir después

Bloques de código personalizado: el modo React y sus props.
CSS personalizado: la convención de clases públicas.
Events: lo que el evento checkout puede y no puede hacer.

Primeros pasos

Página de inicio

Mejores prácticas

Ventas adicionales poscompra

Carrito de Aftersell

Ventas adicionales en el pago (Shopify Plus)

Página de agradecimiento

Ventas adicionales en la página de producto

Rokt Thanks

Estrategias

Analíticas y seguimiento

Integraciones

Aftersell MCP

Facturación y cuenta

Solución de problemas

Exigir aceptación de términos antes del checkout

Cómo funciona

Paso 1: Agrega el bloque de la casilla

Paso 2: Agrega el CSS

Paso 3: Pruébalo

Registrar quién aceptó

Cosas que debes hacer bien

Adónde ir después

​Cómo funciona

​Paso 1: Agrega el bloque de la casilla

​Paso 2: Agrega el CSS

​Paso 3: Pruébalo

​Registrar quién aceptó

​Cosas que debes hacer bien

​Adónde ir después

Cómo funciona

Paso 1: Agrega el bloque de la casilla

Paso 2: Agrega el CSS

Paso 3: Pruébalo

Registrar quién aceptó

Cosas que debes hacer bien

Adónde ir después