Per impostazione predefinita, il nostro layout di upsell è molto pulito e non aggressivo. Questo perché crediamo che un design semplice e pulito sia il migliore in termini di conversione.
Tuttavia, puoi sempre migliorarlo sfruttando le opzioni di personalizzazione dell'app, come ad esempio le impostazioni di personalizzazione del pop-up , le impostazioni di personalizzazione del blocco dell'app della pagina del prodotto , o applicando regolazioni di stile più avanzate.
Personalizzazione del pop-up
Utilizzando i CSS personalizzati puoi modificare praticamente qualsiasi elemento del pop-up. Tuttavia, per farlo è necessaria una conoscenza di base dei CSS. Per iniziare a conoscere i CSS, ti consigliamo di leggere il tutorial W3Schools sui CSS.
Per modificare il codice CSS, vai su Personalizzazione nel menu dell'applicazione e trova la sezione Personalizzazione avanzata . Inserisci il tuo codice CSS personalizzato in questa sezione.
Elenco dei selettori
Di seguito è riportato l'elenco dei selettori disponibili che puoi utilizzare per iniziare a creare lo stile del pop-up Candy Rack.
Elemento
|
Selettore di classe
|
Aggiungi pulsante
|
per il layout a griglia:
|
Continue button
|
|
No, thank you button
|
|
Parent product line
|
|
Pop-up title
|
|
Parent product
|
|
Upsell product
|
|
Parent product price
|
|
Prezzo dell'offerta upsell
|
|
Prezzo originale dell'offerta upsell
|
|
Testo della descrizione
|
|
Esempi di personalizzazione del pop-up
Ecco alcuni esempi di personalizzazione che utilizzano i codici CSS per migliorare l'esperienza di upselling del tuo negozio e allinearsi al branding del tuo negozio.
Personalizzazione dei pulsanti "Aggiungi", "Continua" e "No, grazie"
Questo codice può modificare il colore dello sfondo, il colore del carattere, il colore del bordo e la dimensione del carattere. Inoltre, cambia il colore dello sfondo al passaggio del mouse per il pulsante Aggiungi:
.Button-Add { background-color: #2dd262 !important; /* button color */ border-color: #8f9396 !important; /* border color */ color: white !important; /* font color */ font-size: 16px !important; /* font size */}.Button-Add:hover { background-color: #059e36 !important; /* button color on hover */}
Se vuoi applicare lo stesso stile a tutti i pulsanti, puoi raggrupparli usando le virgole per separare ogni classe.
.Button-Add, .Button-Primary, .Button-Reject { background-color: #2dd262 !important; /* button color */ border-color: #8f9396 !important; /* border color */ color: white !important; /* font color */ font-size: 16px !important; /* font size */}.Button-Add:hover, .Button-Primary:hover, .Button-Reject:hover { background-color: #059e36 !important; /* button color on hover */}
Personalizzare la linea del prodotto principale
Regolare il colore di sfondo della sezione principale del prodotto.
.Product-Line { background-color: #D9FED9 !important; /* background color */}
Regolazione delle dimensioni dei caratteri
Modificare le dimensioni dei caratteri per il titolo del pop-up, per il prodotto principale e per il prodotto upsell.
.Title { font-size: 30px !important; /* font size of the headline */}.Product-Name { font-size: 16px !important; /* font size of the parent product */}.Offer-Title { font-size: 16px !important; /* font size of the upsell product */}
Come modificare il carattere utilizzato nel pop-up
Puoi personalizzare ulteriormente il pop-up importando un carattere personalizzato e applicandolo a elementi specifici.
Per prima cosa, importa il font utilizzando la regola @import (per caricare un CSS esterno che includa il font), oppure definiscilo direttamente utilizzando la regola @font-face. Quindi applica il font a elementi specifici utilizzando la proprietà font-family.
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* assegnazione di un nuovo font al pop-up di Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}
Panoramica dei selettori di classe del pop-up
Ecco tutti i selettori di classe disponibili che puoi utilizzare per personalizzare il pop-up di Candy Rack. Questi selettori ti permettono di stilizzare vari elementi, come pulsanti e testo, dandoti un maggiore controllo sull'aspetto del pop-up.
Le offerte incorporate sono personalizzabili
Per modificare il codice CSS dei tuoi upsell incorporati nella pagina del prodotto, accedi all'editor del tema , accedi a una pagina del prodotto, naviga su Template, apri le impostazioni del blocco app della pagina del prodotto di Candy Rack e scorri fino in fondo alla pagina per aggiungere il codice CSS.
Per saperne di più su come attivare i blocchi app per Candy Rack, leggi l'articolo Come aggiungere e personalizzare i blocchi app per il posizionamento della pagina Prodotto .
Elenco dei selettori
Di seguito è riportato l'elenco dei selettori disponibili che puoi utilizzare per iniziare a creare lo stile del blocco app di Candy Rack.
Elemento
|
Selettore di classe
|
Titolo dell'offerta
|
|
Nome del prodotto
|
|
Prezzo originale
|
|
Prezzo scontato
|
|
Testo della descrizione
|
|
Testo segnaposto
|
|
Esempi di personalizzazione del blocco app
Ecco alcuni esempi di personalizzazione del blocco app utilizzando il codice CSS per migliorare l'esperienza di upselling del tuo negozio e allinearsi con il branding del tuo negozio.
Regolazione delle dimensioni dei caratteri
Modifica delle dimensioni dei caratteri del titolo dell'offerta e del nome dell'Upsell.
.candyrack-ppp-checkbox-layout__offers--title { font-size: 30px !important; /* font size of the offer title */}.candyrack-ppp-checkbox-layout__info--product-name { font-size: 15px !important; /* font size of the upsell name */}
Personalizza i prezzi dei prodotti
Modifica il colore dei caratteri del prezzo originale del prodotto e del prezzo scontato per rendere lo sconto più evidente ai clienti.
.candyrack-ppp-checkbox-layout__info--product-price { color: grey !important; /* font color of the offer original price */}.candyrack-ppp-checkbox-layout__info--product-discount-price { color: green !important; /* font color of the sale price */}
Personalizzare i contenuti del testo
Modificare gli stili dei caratteri della descrizione e del testo segnaposto. Ecco i selettori utilizzati:
.candyrack-ppp-checkbox-layout__info--offerta-descrizione { font-weight: 700 !important; /* font weight of the description text */}.candyrack-ppp-text-input { font-style: italic !important; /* font style of the placeholder text if custom note is enabled */}
Panoramica dei selettori di classe del blocco app
Ecco una panoramica dei selettori di classe disponibili che puoi utilizzare per personalizzare il blocco app Candy Rack.
Se sei interessato ad altre opzioni per gli sviluppatori e alle API pubbliche di Candy Rack, puoi saperne di più nell'articolo API pubbliche di Candy Rack e opzioni per gli sviluppatori.
Hai bisogno di una mano? Non esitare a contattarci via chat o e-mail a [email protected]
Buon upselling,
Il team di Candy Rack