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.

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 variabile open_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.

Descrizione delle variabili Liquid supportate da Shopify Email
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:

  • 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:
    • image_url
    • 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.

    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>

    Sei pronto per iniziare a vendere con Shopify?

    Provalo, è gratis