El botón Agregar al carrito de Shopify no funciona: correcciones de variantes, aplicaciones y temas (2026)

Solución rápida: mantenga las páginas de productos receptivas mientras depura

Comience con el modo de falla exacto

"Agregar al carrito no funciona" puede significar cinco cosas diferentes. Es posible que el botón no responda. Podría mostrar una ruleta para siempre. Podría agregar la variante incorrecta. Es posible que muestre un error solo después de cambiar el tamaño. O podría agregar el artículo pero no actualizar el cajón del carrito.

Abra la página del producto en modo incógnito, elija un producto simple en stock y observe DevTools mientras hace clic. Si no se activa ninguna solicitud, el controlador de clic o el formulario están rotos. si /cart/add.js devuelve 400, la carga útil no es válida. Si la solicitud tiene éxito pero la interfaz de usuario del carrito no se actualiza, lea el Guía para abrir el cajón del carrito de Shopify.

Si los compradores pueden agregar cosas al carrito pero no comprar, continúe con agregar al carrito pero no hay ventas y tráfico pero sin ventas diagnóstico.

Verifique los ID de las variantes antes de culpar al pago

Un formulario de producto debe enviar una ID de variante válida. Cuando un comprador cambia de talla o de color, lo oculto identificación La entrada debe actualizarse. Si permanece atascado en la primera variante, agregar al carrito puede fallar en el caso de variantes agotadas, agregar la opción incorrecta o devolver una solicitud no válida.

<form method="post" action="/cart/add" data-product-form>
  <input type="hidden" name="id" value="{{ selected_or_first_available_variant.id }}">
  <input type="number" name="quantity" value="1" min="1">
  <button type="submit">Añadir al carrito</button>
</form>

En el contenido de Astro, ese ejemplo de Liquid se muestra como código. En tu tema de Shopify, asegúrate de que el valor se actualice cuando cambie la variante seleccionada. Agregue un registro de consola temporal si es necesario:

document.addEventListener('variant:change', (event) => {
  const input = document.querySelector('[data-product-form] input[name="id"]');
  if (input && event.detail?.variant?.id) {
    input.value = event.detail.variant.id;
    console.log('Selected variant', input.value);
  }
});

Auditar el marcado del formulario del producto y los campos obligatorios

Los temas personalizados a menudo interrumpen la opción de agregar al carrito mientras mueven los botones a barras adhesivas, acordeones de productos o secciones de creación de páginas. El botón debe estar dentro del formulario correcto o vinculado explícitamente a él con un Forma Atributo . Los campos de personalización obligatorios deben tener valores antes del envío.

También verifique el inventario y los planes de venta. Los productos de suscripción, las aplicaciones de pedidos anticipados, los paquetes y las opciones personalizadas pueden requerir un ID de plan de venta o propiedades de línea de pedido. Si el widget de la aplicación se carga lentamente o falla, el botón nativo puede enviar una solicitud de carrito incompleta.

Para el rendimiento de la página del producto, utilice el guía de velocidad de la página del producto, Lista de verificación de optimización de videos de productos, y guía completa de optimización de velocidad de Shopify.

Buscar conflictos de aplicaciones y JavaScript

A single uncaught JavaScript error can stop the add-to-cart handler from binding. Look for red console errors before the click and immediately after the click. Then disable recently added apps in a duplicate theme: subscriptions, bundles, size charts, personalization, reviews, sticky carts, urgency timers, and pixels.

Si el problema desaparece cuando las aplicaciones incrustadas están desactivadas, vuelva a habilitarlas una a la vez. El código antiguo también importa. Una aplicación eliminada puede dejar fragmentos tema.liquido, plantillas de productos o secciones del carrito. Utilice el guía de limpieza de restos de aplicaciones y guía de corrección de scripts de aplicaciones.

Los grifos lentos son un modo de falla separado. de google Documentación INP explica por qué una interacción retrasada todavía se siente rota. Thunder puede manejar la capa de velocidad automatizada y el Guía de reparación de INP de Shopify muestra la ruta manual más profunda.

Lista de verificación de depuración manual para agregar al carrito de Shopify

Si necesita una solución más rápida que la depuración manual, compare Precios de trueno con servicios personalizados de optimización de velocidad de Shopify.

FAQ