Il pulsante Aggiungi al carrello di Shopify non funziona: correzioni di varianti, app e temi (2026)

Soluzione rapida: mantieni reattive le pagine dei prodotti durante il debug

Inizia con la modalità di fallimento esatto

"Aggiungi al carrello non funziona" può significare cinque cose diverse. Il pulsante potrebbe non rispondere. Potrebbe mostrare uno spinner per sempre. Potrebbe aggiungere la variante sbagliata. Potrebbe mostrare un errore solo dopo aver modificato le dimensioni. Oppure potrebbe aggiungere l'articolo ma non riuscire ad aggiornare il cassetto del carrello.

Apri la pagina del prodotto in incognito, scegli un semplice prodotto disponibile e guarda DevTools mentre fai clic. Se non viene attivata alcuna richiesta, il gestore dei clic o il modulo sono danneggiati. Se /cart/add.js restituisce 400, il payload non è valido. Se la richiesta ha esito positivo ma l'interfaccia utente del carrello non si aggiorna, leggi il Il cassetto del carrello Shopify non apre la guida.

Se gli acquirenti possono aggiungere al carrello ma non acquistare, continuare con aggiungi al carrello ma nessuna vendita Traffico e ma nessuna vendita diagnostica.

Controlla gli ID delle varianti prima di incolpare il checkout

Il modulo di un prodotto deve inviare un ID variante valido. Quando una shopper cambia taglia o colore, viene visualizzato il messaggio nascosto id L'ingresso deve essere aggiornato. Se rimane bloccato sulla prima variante, l'aggiunta al carrello può non riuscire per le varianti esaurite, aggiungere l'opzione sbagliata o restituire una richiesta non valida.

<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">Aggiungi al carrello</button>
</form>

Nel contenuto Astro, l'esempio di Liquid viene mostrato come codice. Nel tema Shopify, assicurati che il valore venga aggiornato quando cambia la variante selezionata. Aggiungi un registro temporaneo della console, se necessario:

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

Controlla il markup del modulo prodotto e i campi obbligatori

I temi personalizzati spesso interrompono l'aggiunta al carrello mentre si spostano i pulsanti nelle barre adesive, nelle fisarmoniche dei prodotti o nelle sezioni del generatore di pagine. Il pulsante deve essere all'interno del modulo corretto o esplicitamente legato ad esso con a Modulo Attributo . I campi di personalizzazione obbligatori devono avere valori prima dell'invio.

Controlla anche l'inventario e i piani di vendita. I prodotti in abbonamento, le app in preordine, i pacchetti e le opzioni personalizzate potrebbero richiedere un ID piano di vendita o proprietà dell'elemento pubblicitario. Se il widget dell'app si carica lentamente o si blocca, il pulsante nativo può inviare una richiesta di carrello incompleta.

Per le prestazioni della pagina del prodotto, utilizzare il file guida rapida alla pagina del prodotto, Lista di controllo per l'ottimizzazione del video del prodottoe guida completa all'ottimizzazione della velocità di Shopify.

Trova conflitti tra JavaScript e app

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.

Se il problema scompare quando gli incorporamenti delle app sono disattivati, riattivarli uno alla volta. Anche il vecchio codice è importante. Un'app rimossa può lasciare degli snippet tema.liquid, modelli di prodotto o sezioni del carrello. Usa il Guida alla pulizia degli avanzi dell'app e Guida alla correzione degli script dell'app.

I tocchi lenti rappresentano una modalità di guasto separata. Quello di Google Documentazione INP spiega perché un'interazione ritardata sembra ancora interrotta. Thunder può gestire il livello di velocità automatizzato e il Guida alla correzione di Shopify INP mostra il percorso manuale più profondo.

Shopify manuale Aggiungi al carrello Elenco di controllo di debug

Se hai bisogno di una riparazione più rapida rispetto al debug manuale, confronta Prezzi tempestosi con servizi personalizzati di ottimizzazione della velocità di Shopify.

FAQ