Imparerai
Impari a conoscere i CSS personalizzati per le Recensioni di Klaviyo, compreso come implementare alcuni casi d'uso di base. Per casi d'uso più avanzati, consulti la nostra risorsa per sviluppatori sui CSS personalizzati per le recensioni di Klaviyo. La maggior parte della personalizzazione dei widget può essere implementata utilizzando gli editor drag and drop; i CSS sono necessari solo per casi d'uso avanzati.
L'implementazione di CSS personalizzati per i widget delle recensioni comporta la modifica del codice del suo sito. Questo è consigliato solo ai marketer tecnicamente esperti o a coloro che hanno accesso a uno sviluppatore. Sebbene il nostro prodotto supporti i CSS personalizzati, il nostro team di assistenza non può aiutarla a personalizzare i suoi widget al di là delle indicazioni generali contenute in questa documentazione. Per mantenere la sicurezza dei suoi dati, il team di assistenza di Klaviyo non è in grado di aprire i suoi file HTML.
Informazioni sui CSS personalizzati per le recensioni di Klaviyo
Klaviyo Reviews offre un'ampia gamma di selettori di classi CSS, che possono essere utilizzati per scrivere CSS personalizzati e applicare opzioni di stile avanzate ai suoi widget di recensioni. Per maggiori informazioni, consulti il nostro dizionario completo delle classi CSS di Klaviyo Reviews.
Come applicare un CSS personalizzatoCome applicare un CSS personalizzato
Può applicare un CSS personalizzato a Klaviyo Reviews nello stesso modo in cui applicherebbe qualsiasi altro CSS personalizzato:
- Aggiunga un CSS personalizzato al foglio di stile CSS principale del suo sito.
- Inserisca i tag <style> all'interno del codice di una singola pagina per applicare i CSS a quella pagina.
- Incorpora il CSS in un singolo elemento HTML (ad esempio, un div) per applicarlo solo a quell'elemento.
- Aggiunga il CSS personalizzato all'intero sito nelle Impostazioni del tema > CSS personalizzato (Shopify) o Stili > CSS (WooCommerce).
Qui ci concentreremo sull'ultima opzione, perché è la più semplice da implementare.
Tenga presente che le Recensioni di Klaviyo, compresi gli stili predefiniti, generalmente vengono caricate dopo il CSS della sua piattaforma di e-commerce. Ciò significa che è importante utilizzare selettori precisi, in modo che il suo CSS personalizzato non venga sovrascritto da quello predefinito.
Applica un CSS personalizzato per ShopifyApplica un CSS personalizzato per Shopify
- Nell'amministrazione di Shopify, si rechi nel Negozio Online > Temi.
- Dal menu delle opzioni aggiuntive (3 punti) del suo tema attuale, faccia clic su Duplica.
Non è consigliabile apportare modifiche al suo tema attuale mentre è live, in quanto queste modifiche potrebbero apparire ai visitatori del sito prima che lei possa rivedere le modifiche e risolvere eventuali problemi. - Clicchi su Personalizza accanto alla nuova copia del suo tema.
- Clicchi sull'icona delle impostazioni del tema.
- Selezioni CSS personalizzato dal menu.
- Aggiunga il suo CSS personalizzato.
Nella sezione sottostante sono disponibili degli snippet CSS di esempio da copiare. - Si rechi in una pagina dell'editor in cui appaiono i widget delle recensioni (ad esempio, Prodotto predefinito).
- Riveda le modifiche, quindi clicchi su Pubblica.
Aggiungere CSS personalizzati per WooCommerce
Deve utilizzare un selettore ID pagina,.page-id-YOUR_PAGE_ID per applicare i CSS a una o più pagine specifiche. Impari a trovare l'ID di una pagina.
- Nell'amministrazione di Wordpress, vada su Aspetto > Editor.
- Seleziona gli stili.
- Apra il menu con i tre puntini(Altro).
- Selezionare CSS aggiuntivo.
- Aggiunga il suo CSS personalizzato.
Nella sezione sottostante sono disponibili degli snippet CSS di esempio da copiare. - Riveda le modifiche, quindi clicchi su Pubblica.
Casi d'uso dei CSS personalizzati
Gli snippet CSS qui sotto coprono alcuni casi d'uso di base. Una personalizzazione più avanzata richiede il supporto di uno sviluppatore. Se non ha uno sviluppatore nel suo team e non si sente a suo agio nello scrivere codice da solo, consideri di rivolgersi a un Partner Klaviyo per ricevere assistenza.
Aspetto dell'icona di valutazione (stella)
Sostituisca gli URL sottostanti con gli URL delle immagini che rappresentano la stella piena, la stella parziale e la stella vuota che preferisce, rispettivamente. Si noti che per i negozi Shopify, i suoi URL devono fare riferimento alle immagini memorizzate in Shopify, a causa delle loro regole.
#klaviyo-product-reviews-wrapper {
.kl_recensioni__star {
display: none;
}
.kl_recensioni__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 della miniatura dell'immagine
Imponga una larghezza specifica per le immagini inviate dai clienti nel suo elenco di recensioni.
#klaviyo-product-reviews-wrapper .kl_reviews__review__image { width: 225px; }
Colori e stili dei pulsanti
Applica gli 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;
}