Personalizza i colori del widget
Puoi adattare il widget Olvio al tuo marchio con sette colori. Si applicano al widget nelle tue pagine prodotto e al pannello di chat, compreso il pannello di chat che si apre dai link di Olvio Advisor (piani Growth e Scale). Le impostazioni dei colori, invece, sono disponibili su tutti i piani.
Cambia i colori del widget
Apri Aspetto nel menu dell'app Olvio.
Clicca sulla scheda Stile.
Nella sezione Colori, modifica i colori che vuoi. Sono raggruppati in Marchio (Colore d'accento, Primo piano d'accento), Superfici (Sfondo, Superficie, Bordo) e Testo (Testo, Testo attenuato).
Clicca su Salva nella barra di salvataggio che compare non appena modifichi qualcosa. Il messaggio Modifiche salvate conferma il salvataggio.
Per scegliere un colore, clicca sul quadratino colorato a sinistra di un campo per aprire il selettore di colore del browser, oppure digita o incolla un codice esadecimale nel campo. I codici devono usare il formato a sei cifre #rrggbb, per esempio #7b3fe4. I codici brevi come #fff e i nomi dei colori non sono accettati: il campo mostra Formato atteso: #rrggbb e non puoi salvare finché non lo correggi.
Per annullare le modifiche che non hai salvato, clicca su Scarta nella barra di salvataggio.
Cosa cambia ogni colore
Colore | Dove appare |
Colore d'accento | Il Nome dell'esperto sopra la Domanda d'aggancio, le icone scintilla nelle domande suggerite della pagina prodotto, il pulsante di invio, i messaggi dell'acquirente, l'avatar predefinito, l'area dietro un avatar caricato con sfondo trasparente, il pulsante Aggiungi al carrello sopra il campo per le domande nel pannello di chat delle pagine prodotto, e i pulsanti di aggiunta al carrello e i badge di sconto nelle schede prodotto. Colora anche il contorno di una domanda suggerita al passaggio del mouse e quello del campo per le domande quando è selezionato e, al passaggio del mouse, i link nelle risposte dell'IA. |
Primo piano d'accento | Il testo e le icone mostrati sopra il colore d'accento: i messaggi dell'acquirente, la freccia di invio, l'icona dell'avatar predefinito, il testo dei pulsanti di aggiunta al carrello nel pannello di chat e nelle schede prodotto, e i badge di sconto. |
Sfondo | Il pannello di chat, le domande suggerite, il campo per le domande (nella pagina prodotto e nel pannello di chat) e i selettori di variante con i loro menu nelle schede prodotto. Nella pagina prodotto il resto del widget è trasparente, quindi lo sfondo del tuo tema si vede dietro il Nome dell'esperto e la Domanda d'aggancio e intorno ai suggerimenti e al campo per le domande. |
Superficie | Le risposte dell'IA, l'indicatore di digitazione, lo sfondo dietro le immagini dei prodotti nelle schede prodotto, l'evidenziazione quando un acquirente passa il mouse su una domanda suggerita o su un'opzione di variante, e l'opzione selezionata in un menu delle varianti. |
Bordo | Il contorno delle domande suggerite, del campo per le domande, dei selettori di variante e dei loro menu, e la linea sotto l'intestazione del pannello di chat. La linea sottile sopra il campo per le domande nel pannello di chat non usa questo colore. |
Testo | La Domanda d'aggancio, le domande suggerite, il testo digitato dagli acquirenti, le risposte dell'IA, i nomi dei prodotti nel pannello di chat e nelle schede prodotto, i selettori di variante e le loro opzioni nelle schede prodotto, il nome del tuo negozio in cima al pannello di chat di Advisor, e il pulsante di chiusura e la freccia per caricare i messaggi precedenti al passaggio del mouse. |
Testo attenuato | Il testo segnaposto nel campo per le domande, i prezzi dei prodotti nel pannello di chat e nelle schede prodotto, la freccia a discesa dei selettori di variante e le opzioni esaurite nei menu delle varianti delle schede prodotto, i puntini dell'indicatore di digitazione, il pulsante di chiusura e la freccia per caricare i messaggi precedenti (entrambi passano a Testo al passaggio del mouse; la freccia mostra anche la sua etichetta Carica i messaggi precedenti), l'avviso e la riga Offerto da Olvio in fondo al pannello di chat, e lo sfondo del badge Esaurito nelle schede prodotto. |
I selettori di variante e i pulsanti di aggiunta al carrello nelle schede prodotto compaiono solo quando Attiva aggiungi al carrello nella chat è attivo, nella scheda Avanzato della pagina Aspetto. Consulta Mostra le schede prodotto e consenti l'aggiunta al carrello dalla chat.
Olvio non regola il contrasto dei tuoi colori. Verifica che il Primo piano d'accento resti leggibile sul Colore d'accento, che il Testo e il Testo attenuato restino leggibili sullo Sfondo, che il Testo resti leggibile sulla Superficie e che lo Sfondo resti leggibile sul Testo attenuato, che riempie il badge Esaurito. Nelle pagine prodotto, il Nome dell'esperto (Colore d'accento) e la Domanda d'aggancio (Testo) appaiono direttamente sullo sfondo del tuo tema, quindi verifica che restino leggibili anche lì.
Visualizza l'anteprima dei colori
L'Anteprima dal vivo si aggiorna mentre modifichi, prima di salvare. Usa i pulsanti Pagina prodotto e Pannello di chat sopra l'anteprima per cambiare vista. Superficie appare solo nella vista Pannello di chat. Finché un codice colore non è valido, l'anteprima mostra al suo posto il colore predefinito di Olvio.
L'anteprima usa contenuti di esempio e non include il tuo CSS personalizzato né i colori sostituiti nell'editor del tema. Nella vista Pannello di chat, Bordo colora anche la linea sopra il campo per le domande; sul tuo storefront quella linea mantiene lo stesso colore tenue qualunque sia la tua scelta. Dopo aver salvato, controlla una pagina prodotto sul tuo storefront.
Vedi i nuovi colori sul tuo storefront
Quando clicchi su Salva, Olvio invia i nuovi colori al tuo storefront. Ricarica una pagina prodotto per vederli. Se vedi ancora i vecchi colori, consulta Le mie modifiche di Aspetto non compaiono sul negozio online.
Sostituisci i colori per un modello di prodotto
Il blocco Olvio — Product page ha impostazioni di colore proprie, che compaiono quando selezioni il blocco nell'editor del tema di Shopify. Use custom colors for this block: quando la casella è selezionata, i colori Accent, Accent foreground, Background, Surface, Border, Text e Muted text del blocco sostituiscono quelli impostati nella pagina Aspetto. Clicca su Salva nell'editor del tema.
La sostituzione vale per tutti i prodotti che usano il modello e anche per il pannello di chat che si apre dal blocco, nonostante la descrizione dell'impostazione indichi for this block only.
Le impostazioni di colore del blocco partono dai colori predefiniti di Olvio, non dai colori impostati nella pagina Aspetto. Quando attivi la sostituzione, imposta tutti e sette i colori.
Use custom colors for this block: per tornare ai colori della pagina Aspetto, deseleziona questa casella e salva il tema.
Per la configurazione completa del blocco, consulta Aggiungi il widget Olvio alle tue pagine prodotto.
Colori predefiniti di Olvio
Non c'è un pulsante di ripristino. Per tornare alla palette predefinita di Olvio, inserisci questi codici e clicca su Salva:
Colore d'accento:
#7b3fe4Primo piano d'accento:
#ffffffSfondo:
#ffffffSuperficie:
#f7f6ffBordo:
#e3e0f5Testo:
#0e0c1bTesto attenuato:
#6e6c8a
Impostazioni correlate
Font e dimensione del testo: Personalizza il font e la dimensione del font del widget
Angoli arrotondati: Personalizza il raggio degli angoli del widget
Nome dell'esperto, domanda d'aggancio e avatar: Cambia il nome dell'esperto, la domanda d'aggancio e l'avatar del widget
Tutto ciò che i sette colori non coprono: Aggiungi CSS personalizzato al widget