Aggiunta di Liquid personalizzato alle campagne Shopify Email
Puoi aggiungere codifiche personalizzate ai messaggi di Shopify Email aggiungendo una sezione Liquid personalizzata o creando un'email con il codice completamente personalizzato. Queste opzioni ti consentono di inserire Liquid o HTML personalizzati.
Liquid è il linguaggio di programmazione di Shopify semplice e facile da utilizzare. Si tratta dello stesso linguaggio di programmazione con cui sono costruiti i temi del Theme store di Shopify.
Puoi utilizzare Liquid personalizzato per mostrare risorse personalizzate quali immagini affiancate, pulsanti personalizzati, nonché immagini e sezioni con dimensioni personalizzate.
Su questa pagina
Considerazioni
Prima di aggiungere Liquid personalizzato ai messaggi di Shopify Email, esamina le seguenti considerazioni:
- Le variabili incluse nel codice devono essere supportate da Liquid personalizzato.
- È possibile creare una sezione Liquid personalizzata solo da un dispositivo desktop.
- La variabile
unsubscribe_link
è obbligatoria nelle email Liquid personalizzate. Se hai attivato il monitoraggio dell'apertura, è necessaria anche la variabileopen_tracking
. Scopri di più sull'aggiunta delle variabili obbligatorie alla tua email. - Il codice che inserisci ha i seguenti limiti:
- Massimo 50 kilobyte (KB) per le sezioni Liquid personalizzate.
- Massimo 500 KB per le email con codice Liquid personalizzato.
Variabili Liquid supportate nel Liquid personalizzato
Puoi utilizzare le seguenti variabili per personalizzare i messaggi di Shopify Email con Liquid.
Variabile | Descrizione |
---|---|
unsubscribe_link |
Questa variabile dà accesso al link di annullamento dell'iscrizione. Questa variabile è obbligatoria se crei un'email personalizzata. |
open_tracking |
Questa variabile dà accesso al blocco di monitoraggio dell'apertura già formattato. Questa variabile è obbligatoria se crei un'email con codice personalizzato e hai attivato il monitoraggio dell'apertura. | abandoned_checkout |
Questa variabile consente di accedere alle seguenti proprietà di un check-out abbandonato:
La variabile |
abandoned_visit |
Questa variabile consente di accedere alle seguenti proprietà di un browser o un check-out abbandonati:
La variabile |
data.customer.* |
Questa variabile consente di accedere alle seguenti proprietà dei dati dei clienti: first_name last_name email city state country Queste proprietà non possono essere utilizzate all'interno dei filtri Liquid o delle condizioni Liquid. |
email.* |
Questa variabile consente di accedere alle seguenti proprietà dell'email: subject mostra l'oggetto dell'email.preview_text mostra l'anteprima del testo dell'email. |
shop.* |
Questa variabile consente di accedere alle seguenti proprietà del negozio:
name mostra il nome del negozio.domain mostra il dominio primario del negozio.url visualizza l'URL del negozio.shopify_domain mostra il dominio del negozio Shopify.
|
Utilizzo delle variabili
Quando crei un'email Liquid personalizzata, la variabile unsubscribe_link
è obbligatoria. Se hai attivato il monitoraggio dell'apertura, è necessaria anche la variabile open_tracking
.
Anche se queste variabili possono essere inserite in qualsiasi punto del codice del tuo indirizzo email, quello più comune si trova nella sezione footer di un'email, come nell'esempio seguente:
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
Esempio di codice Liquid personalizzato
Puoi aggiungere HTML e Liquid personalizzati nell'editor di codice. Il seguente codice mostra un esempio di come aggiungere il codice Liquid per visualizzare il nome del negozio, un pulsante personalizzato e un'immagine di dimensioni personalizzate in un messaggio email.
<style>
body {
text-align: center;
}
p#welcome {
margin: 0;
padding: 3rem;
color: white;
font-weight: 700;
font-size: 26px;
font-family: 'Futura';
}
div#image_wrapper img {
max-width: 70%;
border-radius: 60px;
box-shadow: -2px 6px 0px rgba(227, 111, 59, 0.7);
}
div#button_wrapper {
padding: 1rem;
}
div#button_wrapper a {
padding: 1rem 2rem;
border-radius: 24px;
display: inline-block;
background: linear-gradient(120deg, #F6A179, #865CFF);
box-shadow: -2px 4px 0px rgba(96, 54, 173, 0.9);
font-weight: 700;
font-size: 16px;
font-family: 'Futura';
color: white;
}
div#footer {
font-weight: 700;
font-size: 16px;
font-family: 'Futura';
padding: 2rem;
}
div#button_wrapper:hover a {
box-shadow: -4px 6px 0px rgba(96, 54, 173, 0.8);
}
div#custom_section {
background: linear-gradient(120deg, #FF9F73, #FFC7AD);
padding:0 0 2rem 0;
border-radius: 4rem;
}
</style>
<div id="custom_section">
<p id="welcome">
Hello from {{shop.name}}<strong></strong>!
</p>
<div id="image_wrapper">
<img src="https://burst.shopifycdn.com/photos/a-trio-of-natural-soaps.jpg" alt="" />
</div>
<div id="button_wrapper">
<a href="">Shop now</a>
</div>
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
</div>