Le sélecteur de variantes Shopify ne fonctionne pas : correctifs de formulaire de produit, de thème et d'application (2026)

Solution rapide avec Thunder

Vérifiez le bloc de sélection de variantes et le modèle de produit Les produits

Shopify peuvent utiliser jusqu'à trois options, et chaque combinaison d'options correspond à une variante. Un thème de travail a besoin d'un sélecteur qui met à jour les informations spécifiques au produit lorsque la variante sélectionnée change : prix, prix de comparaison, média, message d'inventaire, état d'ajout au panier et ID de variante masqué soumis avec le formulaire.

Démarrer dans la boutique en ligne, personnaliser, modèle de produit. Confirmez que le bloc de sélection de variantes existe dans la section Informations sur le produit. Vérifiez ensuite si les produits cassés utilisent un modèle différent de celui des produits qui fonctionnent. Les rapports de la communauté se résument souvent à un modèle de produit dépourvu du sélecteur ou utilisant une ancienne section personnalisée.

Si le sélecteur fonctionne visuellement mais que l'ajout au panier échoue, utilisez le Liste de contrôle du bouton d'ajout au panier. Si le chariot reçoit le bon article mais que le tiroir tombe en panne, utilisez le Guide de débogage de la mise à jour du panier .

Assurez-vous que le formulaire de produit soumet l'ID de variante sélectionné

Le bug de la variante la plus coûteuse est subtil : l'échantillon change, mais le formulaire soumet toujours la première variante. Inspectez le formulaire du produit et recherchez l'entrée cachée nommée L'entrée. Modifiez une taille ou une couleur et confirmez les modifications apportées à la valeur de l'ID de variante sélectionné.

{% 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">Ajouter au panier</button>
{% endform %}

Dans le contenu Astro, le liquide ci-dessus est présenté à titre d'exemple. Dans votre thème Shopify, la règle clé est simple : le caché nom="id" La saisie doit toujours correspondre à la variante disponible sélectionnée avant la soumission du formulaire.

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;
});

Mettre à jour ensemble le prix, le média, l'URL et la disponibilité

Un sélecteur de variantes complet fait plus que soumettre le bon identifiant. Il doit mettre à jour le prix, le prix de vente, le média sélectionné, le SKU, la disponibilité de ramassage, le message d'inventaire et l'état désactivé du bouton d'ajout au panier. Si un seul élément est mis à jour, les acheteurs voient des informations mitigées et hésitent.

Les liens profonds sont également importants. Si un acheteur atterrit sur ?variante=123, la page doit présélectionner cette variante et afficher les informations correspondantes. Les conseils thématiques de Shopify font appel à la gestion des variantes de liens profonds, car les publicités, les e-mails et les recommandations de produits envoient souvent du trafic directement vers une variante sélectionnée.

La vitesse de la page produit compte également ici. Lire le Liste de contrôle de débogage des supports de produits , Guide d'optimisation vidéo du produit, et si un média variant fait partie de la panne.

Testez séparément les applications, les créateurs de pages, les abonnements et les offres groupées

Les problèmes de variantes commencent souvent lorsqu'un magasin ajoute des échantillons personnalisés, des abonnements, des offres groupées, des remises sur volume ou un générateur de pages. Ces outils peuvent remplacer le sélecteur de Shopify par leurs propres entrées. S'ils ne se synchronisent pas avec le formulaire de produit natif, la demande d'ajout au panier peut soumettre des données obsolètes.

Dupliquez le thème, désactivez les intégrations d'applications liées au produit et testez un produit simple avec deux variantes. Testez ensuite un produit avec trois options, une variante épuisée, un plan de vente par abonnement et des images de variantes. Cela permet de déterminer si le problème concerne l'ensemble du thème ou est lié à une configuration de produit spécifique.

Pour les pages de produits contenant beaucoup d'applications, utilisez le guide complet d'optimisation de la vitesse Shopify, Corrections de vitesse d'image du produit, et Guide d'optimisation de la vitesse de l'application Shopify.

Correction manuelle vs Thunder Fix

Si le nettoyage de la page produit devient un projet de performances plus important, comparez Tarification Thunder avec optimisation pratique de la vitesse de Shopify.

FAQ