Come abbinare il widget ai colori del tema

Bundlex può abbinare il widget del bundle all'aspetto del tuo negozio in pochi clic. Il pannello Preimpostazioni colore del widget legge gli schemi di colori del tema Shopify e suggerisce combinazioni di colori già pronte, così le tue offerte sembrano parte integrante della pagina, invece di un elemento aggiunto separatamente.

Dove trovare le preimpostazioni colore

Apri un bundle nell'editor e vai alla scheda Stile. Il pannello Preimpostazioni colore del widget si trova sopra i controlli dettagliati di Stile del widget. Usa le preimpostazioni per impostare tutto in una volta, poi perfeziona i colori dei singoli elementi nella sezione Stile del widget sottostante, se vuoi.

Scegli un colore primario

La riga Colore primario è il punto di partenza per l'intera tavolozza. Puoi impostarla in quattro modi:

• Campioni suggeriti: i campioni colorati vengono ricavati direttamente dagli schemi di colori del tema Shopify, inclusi colori dei pulsanti, testo, sfondi e altro. Fai clic su uno di essi per applicarlo.
• Colori predefiniti: il campione grigio scuro dopo i campioni del tema ripristina i colori predefiniti bianco e nero del widget.
• Colore personalizzato: fai clic sul campione con l'icona più per aprire un selettore del colore e scegliere qualsiasi valore esadecimale. Premi Invio dopo aver digitato il valore esadecimale e verifica che l'anteprima cambi.
• Colore casuale: fai clic sul campione di aggiornamento per generare un colore casuale se vuoi semplicemente esplorare le opzioni.

Qualunque sia la tua scelta, Bundlex ricostruisce immediatamente il resto dei colori del widget attorno a essa e applica il risultato all'anteprima in tempo reale.

Scegli un colore d'accento, ovvero secondario

Il Colore secondario è l'accento usato per badge, stati attivi ed elementi evidenziati. Bundlex lo genera automaticamente per armonizzarlo con il colore primario e offre alcune opzioni di armonia come campioni selezionabili.

Se preferisci impostare personalmente l'accento, hai le stesse due opzioni di personalizzazione disponibili per la riga primaria:

• Colore d'accento personalizzato: il campione con il simbolo più apre un selettore per un valore esadecimale preciso.
• Colore di armonia casuale: il campione di aggiornamento sceglie dalla ruota dei colori un colore contrastante che funziona comunque con il colore primario.

Interruttore delle offerte trasparenti

Accanto al colore primario trovi un interruttore Trasparente che controlla lo sfondo delle schede delle offerte non selezionate:

• Disattivato: gli sfondi delle offerte non selezionate ricevono un colore pieno, una tonalità chiara dei tuoi colori quando proviene da una preimpostazione, così ogni livello appare come una scheda distinta.
• Attivato: gli sfondi delle offerte non selezionate rimangono trasparenti, per un aspetto più pulito e piatto che si integra nella pagina.

L'attivazione o la disattivazione dell'interruttore modifica solo la trasparenza dello sfondo dell'offerta non selezionata. Gli sfondi selezionati e al passaggio del mouse, i colori del testo, dei badge e dei bordi rimangono invariati. Disattivandolo, lo sfondo torna completamente opaco. I campioni selezionati mentre l'interruttore è attivo applicano la versione trasparente della preimpostazione.

Il suggerimento "Applica raggio del bordo"

I colori non sono l'unico elemento che Bundlex può riprendere dal tema. Se rileva che il raggio degli angoli del tema è diverso da quello attuale del widget, appare un banner Applica raggio del bordo con la nota "Abbina gli angoli del widget a quelli del tema."

1. Fai clic su Applica nel banner per applicare il raggio degli angoli del tema alle schede delle offerte, alle immagini delle offerte e alle immagini di cross-sell del widget.
2. In alternativa, chiudilo con l'icona di chiusura se preferisci mantenere gli angoli attuali.

Il suggerimento può non apparire perché non è stata rilevata alcuna differenza, il tema non fornisce un raggio utilizzabile oppure lo hai chiuso. Puoi comunque impostare manualmente gli angoli in Stile del widget.

Perfeziona i singoli elementi

Dopo aver scelto la tavolozza, espandi un elemento in Stile del widget. La Scheda dell'offerta ti consente di modificare separatamente il raggio del bordo, la spaziatura e gli stati selezionato, al passaggio del mouse e non selezionato. In questo esempio abbiamo impostato il raggio della scheda su 8 pixel. Applica prima le preimpostazioni, poi esegui queste regolazioni finali, perché la scelta di un'altra preimpostazione può sostituire le singole scelte di colore.

Salva e controlla il negozio online

Fai clic su Salva. Testa uno sconto attivo sulla pagina prodotto interessata. Seleziona ogni offerta, controlla il contrasto del testo e dei badge, scegli le varianti e usa Aggiungi al carrello. Controlla la pagina su desktop e dispositivi mobili, poiché l'anteprima dell'editor non può mostrare ogni sfondo del tema o dimensione dello schermo.

Il nostro esempio mantiene le stesse regole degli sconti sulla quantità: due borse Avorio / Piccola hanno un subtotale della merce di $43.20 dopo lo sconto del 10%. Lo stile modifica la presentazione, non il calcolo dello sconto. Controlla il carrello e il checkout come parte della verifica finale.

Come vengono generati i suggerimenti

Bundlex legge le impostazioni dei colori del tema e ricava tonalità abbinate. I suggerimenti derivati dal tema sono ripetibili con le stesse impostazioni del tema. I controlli Colore casuale e Armonia casuale generano intenzionalmente nuove scelte.

Suggerimenti

• Le preimpostazioni sono un punto di partenza rapido. Dopo averne applicata una, puoi ancora modificare il colore di ogni singolo elemento in Stile del widget.
• Se non appare alcun campione suggerito, Bundlex non è riuscito a leggere i valori dei colori dal tema attivo. Puoi comunque usare le opzioni personalizzata e casuale.
• Usa l'anteprima in tempo reale per controllare il contrasto, soprattutto con l'interruttore Trasparente attivato, così badge e testo rimangono leggibili sullo sfondo della pagina.