El selector de variantes de Shopify no funciona: correcciones en el formulario del producto, el tema y la aplicación (2026)

Solución rápida con Thunder

Verifique el bloque selector de variantes y la plantilla de producto

Los productos Shopify pueden usar hasta tres opciones, y cada combinación de opciones se asigna a una variante. Un tema de trabajo necesita un selector que actualice la información específica del producto cuando cambia la variante seleccionada: precio, precio de comparación, medios, mensaje de inventario, estado de agregar al carrito y la ID de variante oculta enviada con el formulario.

Iniciar en Tienda Online, Personalizar, Plantilla de Producto. Confirme que exista el bloque Selector de variantes en la sección Información del producto. Luego verifique si los productos rotos usan una plantilla diferente a la de los productos que funcionan. Los informes de la comunidad a menudo se reducen a una plantilla de producto a la que le falta el selector o utiliza una sección personalizada antigua.

Si el selector funciona visualmente pero falla agregar al carrito, use el Lista de verificación del botón Agregar al carrito. Si el carrito recibe el artículo correcto pero el cajón falla, utilice el guía de depuración de actualización del carrito.

Asegúrese de que el formulario del producto envíe el ID de variante seleccionado

El error de la variante más cara es sutil: la muestra cambia, pero el formulario aún envía la primera variante. Inspeccione el formulario del producto y encuentre la entrada oculta denominada identificación La entrada. Cambie un tamaño o color y confirme los cambios de valor en el ID de variante seleccionado.

{% form 'product', product, id: 'product-form' %}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

  <variant-radios data-product='{{ product | json | escape }}'>
    <!-- option inputs or swatches -->
  </variant-radios>

  <button type="submit" name="add">Añadir al carrito</button>
{% endform %}

En el contenido de Astro, el líquido anterior se muestra como ejemplo. En tu tema de Shopify, la regla clave es simple: lo oculto nombre="id" La entrada siempre debe coincidir con la variante disponible seleccionada antes de enviar el formulario.

const product = JSON.parse(document.querySelector('[data-product-json]').textContent);
const form = document.querySelector('form[action*="/cart/add"]');
const idInput = form?.querySelector('input[name="id"]');

function findVariant(selectedOptions) {
  return product.variants.find((variant) =>
    variant.options.every((option, index) => option === selectedOptions[index])
  );
}

document.addEventListener('change', (event) => {
  if (!event.target.matches('[data-option-input]')) return;
  const selectedOptions = [...document.querySelectorAll('[data-option-input]:checked, select[data-option-input]')]
    .map((input) => input.value);
  const variant = findVariant(selectedOptions);
  if (variant && idInput) idInput.value = variant.id;
});

Actualizar precio, medios, URL y disponibilidad juntos

Un selector de variantes completo hace más que enviar la identificación correcta. Debería actualizar el precio, el precio de venta, los medios seleccionados, el SKU, la disponibilidad de recogida, el mensaje de inventario y el estado deshabilitado del botón Agregar al carrito. Si solo se actualiza un elemento, los compradores ven información contradictoria y dudan.

Los enlaces profundos también son importantes. Si un comprador llega a ?variante=123, la página debe preseleccionar esa variante y mostrar la información coincidente. La guía de temas de Shopify destaca el manejo de enlaces profundos de variantes porque los anuncios, correos electrónicos y recomendaciones de productos a menudo envían tráfico directamente a una variante seleccionada.

La velocidad de la página del producto también importa aquí. Lea el guía de velocidad de la página del producto, Lista de verificación de depuración de medios del producto, y guía de optimización de vídeos de productos si los medios variantes son parte de la falla.

Pruebe aplicaciones, creadores de páginas, suscripciones y paquetes por separado

Los problemas de variantes a menudo comienzan cuando una tienda agrega muestras personalizadas, suscripciones, paquetes, descuentos por volumen o un creador de páginas. Esas herramientas pueden reemplazar el selector de Shopify con sus propias entradas. Si no se sincronizan con el formulario del producto nativo, la solicitud de agregar al carrito puede enviar datos obsoletos.

Duplique el tema, desactive las incrustaciones de aplicaciones relacionadas con el producto y pruebe un producto simple con dos variantes. Luego pruebe un producto con tres opciones: una variante agotada, un plan de venta por suscripción e imágenes variantes. Esto aísla si el problema afecta a todo el tema o está vinculado a la configuración de un producto específico.

Para páginas de productos con muchas aplicaciones, utilice el guía completa de optimización de velocidad de Shopify, correcciones de velocidad de la imagen del producto, y Guía de optimización de velocidad de la aplicación Shopify.

Solución manual frente a solución Thunder

Si la limpieza de la página del producto se convierte en un proyecto de rendimiento más importante, compare Precios de trueno con optimización práctica de la velocidad de Shopify.

FAQ