Evidenziare i prezzi scontati e la percentuale di sconto nei prodotti consigliati permette di aumentare le conversioni nell’eCommerce. Tramite stili e classi CSS, potrai mostrare la percentuale di sconto e l’importo originale barrato, accanto al valore attuale, solo nei prodotti in offerta.
In questo articolo imparerai come mostrare nei contenuti web la percentuale di sconto solo quando esiste un’offerta.
Tempo di implementazione: 15 minuti.
Difficoltà: Media
Quando utilizzarlo?: Nei contenuti che mostrano prodotti con e senza sconto.
PASSO 1. Crea un contenuto web
1. Accedi a “Contenuto > Contenuto web” e fai clic su Crea nuovo contenuto web.
2. Scegli il tipo di contenuto web adatto, assegnagli un nome e clicca su Crea contenuto web.
Se ti interessa sapere di più sui cinque tipi di contenuto web, fai clic qui.
3. Includi almeno un componente avanzato di tipo Prodotti.
Per questo passaggio ti consigliamo di dare un’occhiata al Editor di contenuto web e a come creare un blocco di prodotti personalizzati in un contenuto web.
PASSO 2. Inserisci classi e stili CSS
4. Aggiungi un Componente HTML nella parte superiore del layout.
5. Inserisci il seguente frammento di codice, sostituendo il contenuto dell’elemento HTML.
<style text="text/css">
.cn_discount_0 {
display: none !important;
}
</style>
PASSO 3. Crea le variabili nel contenuto dinamico
6. Seleziona il blocco di prodotti dinamico e, nell’editor all’interno delle Proprietà, fai clic su Variabili per crearne una nuova nel punto in cui desideri visualizzare il prezzo scontato.
7. Dai un nome alla variabile che mostrerà il prezzo scontato. Puoi chiamarla: "originalPrice".
8. Fai clic su Accetta per salvare le modifiche.
9. Ripeti le azioni dei punti 6, 7 e 8 per creare la variabile che conterrà lo sconto. Puoi chiamarla: "discount".
Evidenziare le percentuali di sconto con un design accattivante aiuterà il contatto a prestare maggiore attenzione, quindi ti invitiamo a personalizzarne lo stile per aumentare la probabilità di conversione.
Nel nostro esempio, lo sconto è mostrato con testo bianco su sfondo rosso e il prezzo originale è barrato. Puoi copiare il codice CSS al punto 14.
10. Vai alla scheda Variabili e fai clic su (Modifica) nella variabile appena creata ("originalPrice").
11. Nel campo Tipo di dato seleziona "Valuta".
12. Clicca su Accetta per salvare le modifiche.
Alla variabile "discount" non viene assegnato un formato per facilitare il funzionamento del codice introdotto nel componente HTML. Tuttavia, viene aggiunto il simbolo percentuale (%) nell’editor per mostrarlo nel contenuto.
13. Seleziona di nuovo il blocco di prodotti dinamico e, nella scheda Proprietà, clicca sul pulsante Modifica codice HTML.
14. Nell’editor del contenuto dinamico, assegna la classe CSS "cn_discount_{{discount}}" agli elementi che mostrano le variabili del prezzo originale e dello sconto.
Il blocco che include la percentuale di sconto è il seguente (riga 2 del codice):
<div class="cn_element_products_2_name" style="margin-top: 15px; word-wrap: break-word; white-space: normal; overflow: hidden; height: 2.1em; line-height: 1em; box-sizing: border-box;"><strong>{{name}} <span class="cn_discount_{{discount}}" style="color: white; background-color: #ff0000;">{{discount}}%</span></strong></div>
Il blocco che include il prezzo originale barrato è il seguente (riga 3 del codice):
<div class="cn_element_products_2_unit_price" style="color: #999999; font-size: 0.9em; word-wrap: break-word; white-space: normal; overflow: hidden; height: 1.1em; line-height: 1em; box-sizing: border-box;"><span style="font-size: 12pt;"><span class="cn_discount_{{discount}}" style="font-size: 14.4px; text-decoration-line: line-through;">{{originalPrice}}</span> {{unitPrice}}</span></div>
15. Fai clic su Applica per salvare le modifiche dell’HTML e su Salva per salvare il contenuto web.
PASSO 4. Crea un workflow per mostrare il contenuto web
16. Accedi a “Workflows” e fai clic su Crea nuovo workflow.
Per semplificare il compito, puoi utilizzare uno dei nostri modelli, ad esempio: raccomandatore nella scheda prodotto oppure crosselling nella homepage. Ricorda che dovrai configurare il workflow seguendo le istruzioni prima di continuare con questo articolo.
Se desideri progettare la strategia da zero, ti consigliamo di dare un’occhiata a come Mostrare prodotti personalizzati in un contenuto.
17. Nel nodo “Invia contenuto web”, fai clic su (Modifica configurazione del nodo) e configura l’assegnazione delle variabili.
18. Clicca su Fine per salvare le modifiche nel nodo e su Salva per salvare tutte le modifiche del workflow.
19. Fai clic su Avvia per attivare il workflow.
20. Accedi al tuo sito web e verifica che le percentuali di sconto vengano mostrate correttamente.
Successo!
Le percentuali di sconto dei tuoi prodotti verranno mostrate quando sarà applicato uno sconto.
Continua a imparare!
Per sfruttare tutto il potenziale del tuo account in Connectif, ti consigliamo di continuare con i seguenti articoli:
- Mostrare la percentuale di sconto solo quando esiste uno sconto in un’email, per applicare la stessa funzionalità nelle email.
-
Raccomandatore nella homepage, per mostrare prodotti consigliati in base all’attività del contatto sul sito.
- Best seller nella scheda prodotto, per mostrare al contatto, quando visita un prodotto, gli articoli più venduti nella stessa categoria.
-
Raccomandatore nel checkout, per mostrare nel checkout prodotti correlati al carrello.