Come disattivare la selezione automatica delle varianti di prodotto su una pagina prodotto Shopify
Se sei un merchant Shopify che vende più varianti di uno stesso prodotto, Shopify seleziona automaticamente una variante quando un cliente arriva sulla tua pagina prodotto. Un esempio è la vendita di calzini: potresti avere diversi colori tra cui i clienti possono scegliere, come giallo, blu, rosso, verde ecc.
Nota: Shopify sta ampliando i limiti delle varianti a 2.048 varianti per prodotto, con disponibilità generale prevista per la fine del 2025. Attualmente, la maggior parte dei negozi ha ancora il limite di 100 varianti, anche se i negozi Shopify Plus e i negozi di sviluppo potrebbero avere accesso anticipato al limite aumentato.
Quando un cliente arriva sulla tua pagina prodotto, viene selezionata automaticamente la prima variante del prodotto. Se vuoi disattivare la selezione automatica per un prodotto, è possibile farlo.
Come disattivare la selezione automatica delle varianti di prodotto
Per disattivare la selezione automatica delle varianti di prodotto, dovrai aggiungere dei prompt al menu a discesa. Ecco come fare:
- Vai nella directory Snippets e clicca su Add a new snippet
- Lascia come nome ‘pick-an-option’
- Incolla questo codice nel nuovo file snippet e salvalo
- Vai nella directory Layout e seleziona theme.liquid
- Cerca il tag </body> alla fine del file
- Incolla questo codice {% render ‘pick-an-option’ %} su una riga sopra questo tag
- Clicca Save
- Poi, trova il file che contiene il form per ‘add to cart.’ L’attributo action in questo file sarà /cart/add
- Una volta individuato il file, cerca uno dei seguenti codici
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>Oppure…
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Sostituiscilo con il seguente codice
<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Infine, clicca Save
Metodo per temi Shopify moderni (Dawn e temi Online Store 2.0)
Per i temi Shopify più recenti che utilizzano l’architettura Online Store 2.0 (come Dawn), la procedura è diversa:
- Nei file del tema, individua product-variant-options.liquid
- Trova il codice che contiene {% if value.selected %} checked {% endif %}
- Rimuovi o modifica questo codice per impedire la selezione automatica
- Aggiungi una validazione JavaScript per assicurarti che i clienti selezionino una variante prima di aggiungere al carrello
Nota: questo metodo richiede competenze tecniche e potrebbe influire sulle funzionalità del tema. Crea sempre un backup prima di apportare modifiche.
Impostazioni di selezione automatica specifiche del tema
Se utilizzi Empire o temi premium simili, puoi disattivare la selezione automatica senza modificare il codice:
- Vai su Online Store > Themes > Customize
- Vai a Products > Form
- Disattiva l’opzione Auto-select first available variant
Controlla la documentazione del tuo tema per verificare se questa funzionalità è disponibile nelle impostazioni.
Metodo CSS per nascondere “Add to Cart” finché non viene effettuata una selezione
Aggiungi questo CSS nel file theme.liquid del tuo tema per nascondere il pulsante Add to Cart finché non viene effettuata una selezione:
<style>
body:has(.disabled-option:checked) .product-form__buttons button {
display: none !important;
}
</style>Soluzione alternativa: usare le app
Invece di modificare il codice, puoi usare queste app per la gestione delle varianti (al 2025):
- Variant Option Product Options (Piano gratuito disponibile, a pagamento da $9.99/mese)
- Globo Product Options (Piano gratuito disponibile)
- OPTIS Product Options (Piano gratuito disponibile)
Queste app gestiscono la disattivazione della selezione automatica e offrono funzionalità avanzate come campioni colore, logica condizionale e opzioni prodotto illimitate.
Come modificare le impostazioni di add to cart
Puoi modificare queste impostazioni per assicurarti che i prodotti non risultino non disponibili prima che il cliente effettui una selezione.
- Vai su Online Store e Themes
- Seleziona il tema che vuoi modificare e scegli Actions
- Seleziona Edit Language e vai nella casella Filter items
- Digita ‘unavailable.’ Ti mostrerà la traduzione
- Cambia Unavailable in Effettua una selezione
Best practice per la gestione delle varianti
- Implementa campioni colore al posto dei menu a tendina per una migliore esperienza utente e conversioni più alte
- Usa immagini specifiche per variante che si mostrano automaticamente quando i clienti selezionano le opzioni
- Imposta avvisi di scorte basse e nascondi automaticamente le varianti esaurite per gestire l’inventario in modo efficace
- Testa i selettori delle varianti su mobile: valuta l’implementazione di gruppi di pulsanti al posto dei menu a tendina per una migliore usabilità su touchscreen
- Aggiungi messaggi di validazione come “Seleziona prima un’opzione” per evitare confusione nei clienti
Se vuoi nascondere alcune varianti di prodotto senza eliminarle, è possibile farlo anche.
