> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Los botones de pago exprés no se pueden hacer clic en Upcart

> Este artículo explica cómo solucionar problemas con los botones de checkout exprés de Shopify cuando no funcionan en Upcart

⚠️ **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.

<div id="overview">
  ## Resumen
</div>

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.

***

<div id="required-setup-for-the-new-module">
  ## Configuración requerida para el módulo nuevo
</div>

⚠️ **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.

***

<div id="how-to-fix">
  ## Cómo solucionarlo
</div>

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.

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{% if additional_checkout_buttons %} <div style="display: none !important">     {{ content_for_additional_checkout_buttons }} </div> {% endif %}
```

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**](/es/upcart/express_payments_module) para obtener las instrucciones de configuración completas.

***

<div id="why-this-happens">
  ## Por qué sucede esto
</div>

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.

***

<div id="common-problems-and-fixes">
  ## Problemas comunes y soluciones
</div>

<div id="1-the-buttons-arent-rendered-on-the-page">
  ## 1. Los botones no se renderizan en la página
</div>

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

<Warning>
  **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.
</Warning>

***

<div id="3-css-is-blocking-the-buttons">
  ## 3. El CSS está bloqueando los botones
</div>

Algunos temas ocultan los botones exprés por defecto usando CSS. Por ejemplo:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.additional-checkout-buttons {   display: none !important; }
```

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

***

<div id="4-legacy-settings-are-interfering">
  ## 4. Las configuraciones antiguas están interfiriendo
</div>

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.

***

<div id="still-having-issues">
  ## ¿Sigues teniendo problemas?
</div>

<div id="disable-shadow-dom-in-upcart">
  ## Desactivar Shadow DOM en Upcart
</div>

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](/es/upcart/render_cart_in_shadow_dom_setting) para conocer el compromiso completo.

***

<div id="need-more-help">
  ## ¿Necesitas más ayuda?
</div>

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**](https://www.shopify.com/partners/directory) para ediciones avanzadas del tema o asistencia con la integración.

***

<div id="references">
  ## Referencias
</div>

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