El cajón del carrito de Shopify no se abre: correcciones de AJAX, temas y aplicaciones (2026)

Solución rápida: reducir la presión del guión alrededor del carrito

Primero identifique qué ruta del carrito está fallando

No empieces editando Liquid. Reproduzca el problema en cuatro lugares: página del producto, cuadrícula de colección, producto destacado en la página de inicio y modo de vista rápida. Muchas tiendas Shopify tienen códigos para agregar al carrito separados para cada superficie. El cajón puede funcionar en la plantilla del producto mientras las tarjetas de colección aún se publican directamente en la página del carrito.

Abra DevTools, haga clic en Agregar al carrito y observe la pestaña Red. Un flujo AJAX saludable generalmente se publica en /cart/add.js, obtiene una respuesta exitosa, recupera secciones actualizadas del carrito o /cart.jsy abre el cajón. Una redirección a /cart significa que el formulario utiliza un envío HTML normal o que el controlador AJAX no se adjuntó.

Si agregar al carrito funciona pero las compras aún desaparecen más tarde, compárelo con el Shopify agrega al carrito pero no tiene lista de verificación de ventas y el guía de depuración del botón de pago.

Verifique la configuración del carrito de temas antes de tocar el código

En muchos temas de la Tienda Online 2.0, el cajón está controlado por una configuración de tema. Vaya a Tienda en línea, Personalizar, Configuración del tema, Carrito, luego confirme que el tipo de carrito esté configurado en cajón o notificación en lugar de página. Guarde, obtenga una vista previa y pruebe en una ventana de incógnito.

Luego duplique el tema en vivo y obtenga una vista previa de un tema Dawn sin modificar. Si Dawn abre el cajón y su tema en vivo no lo hace, el problema es el código del tema o una aplicación de tienda instalada. Si Dawn también redirige al carrito, busque configuración, disponibilidad del producto o un botón de creación de páginas que redirija intencionalmente.

Las tiendas que han instalado y eliminado varias herramientas de carrito también deben ejecutar el lista de verificación de limpieza de restos de aplicaciones. Los fragmentos antiguos pueden seguir escuchando los eventos del carrito mucho después de que la aplicación desaparezca.

Arreglar el flujo de actualización del cajón y el agregado al carrito de AJAX

Un cajón necesita dos trabajos separados: agregar el elemento y luego renderizar el cajón actualizado. Los desarrolladores suelen arreglar el primer trabajo y olvidarse del segundo. El resultado es un recuento de carritos que cambia solo después de la actualización, un cajón que se abre vacío o una tarjeta de producto que envía a los compradores a la página del carrito.

async function addToCart(form) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    body: new FormData(form),
    headers: { Accept: 'application/json' },
  });

  if (!response.ok) throw new Error('Add to cart failed');

  const cart = await fetch('/cart.js').then((res) => res.json());
  document.dispatchEvent(new CustomEvent('cart:refresh', { detail: { cart } }));
  document.dispatchEvent(new CustomEvent('cart:open'));
}

Su tema puede usar diferentes nombres de eventos. Los temas basados ​​en Dawn a menudo tienen su propia notificación de carrito o clase de cajón de carrito. Busca tu tema para carrito:actualizar, carrito:abierto, carro-cajón, notificación-carrito, y /cart/add.js, luego mantenga una ruta de evento consistente.

Los creadores de páginas y las aplicaciones integradas pueden pasar por alto el cajón

GemPages, PageFly, páginas de destino personalizadas, secciones de compra rápida y widgets de paquetes pueden generar su propio botón para agregar al carrito. Esos botones se pueden configurar para redirigir al carrito, abrir un mini carrito o llamar a un script de ayuda. Si solo fallan las páginas del creador de páginas, primero corrija la configuración del elemento antes de reescribir el código del tema.

Desactive la aplicación incrustada en un tema duplicado y luego vuelva a realizar la prueba. Vuelva a habilitarlos uno por uno, comenzando con los cajones del carrito, obsequios, paquetes, suscripciones, ventas adicionales, búsqueda, personalización, chat y píxeles. El mismo flujo de depuración en el scripts de aplicaciones que ralentizan la guía de Shopify se aplica aquí.

Para una limpieza de scripts más amplia, utilice el guía de impacto de scripts de terceros, guía de limpieza de código no utilizado, y guía completa de optimización de velocidad de Shopify.

Lista de verificación de depuración manual del cajón del carrito de Shopify

Google Interacción con la guía de Next Paint es útil aquí porque un cajón del carro retrasado suele ser un problema de capacidad de respuesta. Si los toques móviles se retrasan, lea el Guía Shopify INP y pruebe nuevamente después de la limpieza del script.

Cuando el cajón es parte de una fuga de ingresos más amplia, utilice optimización profesional de la velocidad de Shopify o Precios de trueno para decidir si la automatización de aplicaciones o la limpieza experta es el camino más rápido.

FAQ