Resumen

Este tutorial te muestra cómo agregar una casilla debajo del botón de checkout que requiere que los clientes acepten los términos y condiciones de tu tienda. Cuando no está marcada, los botones de checkout y de pago exprés se deshabilitan. Esta es una excelente manera de garantizar el cumplimiento legal, establecer expectativas claras y agregar profesionalismo a la experiencia de tu carrito.

Qué hace esta personalización

Agrega una casilla de términos y condiciones debajo del botón de checkout
Impide que los clientes finalicen la compra hasta que acepten
Bloquea el botón de checkout estándar. En la Versión 1 del módulo de pagos exprés también atenúa los botones exprés — consulta la nota a continuación si estás en la Versión 2
Admite texto y enlace totalmente personalizables

Esta personalización requiere conocimientos básicos de HTML, JavaScript y CSS. Es ideal para propietarios de tiendas o desarrolladores con conocimientos básicos de programación.

La parte de los botones exprés es solo para la Versión 1. El script busca #upcart-additional-checkout-buttons y el CSS aplica estilos a .upcart-express-pay-button — ambos pertenecen al módulo de pagos exprés de la Versión 1. La Versión 2 renderiza #upcart-express-payments y clona los propios botones de Shopify, que no llevan ninguno de estos selectores, por lo que el checkout exprés sigue siendo clicable incluso cuando la casilla no está marcada. El botón de checkout estándar se bloquea en ambas versiones.

Paso 1: Agrega HTML personalizado

Ve a Upcart > Cart Editor > Settings > Custom HTML
Pega lo siguiente en 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");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>

Nota sobre código heredado: los callbacks de window.upcartOnCartLoaded todavía funcionan pero están obsoletos y registran advertencias en la consola. Usa upcartSubscribeCartLoaded para todos los scripts nuevos.

Pega lo siguiente en Below checkout button. Actualiza el enlace y el texto para que coincidan con los términos de tu tienda:

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

Paso 2: Agrega CSS personalizado

Ve a Upcart > Cart Editor > Settings > Custom CSS
Pega lo siguiente para controlar los estilos:

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

Puedes cambiar los colores para que coincidan con tu marca actualizando los valores de color, background-color y opacity.

Resultado final

Cuando los clientes abren el carrito:

Los botones de checkout y exprés están deshabilitados hasta que se marca la casilla
Aparece un mensaje de advertencia en rojo si intentan continuar sin aceptar
Una vez que se marca la casilla, todos los botones se activan

¿Necesitas ayuda?

Para implementaciones avanzadas o requisitos más complejos, recomendamos trabajar con un Shopify Expert. El equipo de soporte de Upcart no ayuda a escribir ni a solucionar problemas de código personalizado. Ver Shopify Experts

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Agrega una casilla obligatoria de términos y condiciones a tu carrito

Resumen

Qué hace esta personalización

Paso 1: Agrega HTML personalizado

Paso 2: Agrega CSS personalizado

Resultado final

¿Necesitas ayuda?

​Resumen

​Qué hace esta personalización

​Paso 1: Agrega HTML personalizado

​Paso 2: Agrega CSS personalizado

​Resultado final

​¿Necesitas ayuda?

Resumen

Qué hace esta personalización

Paso 1: Agrega HTML personalizado

Paso 2: Agrega CSS personalizado

Resultado final

¿Necesitas ayuda?