Il selettore delle varianti di Shopify non funziona: correzioni per modulo di prodotto, tema e app (2026)

Correzione rapida con Thunder

Controlla il blocco selezione varianti e il modello prodotto

I prodotti Shopify possono utilizzare fino a tre opzioni e ciascuna combinazione di opzioni è associata a una variante. Un tema funzionante necessita di un selettore che aggiorni le informazioni specifiche del prodotto quando la variante selezionata cambia: prezzo, prezzo di confronto, media, messaggio di inventario, stato di aggiunta al carrello e ID variante nascosta inviato con il modulo.

Inizia in Negozio online, Personalizza, Modello prodotto. Conferma che il blocco selettore Variante esista nella sezione Informazioni sul prodotto. Quindi controlla se i prodotti danneggiati utilizzano un modello diverso rispetto ai prodotti che funzionano. I rapporti della community spesso si riducono a un modello di prodotto privo del selettore o che utilizza una vecchia sezione personalizzata.

Se il selettore funziona visivamente ma l'aggiunta al carrello non riesce, utilizza il Lista di controllo del pulsante aggiungi al carrello. Se il carrello riceve l'articolo giusto ma il cassetto non funziona, utilizza il guida al debug dell'aggiornamento del carrello.

Assicurati che il modulo del prodotto invii l'ID della variante selezionata

Il bug della variante più costosa è sottile: il campione cambia, ma il modulo invia comunque la prima variante. Ispeziona il modulo del prodotto e trova l'input nascosto denominato id L'ingresso. Modifica una taglia o un colore e conferma le modifiche del valore all'ID variante selezionata.

{% 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">Aggiungi al carrello</button>
{% endform %}

Nel contenuto Astro, il Liquido sopra è mostrato come esempio. Nel tuo tema Shopify, la regola chiave è semplice: il nascosto nome="id" L'input deve sempre corrispondere alla variante disponibile selezionata prima dell'invio del modulo.

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

Aggiorna prezzo, contenuti multimediali, URL e disponibilità insieme

Un selettore di varianti completo fa molto più che inviare l'ID corretto. Dovrebbe aggiornare il prezzo, il prezzo di vendita, i media selezionati, lo SKU, la disponibilità del ritiro, il messaggio di inventario e lo stato disabilitato del pulsante Aggiungi al carrello. Se viene aggiornato solo un elemento, gli acquirenti vedono informazioni contrastanti ed esitano.

Anche i link diretti contano. Se un acquirente arriva ?variante=123, la pagina dovrebbe preselezionare quella variante e visualizzare le informazioni corrispondenti. La guida ai temi di Shopify richiama la gestione dei link diretti alle varianti perché annunci, e-mail e consigli sui prodotti spesso inviano il traffico direttamente a una variante selezionata.

Anche la velocità della pagina del prodotto è importante qui. Leggi il guida rapida alla pagina del prodotto, Elenco di controllo per il debug dei supporti del prodottoe guida all'ottimizzazione del video del prodotto se il supporto variante fa parte dell'errore.

Testa app, page builder, abbonamenti e bundle separatamente

I problemi relativi alle varianti spesso iniziano quando un negozio aggiunge campioni personalizzati, abbonamenti, pacchetti, sconti sul volume o un generatore di pagine. Questi strumenti potrebbero sostituire il selettore di Shopify con i propri input. Se non si sincronizzano con il modulo del prodotto nativo, la richiesta di aggiunta al carrello può inviare dati non aggiornati.

Duplica il tema, disabilita gli incorporamenti di app relative al prodotto e testa un prodotto semplice con due varianti. Quindi prova un prodotto con tre opzioni, una variante esaurita, un piano di vendita in abbonamento e immagini delle varianti. Ciò isola se il problema riguarda l'intero tema o è legato a una specifica configurazione del prodotto.

Per le pagine dei prodotti con molte app, utilizzare il file guida completa all'ottimizzazione della velocità di Shopify, Correzioni della velocità delle immagini del prodottoe Guida all'ottimizzazione della velocità dell'app Shopify.

Correzione manuale vs. Correzione Thunder

Se la pulizia della pagina del prodotto diventa un progetto di performance più grande, confronta Prezzi tempestosi con Ottimizzazione pratica della velocità di Shopify.

FAQ