Aggiunta di una sezione Liquid personalizzata di Shopify Email

Fai crescere la tua attività

Se hai bisogno di assistenza nella creazione di codice personalizzato per i tuoi messaggi di Shopify Email, puoi contattare un Esperto Shopify.

L'aggiunta di una sezione Liquid personalizzata ti consente di inserire codici HTML o Liquid personalizzati nei tuoi messaggi di Shopify Email.

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 la sezione Liquid personalizzata per mostrare risorse personalizzate quali immagini affiancate, pulsanti personalizzati, nonché immagini e sezioni con dimensioni personalizzate.

Considerazioni

Prima di aggiungere codice Liquid personalizzato ai messaggi di Shopify Email, esamina le seguenti considerazioni.

• Le variabili incluse nel codice devono essere supportate dalla sezione Liquid personalizzata.
• Il codice inserito non può superare 50 KB di dimensione.
• È possibile creare una sezione Liquid personalizzata solo da un dispositivo desktop.

Variabili Liquid supportate nella sezione Liquid personalizzata

Puoi utilizzare le seguenti variabili per personalizzare i messaggi di Shopify Email nella sezione Liquid personalizzata.

Descrizione delle variabili Liquid supportate da Shopify Email

Variabile	Descrizione
abandoned_checkout	Questa variabile consente di accedere alle seguenti proprietà di un check-out abbandonato: url mostra l'URL del check-out abbandonato. line_items mostra le prime cinque voci del check-out abbandonato. Inoltre, ogni oggetto line_items contiene le seguenti proprietà per ciascun prodotto: product_title variant_title quantity remaining_products_count mostra il numero di voci rimanenti, se il check-out abbandonato contiene più di cinque voci. La variabile abandoned_checkout viene compilata solo se l'email fa parte di un'automazione di marketing per check-out abbandonati. In caso contrario, la variabile sarà null.
abandoned_visit	Questa variabile consente di accedere alle seguenti proprietà di un browser o un check-out abbandonati: url mostra l'URL del check-out abbandonato. products_added_to_cart mostra le prime cinque voci di prodotto aggiunte al carrello della visita abbandonata. Inoltre, ogni oggetto products_added_to_cart contiene le seguenti proprietà per ciascun prodotto: title image_url variant_title quantity products_viewed mostra i primi cinque prodotti visualizzati durante la visita abbandonata. Inoltre, ogni oggetto products_viewed contiene le seguenti proprietà per ciascun prodotto: title description image_url URL remaining_cart_products_count mostra il numero di voci rimanenti, se il check-out abbandonato contiene più di cinque voci. La variabile abandoned_visit viene compilata solo se l'email fa parte di un'automazione di marketing per browser di prodotti abbandonati o carrello abbandonato. In caso contrario, la variabile sarà null.
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. address mostra l'indirizzo del negozio e le seguenti proprietà dell'indirizzo: address1 address2 city country phone province zip branding mostra il branding del negozio, che include le seguenti proprietà: accent_section_color background_primary_color background_border_color body_text_color button_background_and_link_color button_label_color footer_link_color footer_text_color footer_background_color social_link_facebook social_link_twitter social_link_instagram social_link_pinterest shop_name logo, visualizzato direttamente come tag img.

Esempio di codice Liquid personalizzato

Dopo aver aggiunto una sezione Liquid personalizzata al tuo modello di email, puoi aggiungere il codice HTML o Liquid personalizzato 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>
  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#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>