Come utilizzare CSS personalizzato per definire lo stile dei widget di Klaviyo Reviews
Cosa imparerai
Scopri di più sui CSS personalizzati per Klaviyo Reviews, incluso come implementare alcuni casi d’uso di base. Per casi d’uso più avanzati, vai alla nostra risorsa per sviluppatori sul CSS personalizzato per Klaviyo Reviews. La maggior parte della personalizzazione del widget può essere implementata usando editor drag-and-drop; il CSS è necessario solo per casi d'uso avanzati.
L’implementazione di CSS personalizzato per i tuoi widget di recensioni comporta la modifica del codice del tuo sito. Questa operazione è consigliata solo ai marketer con competenze tecniche o a chi ha accesso a uno sviluppatore. Anche se il nostro prodotto supporta CSS personalizzato, il nostro team di assistenza non può aiutarti a personalizzare i tuoi widget oltre le linee guida generali illustrate in questa documentazione. Al fine di garantire la sicurezza dei tuoi dati, il team di assistenza di Klaviyo non è in grado di aprire i tuoi file HTML.
Informazioni su CSS personalizzato per Klaviyo Reviews
Klaviyo Reviews offre un’ampia gamma di selettori di classi CSS, che puoi usare per scrivere CSS personalizzato e applicare opzioni di stile avanzate ai widget delle recensioni. Per ulteriori informazioni, vai al nostro dizionario completo delle classi CSS di Klaviyo Reviews.
Come applicare un CSS personalizzato
Puoi applicare CSS personalizzato a Klaviyo Reviews nello stesso modo in cui applicheresti qualsiasi altro CSS personalizzato:
- Aggiungi CSS personalizzato al foglio di stile CSS principale del tuo sito.
- Inserisci i tag <style> nel codice di una singola pagina per applicare il CSS a quella pagina.
- Incorpora il CSS in un singolo elemento HTML (ad es. un div) per applicarlo solo a quell’elemento.
- Aggiungi CSS personalizzato a tutto il tuo sito in Impostazioni tema > CSS personalizzato (Shopify) o Stili > CSS (WooCommerce).
Qui ci concentreremo sull’ultima opzione, perché è la più semplice da implementare.
Tieni presente che Klaviyo Reviews, inclusi gli stili predefiniti, in genere si caricano dopo il CSS della tua piattaforma e-commerce. Questo significa che è importante usare selettori precisi, così il tuo CSS personalizzato non viene sovrascritto dai valori predefiniti.
Applica CSS personalizzato per Shopify
- Nel tuo pannello di amministrazione Shopify, vai in Negozio online > Temi.
- Dal menu delle opzioni aggiuntive (3 puntini) del tema attuale, fai clic su Duplica.
Non è consigliabile apportare modifiche al tema attuale mentre è live, perché queste modifiche potrebbero essere visibili ai visitatori del sito prima che tu possa rivedere i cambiamenti e risolvere eventuali problemi.
- Clicca su Personalizza accanto alla nuova copia del tuo tema.
- Fai clic sull’icona delle impostazioni del tema.
- Seleziona CSS personalizzato dal menu.
- Aggiungi il tuo CSS personalizzato.
Nella sezione seguente sono disponibili esempi di snippet CSS da copiare.
- Vai a una pagina nell’editor in cui vengono visualizzati i tuoi widget delle recensioni (ad es. Prodotto predefinito).
- Rivedi le modifiche, quindi clicca su Pubblica.
Aggiungi CSS personalizzato per WooCommerce
Devi usare un selettore ID pagina,.page-id-YOUR_PAGE_ID , per applicare il CSS a una pagina specifica o a più pagine. Scopri come trovare un ID pagina.
- Nell'area di amministrazione di Wordpress, vai a Aspetto > Editor.
- Seleziona Stili.
- Apri il menu dei tre puntini (Altro).
- Seleziona CSS aggiuntivo.
- Aggiungi il tuo CSS personalizzato.
Nella sezione seguente sono disponibili esempi di snippet CSS da copiare.
- Rivedi le modifiche, quindi clicca su Pubblica.
Casi d'uso di CSS personalizzato
Gli snippet CSS riportati di seguito coprono alcuni casi d'uso di base. Una personalizzazione più avanzata richiede il supporto di uno sviluppatore. Se nel tuo team non è presente uno sviluppatore e non te la senti di scrivere codice, valuta la possibilità di rivolgerti a un partner Klaviyo per ricevere assistenza.
Aspetto dell'icona di valutazione (stella)
Sostituisci gli URL di seguito con URL di immagini che rappresentino, rispettivamente, la tua stella piena preferita, la stella parziale e la stella vuota. Tieni presente che, per i negozi Shopify, gli URL devono fare riferimento a immagini archiviate in Shopify, a causa delle loro regole.
#klaviyo-product-reviews-wrapper {
.kl_reviews__star {
display: none;
}
.kl_reviews__full_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/full-moon.png?v=1705073898");
background-size: cover;
}
.kl_reviews__partial_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/last-quarter-moon.png?v=1705073898");
background-size: cover;
}
.kl_reviews__empty_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/new-moon.png?v=1705073898");
background-size: cover;
}
}Dimensione miniatura dell'immagine
Imposta una larghezza specifica per le immagini inviate dai clienti nell’elenco delle recensioni.
#klaviyo-product-reviews-wrapper .kl_reviews__review__image { width: 225px; }
Colori e stili dei pulsanti
Applica stili solo al pulsante Scrivi una recensione.
#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
} Applica gli stili solo al pulsante Fai una domanda.
#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}Risorse aggiuntive
- Come personalizzare i widget di recensione
Scopri come personalizzare l’aspetto dei tuoi widget per le recensioni (ad esempio, i blocchi sul tuo negozio che mostrano e raccolgono recensioni sui prodotti).
- Come personalizzare la pagina di invio delle recensioni
Scopri le opzioni di personalizzazione per la pagina di invio delle recensioni, incluso come consentire a chi recensisce di scegliere un titolo generato dall'IA per la propria recensione.
- Recensioni di Klaviyo Riferimento alle classi CSS (risorsa per gli sviluppatori)