Aggiungi CSS personalizzato al widget

Se le impostazioni integrate della pagina Aspetto non ti danno il risultato che desideri, puoi aggiungere il tuo CSS per modificare l'aspetto del widget Olvio sul tuo negozio online. Il CSS personalizzato è disponibile con tutti i piani.

Per colori, font e raggio degli angoli, parti dalle impostazioni integrate: consulta Personalizza i colori del widget, Personalizza il font e la dimensione del font del widget e Personalizza il raggio degli angoli del widget.

Il tuo CSS si applica all'intera pagina

Il widget non è isolato dal resto della pagina del tuo negozio online. Olvio aggiunge il tuo CSS alla pagina come un normale foglio di stile, quindi una regola può modificare qualsiasi elemento della pagina, non solo il widget.

Olvio lo aggiunge nelle pagine prodotto che mostrano il blocco Olvio e, se usi Olvio Advisor (piani Growth e Scale), nelle altre pagine del tuo negozio in cui viene caricata l'incorporazione app Olvio Advisor.

Includi una classe Olvio in ogni selettore, ad esempio .olvio-panel. Un selettore generico come p o button cambia lo stile di tutti i paragrafi o di tutti i pulsanti di quelle pagine.

Aggiungi il tuo CSS

Nell'admin di Olvio, apri Aspetto.
Clicca sulla scheda Avanzato.
Nel riquadro CSS personalizzato, incolla o digita il tuo CSS. Il campo accetta fino a 5.000 caratteri e mostra un contatore dei caratteri.
Clicca su Salva nella barra di salvataggio.

Il messaggio Modifiche salvate conferma il salvataggio. Il campo mostra poi il tuo CSS nella forma in cui Olvio l'ha memorizzato: in questo modo vedi se è stato rimosso qualcosa (vedi Cosa rimuove Olvio al salvataggio più sotto).

L'Anteprima dal vivo della pagina Aspetto non mostra il CSS personalizzato: Il CSS personalizzato viene applicato solo sul widget dal vivo. Per vedere le modifiche, ricarica una pagina prodotto del tuo negozio online.

Fai prevalere le tue regole sugli stili di Olvio

Gli stili del widget di Olvio usano !important su molte proprietà, così il tuo tema non può rompere il widget. Aggiungi !important a ogni proprietà che sovrascrivi: dove lo stile di Olvio lo usa, una regola senza di esso perde contro il valore predefinito di Olvio.

Per aiutare le tue regole a prevalere, quando applica il tuo CSS Olvio aggiunge html davanti a ogni selettore: .olvio-panel viene applicato come html .olvio-panel.

I selettori all'interno delle at-rule come @media non ricevono questo prefisso. Falli iniziare tu con html, ad esempio @media (max-width: 600px) { html .olvio-title { font-size: 1.2em !important; } }.

Al di fuori delle at-rule, non far iniziare tu un selettore con html o :root: con il prefisso aggiunto da Olvio, la regola non corrisponderebbe a nessun elemento. Evita anche le virgole all'interno di :has() e nei valori di attributo tra virgolette: anche lì Olvio aggiunge il prefisso, e quella parte del selettore smette di corrispondere.

Selettori utili

Il riquadro CSS personalizzato suggerisce questi selettori:

.olvio-label: il Nome dell'esperto, il piccolo testo in maiuscolo sopra il titolo nella pagina prodotto.
.olvio-title: la Domanda d'aggancio, il titolo nella pagina prodotto.
.olvio-suggestion-btn: i pulsanti delle domande suggerite nella pagina prodotto e, nelle conversazioni di Olvio Advisor, i pulsanti di risposta sopra il campo per le domande e i pulsanti Continua e Ricomincia, che propongono di riprendere una conversazione precedente. Per applicare lo stile a uno solo di questi punti, metti .olvio-suggestions (pagina prodotto) o .olvio-panel-chips-row (Olvio Advisor) davanti alla classe, ad esempio .olvio-panel-chips-row .olvio-suggestion-btn.
.olvio-input-row: il campo per le domande, nella pagina prodotto e nel pannello di chat.
.olvio-panel: il pannello di chat.
.olvio-msg-user: i messaggi dell'acquirente nel pannello di chat.
.olvio-msg-assistant: le risposte di Olvio nel pannello di chat.
.olvio-atc-btn: il pulsante di aggiunta al carrello del prodotto visualizzato, sopra il campo per le domande nel pannello di chat. I pulsanti di aggiunta al carrello nelle schede prodotto della chat usano .olvio-card-atc.

Per trovare la classe di un altro elemento, fai clic con il tasto destro su di esso nel tuo negozio online e usa lo strumento Ispeziona del browser.

Esempi

Ombra sul pannello di chat: .olvio-panel { box-shadow: -12px 0 40px rgba(0,0,0,0.15) !important; }
Titolo più piccolo nella pagina prodotto: .olvio-title { font-size: 1.25em !important; }
Colore al passaggio del mouse su domande suggerite e pulsanti di risposta di Advisor: .olvio-suggestion-btn:hover { background: #faf5ff !important; }
Nascondi il nome dell'esperto: .olvio-label { display: none !important; }

Cosa rimuove Olvio al salvataggio

Quando salvi, Olvio controlla il tuo CSS e rimuove, tra le altre cose:

Le regole @import.
I commenti CSS (/* … */).
I frammenti HTML come <script, </style, .
Gli indirizzi completi all'interno di url(), image-set(), image(), src() e cross-fade(): un valore che inizia con http://, https://, //, javascript: o vbscript: viene sostituito da un url() vuoto, anche quando punta al tuo negozio. In questo modo non puoi caricare immagini o font da un indirizzo web completo. Gli URI data: e i percorsi relativi, come un percorso che inizia con una sola /, vengono mantenuti.
La proprietà behavior ed expression(), usate solo da vecchie versioni di Internet Explorer. Evita scroll-behavior e overscroll-behavior nel CSS personalizzato: quando salvi, Olvio rimuove una parte di queste dichiarazioni, e il CSS che le segue può smettere di funzionare.
Qualsiasi regola il cui selettore punta alla riga a piè di pagina del pannello di chat (.olvio-panel-footer, .olvio-brand-mention) o all'area in fondo al pannello che la contiene (.olvio-panel-input), anche all'interno di @media e di regole annidate. Viene rimossa l'intera regola, anche se contiene pure altri selettori. Una at-rule come @scope che nomina una di queste classi viene rimossa con tutto il suo contenuto. Per applicare uno stile al campo per le domande, usa .olvio-input-row.
Tutto ciò che supera i 5.000 caratteri.

All'interno di una stringa tra virgolette, evita le sequenze di escape con barra rovesciata come \", \\ e \A: rompono la stringa quando salvi. Dove puoi, digita invece il carattere stesso, e racchiudi tra virgolette singole una stringa che contiene ".

La riga "Offerto da Olvio" resta su tutti i piani

In fondo al pannello di chat compare una riga che, in italiano, dice Stai parlando con un'IA • Offerto da Olvio, con un link a Olvio sullo Shopify App Store. Olvio non offre alcun modo per nascondere questa riga, su nessun piano.

Olvio rimuove le regole che nominano le classi di questa riga. Sul tuo negozio online, il widget impone inoltre gli stili di visualizzazione e di visibilità propri della riga e la ripristina se qualcosa la rimuove.

Testa e annulla le modifiche

Dopo aver salvato, ricarica una pagina prodotto del tuo negozio online e clicca su una domanda suggerita (o digita una domanda) per aprire il pannello di chat. Verifica che i messaggi siano leggibili e che nulla si sovrapponga. Controlla la pagina anche in una finestra stretta, delle dimensioni di uno smartphone.

Per annullare le modifiche non ancora salvate, clicca su Scarta nella barra di salvataggio. Per rimuovere il CSS personalizzato già salvato, svuota il campo e clicca su Salva: il widget torna al suo aspetto predefinito la prossima volta che viene caricata una pagina del negozio online.

Se le modifiche continuano a non comparire, consulta Le mie modifiche di Aspetto non compaiono sul negozio online.