Varianti di prodotto

Link in evidenza

1. Blog di Shopify: campioni
2. Documentazione Shopify per sviluppatori sull'oggetto swatch
3. Documentazione MDN sui colori con nome
4. Documentazione Shopify sull'aggiunta di varianti
5. App Shopify Translate & Adapt
6. Documentazione Shopify sull'aggiunta di campioni di colore mediante i metafield di categoria

Video utili

Video di Shopify Academy: personalizzazione del negozio

Video di Shopify Academy: personalizzazione del negozio

Utilizza il blocco Variant selector di Align per consentire ai clienti di scegliere opzioni di prodotto come taglia, colore o lunghezza delle maniche. Aggiungi il blocco alla sezione Product information in un modello di prodotto oppure a una sezione Featured product in un altro modello.

Per configurare prodotti e varianti in Shopify, consulta la documentazione Shopify sull’aggiunta di varianti

I prodotti con opzioni di variante richiedono un blocco Variant selector affinché l’azione di aggiunta al carrello funzioni. Il blocco non viene visualizzato per i prodotti senza opzioni di variante.

Stili del selettore di varianti

Scegli come visualizzare le opzioni di variante standard nel modello Align selezionato. Ogni blocco Variant selector dispone di impostazioni proprie, così puoi personalizzare l’esperienza per prodotti o collezioni diversi.

Menu a discesa e pulsanti

Utilizza l’impostazione Variant selector style per scegliere uno dei seguenti layout:

• Dropdowns è il layout predefinito e inserisce opzioni come Size, Color e Sleeves nei menu di selezione.

  Dropdown style

• Pills visualizza le opzioni come pulsanti selezionabili.

  Pills style

Campioni

I campioni sono controlli visivi delle varianti che possono facilitare il confronto delle opzioni rispetto ai menu a discesa o ai pulsanti contenenti solo testo. Possono offrire un riscontro visivo, consentire un layout più compatto e aiutare i clienti a identificare rapidamente colori, motivi o immagini del prodotto.

Align supporta due tipi di campioni:

1. Campioni di colore visualizzano un colore per il valore di un’opzione.
2. Campioni di immagini visualizzano la miniatura assegnata a un’opzione di variante.

Campioni di colore

I campioni di colore tentano automaticamente di associare il valore di un’opzione a un colore CSS con nome. Ad esempio, il valore di opzione Black utilizza #000000 per impostazione predefinita. Aggiungi definizioni di colore personalizzate quando i valori delle opzioni richiedono un colore specifico.

Attivare i campioni di colore

1. Apri un modello di prodotto nell’editor del tema Shopify.

2. Nella sezione Product information, seleziona il blocco Variant selector.

3. Attiva i campioni di colore.

   [!NOTE] I campioni di colore sostituiscono lo stile Variant selector selezionato, quindi l’opzione interessata non utilizza più i controlli a discesa o a pulsante.

4. Inserisci il option name della variante o più nomi in Color swatch Option names.

   • Utilizza il nome dell’opzione, ad esempio Color, anziché i relativi valori, come Black, Brown, Blue.
   • Puoi inserire più nomi di opzioni separati da virgole.
   • Sono supportati anche i nomi delle opzioni tradotti. Ad esempio, i negozi che utilizzano l’app Shopify Translate & Adapt possono usare Color, Couleur o Spalva.

5. Visualizza l’anteprima dei campioni. Per impostazione predefinita, ogni campione utilizza il valore della relativa opzione come nome del colore. Consulta i colori CSS con nome per conoscere i colori disponibili.

6. Aggiungi valori di colore personalizzati quando necessario.

   1. Apri Theme settings nell’editor del tema.
   2. Apri Colors e trova Custom color swatches.
   3. Inserisci coppie di valori di opzione e colori HEX separate da virgole, ad esempio: Black: #000, Red: #ff0000.

Per configurare i colori tramite metafield di categoria, consulta la documentazione Shopify sull’aggiunta di campioni di colore mediante i metafield di categoria

Se utilizzi come campione di colore un’opzione non relativa a un colore, come Material, definisci ogni valore in Custom color swatches. In assenza di una definizione corrispondente, i campioni risultano vuoti.

Campioni di immagini

I campioni di immagini visualizzano la miniatura assegnata a ogni opzione di variante. Un’opzione senza un’immagine associata appare vuota. Quando alla stessa opzione si applicano sia campioni di colore sia campioni di immagini, questi ultimi hanno la priorità.

Attivare i campioni di immagini

1. Apri un modello di prodotto nell’editor del tema Shopify.

2. Nella sezione Product information, seleziona il blocco Variant selector.

3. Attiva i campioni di immagini.

   [!NOTE] I campioni di immagini sostituiscono lo stile Variant selector selezionato per l’opzione interessata.

4. Inserisci il option name della variante o più nomi in Image swatch Option names.

Comportamento dei campioni di immagini

• È possibile combinare campioni di colore e di immagini. Un prodotto può utilizzare tipi di campioni diversi per gruppi di opzioni differenti.
• Ogni variante supporta un campione di immagini.
• Le combinazioni di varianti utilizzano la propria immagine specifica. Ad esempio, una variante con le opzioni Small e Black utilizza l’immagine assegnata a quella combinazione esatta.
• Le immagini ripetute vengono visualizzate una sola volta. Se più gruppi di opzioni utilizzano la stessa immagine, solo l’opzione elencata per prima nell’impostazione visualizza un campione di immagini. I gruppi di opzioni successivi utilizzano l’interfaccia predefinita per evitare di mostrare ripetutamente la stessa immagine.

Impostazioni dello stile dei campioni

Sia i campioni di colore sia quelli di immagini includono impostazioni di visualizzazione per regolarne la forma e il layout.

Stile dei campioni

Scegli uno stile dei campioni adatto alle immagini del prodotto e allo spazio disponibile:

• Default visualizza i campioni di immagini nelle loro proporzioni naturali. Questa opzione è disponibile solo per i campioni di immagini.
• Circle
• Landscape
• Portrait
• Square
• Widescreen

Numero di colonne

Utilizza impostazioni separate per il numero di colonne su desktop e dispositivi mobili per controllare la larghezza dei campioni in un layout responsive. Un numero maggiore di colonne crea campioni più stretti, mentre un numero minore crea campioni più larghi.

1. Scegli un numero di colonne compreso tra uno e otto.
2. Controlla sia la visualizzazione desktop sia quella mobile, quindi regola ogni impostazione per ottenere un’area di tocco adeguata e un layout leggibile.
3. Il numero di colonne controlla la larghezza dei campioni di colore e di immagini e utilizza automaticamente una dimensione appropriata per le immagini.

Consiglio

Visualizza sempre l’anteprima dei campioni sui dispositivi mobili, soprattutto quando i prodotti hanno molti valori di opzione. Un numero di colonne adatto alla visualizzazione desktop può rendere i campioni troppo piccoli o affollati sugli schermi di dimensioni inferiori.

Note sull’uso

1. Mantieni disponibile un blocco selettore. I prodotti con varianti richiedono il blocco Variant selector affinché i clienti possano aggiungere al carrello la variante selezionata.
2. Utilizza i nomi esatti delle opzioni. Quando attivi i campioni, inserisci etichette di opzione come Color o Material, non i singoli valori delle opzioni.
3. Definisci i colori non standard. Aggiungi definizioni di colore personalizzate per i valori che non sono nomi di colori riconosciuti, in modo da evitare campioni di colore vuoti.
4. Assegna con attenzione le immagini delle varianti. I campioni di immagini dipendono dalle immagini assegnate alle combinazioni di varianti pertinenti.
5. Controlla i layout mobili. Verifica il numero di colonne e le dimensioni dei campioni sui dispositivi mobili prima di pubblicare le modifiche.