Personalizzare l'aspetto di ogni elemento del widget

La sezione Stile del widget suddivide il widget della pagina prodotto nei singoli elementi, così puoi personalizzarli uno per uno. Aprila nell'editor del bundle per trovare una serie di pannelli a fisarmonica, uno per elemento, in cui controllare colori, caratteri, bordi, spaziatura, badge e altro.

Come funziona la sezione Stile del widget

Apri la scheda Stile del bundle e trova Stile del widget. Fai clic sul titolo di un pannello per visualizzare i controlli dell'elemento. Passando il mouse sul titolo, l'elemento corrispondente viene evidenziato nell'anteprima. Alcuni pannelli appaiono solo quando la funzione corrispondente è disponibile nel bundle.

La maggior parte dei pannelli condivide gli stessi elementi di base: un selettore del colore, una dimensione del carattere e un selettore dello stile del carattere. I pannelli che definiscono lo stile di un riquadro, come la scheda dell'offerta o un badge, mostrano anche il colore di sfondo, il colore del bordo, la larghezza del bordo e il raggio degli angoli. Le modifiche vengono salvate insieme al resto del bundle.

I pannelli, elemento per elemento

Intestazione

Controlla il colore del testo, la dimensione e lo stile del carattere dell'intestazione del widget. Inserisci il testo dell'intestazione più in alto nella scheda Stile per visualizzare Allineamento dell'intestazione (Sinistra, Centro, Linea al centro o Destra). Quando l'allineamento è impostato su Linea al centro, in questo pannello appare un controllo aggiuntivo per il colore e lo spessore della linea.

Scheda dell'offerta

È il riquadro attorno a ogni offerta, ovvero a ogni livello di quantità. È il pannello più grande perché comprende tre stati visivi:

• Offerta non selezionata: colore di sfondo, colore del bordo e larghezza del bordo per lo stato predefinito.
• Offerta al passaggio del mouse: gli stessi tre controlli applicati quando il cliente passa il mouse sulla scheda.
• Offerta selezionata: gli stessi tre controlli per l'offerta attualmente scelta.

Il pannello imposta anche le proprietà condivise delle schede: raggio degli angoli, spazio tra le schede, spaziatura interna orizzontale e verticale e un'opzione Radio per mostrare o nascondere il pulsante radio. L'effetto di sfondo animato viene impostato separatamente con l'interruttore Decorazione più in alto nella scheda Stile (Blob, Anelli, Cuori, Esplosione di stelle, Percentuale, Stelle, Orologio o Denaro) e appare solo sull'offerta selezionata. I colori della scheda dell'offerta controllano anche l'aspetto del pulsante radio.

Titolo e sottotitolo dell'offerta

Due pannelli separati, ciascuno con un colore, una dimensione del carattere e uno stile del carattere per la riga del titolo e quella del sottotitolo dell'offerta.

Etichetta dello sconto

Definisce lo stile dell'etichetta dello sconto con un colore del testo, un colore di sfondo, una dimensione del carattere e uno stile del carattere. Tieni presente che queste impostazioni influiscono anche sui badge extra dei regali.

Immagine dell'offerta

Controlla le dimensioni dell'immagine dell'offerta, il raggio degli angoli, il colore del bordo, la larghezza del bordo e un'Ombra (Nessuna, Piccola, Media o Grande). Imposta anche la modalità di visualizzazione dell'immagine:

• Originale: mantiene le proporzioni native dell'immagine.
• Quadrata: ritaglia l'immagine in formato quadrato.
• Quadrata (in alto): ritaglia l'immagine in formato quadrato mantenendo la parte superiore.
• Quadrata (adatta): adatta l'intera immagine all'interno di un quadrato senza ritagliarla.

Badge quantità

Definisce lo stile del piccolo numero della quantità che può essere visualizzato sull'immagine dell'offerta. Puoi impostare il colore del testo, il colore di sfondo, il raggio degli angoli, la dimensione del carattere, lo stile del carattere e la Posizione (In alto a destra, In alto a sinistra, In basso a destra o In basso a sinistra). Questo numero viene mostrato sull'immagine dell'offerta quando è attiva l'opzione "Mostra badge quantità".

Etichetta della variante

Imposta il colore, la dimensione del carattere e lo stile del carattere dei titoli delle opzioni della variante (ad esempio Taglia o Colore) e dei numeri delle relative righe.

Menu a discesa

Per i menu a discesa delle varianti, usa il pannello separato Menu a discesa per modificare testo, sfondo, bordo, angoli e spaziatura interna.

Badge dell'offerta

Il badge è il richiamo (ad esempio "Più popolare") visualizzato su un'offerta. Oltre al normale colore del testo, colore di sfondo, dimensione del carattere e stile del carattere, questo pannello offre un selettore Forma del badge con numerosi preset:

• Predefinita, Piegata, A pillola
• Freccia destra, Freccia sinistra
• Quadrata
• Banner, Banner arrotondato
• Nastro angolare, Nastro laterale, Nastro laterale alternativo, Nastro laterale arrotondato

Prezzo

Il pannello Prezzo raggruppa tre stili di testo, ciascuno con un proprio colore, una dimensione del carattere e uno stile del carattere:

• Prezzo principale: il prezzo di vendita attivo.
• Prezzo di confronto: il prezzo "precedente" barrato.
• Testo per articolo: il testo del prezzo per unità.

Bundle

I bundle di prodotti hanno anche un pannello Bundle per il testo del titolo del prodotto, il bordo tra gli articoli del bundle e il segno più tra i prodotti.

Vantaggi

Definisce lo stile dell'elenco puntato dei vantaggi. Qui imposti una dimensione del carattere e uno stile del carattere condivisi, oltre a un Colore del testo e un Colore dell'icona separati, così le icone e il testo possono avere colori diversi.

Regalo e vendita aggiuntiva

Definisce lo stile del blocco del regalo gratuito in due stati, ciascuno con un colore di sfondo, un colore del titolo, una dimensione del carattere e uno stile del carattere:

• Regalo dell'offerta selezionata: il blocco del regalo dell'offerta scelta.
• Regalo dell'offerta non selezionata: il blocco del regalo delle altre offerte.

Un terzo gruppo, Immagine del regalo, controlla la larghezza e il raggio degli angoli dell'immagine del regalo.

Immagini dei popup di regalo e mix & match

Apri Stile > Stile del modale > Modale del regalo e trova Adattamento immagine. Puoi raggiungere questi controlli anche da Personalizza stile del modale accanto a un selettore di regali o mix & match. Scegli Originale per mantenere le proporzioni complete della foto oppure Quadrata per ottenere miniature uniformi. L'impostazione è condivisa dai popup di selezione dei regali e del pool del bundle all'interno di questo sconto; le immagini del widget principale usano i controlli separati di Immagine dell'offerta.

Piè di pagina

Imposta il colore, la dimensione del carattere e lo stile del carattere del testo del piè di pagina del widget.

Contenitore e larghezza massima

Il pannello Contenitore controlla la larghezza complessiva del widget tramite un'impostazione Larghezza massima:

• Predefinita Shopify (44rem): limita il widget a 44rem all'interno dello spazio disponibile.
• Larghezza completa (100%): consente al widget di estendersi fino a riempire il contenitore.
• Personalizzata: mostra un campo Larghezza in cui inserire un valore in pixel.

Questo pannello include anche un Colore di avviso usato per il testo dell'avviso relativo alle scorte ridotte.

Usa qui Margine superiore e Margine inferiore per regolare lo spazio intorno al widget di questo sconto prima di aggiungere CSS personalizzato.

La larghezza completa riempie il contenitore principale del widget. Non può ampliare una colonna stretta delle informazioni sul prodotto nel tema.

Suggerimenti per la modifica

• Osserva l'anteprima in tempo reale mentre lavori. Poiché passando il mouse sul titolo di un pannello viene evidenziato l'elemento corrispondente, puoi verificare di modificare la parte corretta prima di cambiare un valore.
• Definisci insieme i tre stati della scheda dell'offerta (non selezionata, al passaggio del mouse, selezionata), in modo che lo stato selezionato si distingua chiaramente dagli altri.
• Se ti serve uno stile che i pannelli non espongono, il pannello CSS personalizzato nella parte inferiore della sezione ti consente di aggiungere CSS per sovrascrivere gli stili del widget.