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.
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.
3. Includi almeno un componente avanzato di tipo Prodotti.
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".
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.
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.
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.
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.