Skip to main content
⚠️ Aviso importante El snippet del tema que aparece a continuación se aplica a ambas versiones de los módulos de carrito de Upcart: hace que Shopify renderice los botones de checkout acelerado en la página, que es lo que Upcart necesita independientemente de la versión del módulo. El selector .additional-checkout-buttons de abajo es la clase propia de Shopify en el contenedor de checkout acelerado, no una clase del módulo de Upcart, por lo que es la misma en cualquiera de las dos versiones del carrito.

​
Resumen

A veces los botones de checkout exprés no se pueden hacer clic o no aparecen dentro de Upcart. Este es un problema común causado por la forma en que Shopify controla el renderizado de los botones de pago exprés dentro de los temas. Esta guía explica por qué sucede esto y qué puedes hacer para solucionarlo.

​
Configuración requerida para el módulo nuevo

⚠️ Importante: Estos pasos se aplican al nuevo módulo Express Payments de Upcart, no a la versión antigua. Para que los botones de checkout exprés funcionen correctamente en Upcart, debes agregar un pequeño snippet de código a tu tema de Shopify. Sin este snippet, Shopify no cargará los botones de pago correctamente dentro del cajón del carrito. Antes de hacer estos cambios, verifica que los métodos de pago relevantes (p. ej., Shop Pay, PayPal, Apple Pay, Google Pay) estén habilitados en la configuración de tu cuenta de Shopify Admin. Sin habilitar estos métodos, los botones no serán visibles. Además, asegúrate de que el snippet esté colocado directamente debajo de la etiqueta de apertura <body> en el archivo de tu tema (p. ej., <body class="...">). Si se coloca incorrectamente, por ejemplo después de la etiqueta de cierre </body>, los botones de checkout exprés pueden no funcionar correctamente.

​
Cómo solucionarlo

  1. Ve a tu Shopify Admin.
  2. Navega a Online Store > Themes > Edit Code.
  3. Abre layout/theme.liquid, busca la línea <body> y agrega el snippet de abajo en una nueva línea directamente debajo de ella. Debe ir ahí — no en cart-drawer.liquid ni en otro lugar — porque los botones deben existir en cada página donde el carrito pueda abrirse.
  1. Guarda tus cambios y actualiza tu tienda.
  2. Vuelve a abrir el cajón del carrito para verificar que los botones de checkout exprés (como Shop Pay, PayPal, Apple Pay o Google Pay) ahora aparecen y se pueden hacer clic.
Consulta la guía del módulo Express Payments para obtener las instrucciones de configuración completas.

​
Por qué sucede esto

Los botones de pago exprés son gestionados por completo por Shopify, no por Upcart. Esto significa que:
  • Upcart no renderiza sus propios botones. Clona los botones de checkout acelerado de Shopify desde la página hacia el cajón del carrito, por lo que primero deben estar presentes en la página — eso es lo que garantiza el snippet del tema de arriba.
  • Apple Pay solo se mostrará en dispositivos Apple que tengan Apple Pay configurado.
  • Upcart no controla qué botones exprés aparecen, ya que el contenido y la funcionalidad los maneja Shopify.
🎨 Nota:
Los botones en Upcart actúan como contenedores visuales, mientras que Shopify controla su visualización y comportamiento. Upcart no puede modificar su apariencia ni su función.

​
Problemas comunes y soluciones

​
1. Los botones no se renderizan en la página

Esta es la causa más común. Upcart clona los botones de Shopify desde la página, así que si la página no los renderiza, no hay nada que clonar y el carrito muestra un espacio vacío. Qué hacer:
  • Agrega el snippet del tema de la sección Cómo solucionarlo de arriba, directamente debajo de la línea <body> en layout/theme.liquid.
No elimines los botones exprés propios de tu tema para “evitar un conflicto”. Upcart depende de que estén presentes. Eliminarlos del tema, o desactivarlos en la configuración del tema, elimina la fuente desde la que Upcart clona, lo que empeora este problema en lugar de mejorarlo.

​
3. El CSS está bloqueando los botones

Algunos temas ocultan los botones exprés por defecto usando CSS. Por ejemplo:
Qué hacer:
  • Revisa el CSS de tu tema.
  • Pide a tu desarrollador de temas que se asegure de que ninguna regla CSS esté ocultando o desactivando los botones en el cajón de Upcart.

​
4. Las configuraciones antiguas están interfiriendo

Si usaste la versión anterior del módulo Express Payments, las configuraciones guardadas pueden entrar en conflicto con la nueva configuración. Qué hacer:
  • Abre el módulo antiguo de Express Payments (si todavía está visible).
  • Desmarca cualquier opción anterior y guarda.
  • Prueba de nuevo usando el módulo nuevo.

​
¿Sigues teniendo problemas?

​
Desactivar Shadow DOM en Upcart

En algunos casos, los botones de pago exprés pueden no cargarse o actualizarse porque el Shadow DOM está habilitado en Upcart. ¿Qué es el Shadow DOM?
El Shadow DOM aísla a Upcart del resto del código de tu tienda para mejorar la estabilidad. Sin embargo, en casos raros, esta separación puede impedir que los botones exprés de Shopify se actualicen correctamente. Cómo desactivar el Shadow DOM:
  1. Ve a Upcart > Cart Editor > Settings > Cart settings y luego expande Advanced Settings.
  2. Desmarca Render Cart in Shadow DOM.
  3. Guarda y prueba de nuevo.
⚠️ Importante:
Siempre prueba tu carrito después de desactivar el Shadow DOM, ya que puede afectar la forma en que otras apps o elementos del tema interactúan con Upcart. 💡 Nota: Desactivar el Shadow DOM puede solucionar este problema, pero puede introducir conflictos de CSS con tu tema. Consulta el documento sobre la configuración de Shadow DOM para conocer el compromiso completo.

​
¿Necesitas más ayuda?

Si el problema persiste después de completar estos pasos:
  • Contacta a tu desarrollador de temas para que te ayude a eliminar código o configuraciones en conflicto.
  • También puedes contactar a un Shopify Expert para ediciones avanzadas del tema o asistencia con la integración.

​
Referencias

  • Ayuda de Shopify – Checkouts acelerados
  • Documentación para desarrolladores de Shopify – Botones de pago exprés