Per impostazione predefinita, il nostro upsell pop-up è davvero pulito e non aggressivo. Questo perché crediamo che un design semplice e pulito sia il migliore in termini di conversione.
Tuttavia, è sempre possibile migliorarlo sfruttando le opzioni di personalizzazione nell'app o effettuando regolazioni di stile ancora più avanzate.
Come personalizzare il pop-up utilizzando i CSS
Utilizzando i CSS personalizzati è possibile modificare praticamente qualsiasi elemento del pop-up. Tuttavia, per farlo è necessaria una conoscenza di base dei CSS. Per iniziare a usare i CSS, si consiglia di leggere il tutorial W3Schools sui CSS.
Per modificare il codice CSS, andare su Personalizzare il pop-up nel menu in alto e trovare la sezione Personalizzazione avanzata. Inserite lì il vostro codice CSS personalizzato.
Nell'esempio che segue abbiamo aumentato la dimensione dei caratteri e cambiato il colore di tutti i pulsanti:
Di seguito sono riportati alcuni rapidi codici CSS personalizzati per iniziare.
Modificare il colore dello sfondo, il colore dei caratteri, il colore del bordo e la dimensione dei caratteri di Aggiungere i pulsanti di e il colore dello sfondo di Aggiungere i pulsanti di al passaggio del mouse:
.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:not([disabled]):hover { background-color: #059e36 !important; /* button color when hover over */}Modifica il colore di sfondo, il colore del carattere, il colore del bordo e la dimensione del carattere del pulsante Continue e il colore di sfondo del pulsante Continue al passaggio:
.Button-Primary { background-color: #2dd262 !important; /* button color */ border-color: #8f9396 !important; /* border color */ color: white !important; /* font color */ font-size: 18px !important; /* font size */}.Button-Primary:not([disabled]):hover { background-color: #059e36 !important; /* button color when hover over */}Modifica il colore di sfondo della linea di prodotti madre:
.Product-Line { background-color: #D9FED9 !important; /* background color */}Modificare la dimensione dei caratteri del titolo del pop-up, del prodotto padre e del 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 */}Modificare il font utilizzato nel pop-up:
/* il font personalizzato importato deve essere sul dominio fonts.google.com */@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* assegnazione di un nuovo font agli elementi pop-up di Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}Di seguito una panoramica delle classi disponibili per la personalizzazione:
Se sei interessato ad altre opzioni per gli sviluppatori e all'API pubblica di Candy Rack, puoi saperne di più nell'articolo API pubblica di Candy Rack e opzioni per gli sviluppatori.
Hai bisogno di una mano? Non esitate a contattarci via chat o e-mail all'indirizzo [email protected]
Buon upselling,
Il team di Candy Rack