1. Centro assistenza
  2. Contenuto
  3. Utilizzo di variabili per personalizzare i contenuti

Caso d'uso delle variabili: Mostrare la percentuale di sconto solo quando è presente uno sconto in un'email

Creato
Aggiornato
Segui

Evidenziare i prezzi scontati e la relativa percentuale di sconto nei prodotti consigliati consente di aumentare le conversioni nell’eCommerce. Tramite stili e classi CSS, puoi mostrare la percentuale di sconto e l’importo originale barrato, accanto al prezzo attuale, solo nei prodotti in promozione. 

In questo articolo imparerai come mostrare in un’email la percentuale di sconto solo quando esiste uno sconto.

 

Tieni presente che questo metodo è compatibile con la maggior parte dei client, tuttavia Outlook non supporta la funzione CSS utilizzata, pertanto questa guida non sarà funzionale in quel client.

  

Tempo di implementazione: 15 minuti.
Difficoltà: Media
Quando utilizzarlo?: In email che mostrano prodotti con e senza sconto.

 

PASSO 1. Crea un design di email

1. Accedi a “Contenuto > Email” e fai clic su  Crea nuova email.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 1-min.png

2. Includi nel design almeno un componente avanzato di tipo Prodotti.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 2-min.png

  

Per saperne di più sull’utilizzo dell’Editor di email, fai clic qui.

Per imparare a creare un blocco di prodotti personalizzati in un’email, fai clic qui.

 

PASSO 2. Crea la variabile nel contenuto dinamico

3. Seleziona il blocco di prodotti e, nell’editor incluso in Proprietà, fai clic su Variabili per crearne una nuova nel punto in cui desideri visualizzare il prezzo scontato.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 3-min.png

4. Dai un nome alla variabile che mostrerà il prezzo scontato. Puoi chiamarla: "originalPrice".

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 4-min.png

5. Clicca su  Accetta per salvare le modifiche.

6. Seguendo gli stessi passaggi, crea la variabile che conterrà lo sconto. Puoi chiamarla: "discount".

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 5-min.png

 

Approfitta per dare uno stile personalizzato alle variabili così che siano ben distinguibili. Il design aiuta il contatto a focalizzarsi su ciò che si desidera mettere in evidenza.

Nell’esempio, lo sconto viene mostrato con testo bianco su sfondo rosso e il prezzo originale è barrato tramite CSS (il codice si trova nel PASSO 3).

7. Vai alla scheda Variabili e fai clic su  (Modifica) sulla variabile appena creata ("originalPrice").

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 6-min.png

8. Assegna alla variabile il tipo di dato "Valuta".

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 7-min.png

9. Premi su  Accetta per salvare le modifiche. 

  

Esegui i passaggi 7, 8 e 9 anche per la variabile "discount" per assegnarle il tipo di dato "Percentuale".

10. Seleziona di nuovo il blocco di prodotti dinamico e, nella sezione Editor, fai clic sull’opzione HTML.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 8-min.png

11. Nell’editor del contenuto dinamico, assegna la classe con i seguenti stili CSS agli elementi che mostrano le variabili del prezzo originale e dello sconto:

  • Il blocco che include la percentuale di sconto è il seguente:
<h5 style="text-align: center;"><strong>{{title}}&nbsp;&nbsp;<span style="background-color: #FF0000; color: #FFFFFF;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}">&nbsp;{{discount}}</span></strong></h5>
  • Il blocco che include il prezzo originale barrato è il seguente:
<h5 style="text-align: center;"><br><span style="color: #808080; text-decoration : line-through;{{__cn_expression|HIDE_WHEN_ZERO(discount)}}">{{originalPrice}}</span><span style="font-size: 12pt;">&nbsp;&nbsp;{{price}}</span></h5>

 

12. Clicca su  Applica per salvare le modifiche al codice HTML e chiudi l’editor di email facendo clic su  Salva. 

 

PASSO 3. Crea un workflow per inviare l’email

13. Accedi a “Workflows” e fai clic su  Crea nuovo workflow.

 

Per semplificare il lavoro, puoi usare il nostro template Campagna settimanale di prodotti consigliati. Ricorda che dovrai configurare il workflow seguendo le istruzioni prima di continuare con questo articolo.

Se preferisci farlo da zero, ti consigliamo di consultare Mostrare prodotti personalizzati in un contenuto.

14. Nel nodo “Invia email”, fai clic su   (Modifica configurazione del nodo) e configura l’assegnazione delle variabili.

Mostrar porcentaje de rebaja sólo cuando exista descuento en un email - 9-min.png

15. Fai clic su Applica per salvare le modifiche nel nodo e salva tutte le modifiche del workflow.

16. Clicca su   Avvia per attivare il workflow.

17. Accedi al tuo gestore email via web e verifica che le percentuali di sconto siano visualizzate correttamente nell’email.

Mostrar_porcentaje_de_rebaja_en_EMAIL-__12.png

 

 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 Connectif, ti consigliamo di proseguire con i seguenti articoli: