Lägga till anpassad Liquid till Shopify e-post-kampanjer

Du kan lägga till anpassad kodning till dina Shopify e-post-meddelanden genom att lägga till ett anpassat Liquid-avsnitt eller genom att skapa ett helt anpassat e-postmeddelande. Med dessa alternativ kan du ange anpassad Liquid eller HTML.

Liquid är Shopifys enkla och lättanvända programmeringsspråk och är samma programmeringsspråk som teman från Shopifys temabutik är byggda med.

Du kan använda anpassad Liquid för att visa anpassade tillgångar, till exempel bilder sida vid sida, anpassade knappar, bilder i anpassad storlek och anpassade avsnittsstorlekar.

Överväganden

Granska följande överväganden innan du börjar lägga till anpassad Liquid i dina Shopify e-post-meddelanden:

  • Variablerna som du inkluderar i din kod måste stödjas av anpassad Liquid.
  • Du kan bara använda en stationär enhet för att skapa ett anpassat Liquid-avsnitt.
  • Variabeln unsubscribe_link krävs i anpassade Liquid-e-postmeddelanden. Om du har aktiverat öppen spårning krävs även variabeln open_tracking. Läs mer om att lägga till obligatoriska variabler i din e-post.
  • Koden du anger har följande begränsningar:
    • Maximalt 50 kilobyte (kb) för anpassade Liquid-avsnitt.
    • Maximalt 500 kb för anpassad kodad Liquid-e-post.

Liquid-variabler stöds i anpassad Liquid

Du kan använda följande variabler för att anpassa dina Shopify-e-postmeddelanden med Liquid.

Beskrivning av Liquid-variabler som stöds av Shopify e-post
Variabel Beskrivning
unsubscribe_link
Variabeln ger åtkomst till länken för att avsluta prenumerationen. Variabeln krävs om du skapar ett anpassat e-postmeddelande.
open_tracking
Variabeln ger åtkomst till det förformaterade öppna spårningsblocket. Variabeln krävs om du skapar ett anpassat e-postmeddelande och har aktiverat öppen spårning.
abandoned_checkout

Denna variabel ger åtkomst till följande egenskaper för en övergiven varukorg:

  • url visar URL för den övergivna varukorgen.
  • line_items visar de första fem posterna i den övergivna varukorgen.Dessutom innehåller varje line_items objekt följande egenskaper för varje produkt:
    • image_url
    • product_title
    • variant_title
    • kvantitet
  • remaining_products_count visar återstående radobjektantal om det finns fler än fem radobjekt i den övergivna varukorgen.
  • Variabeln abandoned_checkout fylls endast i om ett e-postmeddelande är en del av en automatiserad marknadsföringsautomatisering för övergiven varukorg. Annars kommer variabeln att vara null.

abandoned_visit

Denna variabel ger åtkomst till följande egenskaper för en övergiven varukorg eller bläddra:

  • url visar URL för den övergivna varukorgen.
  • products_added_to_cart visar de fem första produktradsartiklarna som lagts till i varukorgen vid det övergivna besöket.Dessutom innehåller varje products_added_to_cart/objekt följande egenskaper för varje produkt:
    • Titel
    • image_url
    • variant_title
    • kvantitet
  • products_viewed visar de första fem produkterna som visades under det övergivna besöket.Dessutom innehåller varje products_viewed objekt följande egenskaper för varje produkt:
    • Titel
    • beskrivning
    • image_url
    • url
  • remaining_cart_products_count visar återstående radobjektsantal om det finns fler än fem radobjekt i den övergivna varukorgen.
  • Variabeln abandoned_visit fylls endast i om ett e-postmeddelande är en del av en övergiven varukorg eller en övergiven produkt som bläddrar i marknadsföringsautomation. Annars kommer variabeln att vara null.

data.customer.*

Variabeln ger åtkomst till följande egenskaper för kunddata:

  • förnamn
  • efternamn
  • e-post
  • stad
  • delstat
  • land
  • Dessa egenskaper kan inte användas inuti Liquid-filter eller Liquid-villkor.

    email.*

    Den här variabeln ger åtkomst till följande e-postegenskaper:

  • subject visar ämnesraden i e-postmeddelandet.
  • preview_text visar förhandsgranskningstexten i e-postmeddelandet.
  • shop.*
    Den här variabeln ger åtkomst till följande butiksegenskaper:
  • name visar butiksnamnet.
  • domain visar butikens huvuddomän.
  • url visar butikens URL.
  • shopify_domain visar butiekns Shopify-domän.
    • address visar butiksadressen, vilket utsätter följande adressegenskaper:
      • adress1
      • adress2
      • stad
      • land
      • telefon
      • provins
      • postnummer
      • branding visar butiksvarumärket, vilket innehåller följande egenskaper:
        • 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, som återges direkt som en img/tagg.

    Använd obligatoriska variabler

    När du skapar en anpassad Liquid-e-post krävs variabeln unsubscribe_link. Om du har aktiverat öppen spårning krävs även variabeln open_tracking.

    Även om dessa variabler kan infogas var som helst i koden för din e-post, är den vanligaste platsen att lägga till dem i ett e-postmeddelandes sidfotsavsnitt, till exempel i följande exempel:

    <div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>

    Exempel på anpassad Liquid-kod

    Du kan lägga till din anpassade Liquid eller HTML i kodredigeraren. Följande kod är ett exempel på hur du kan lägga till Liquid-kod för att visa ditt butiksnamn, en anpassad knapp och en anpassad bild i ett e-postmeddelande.

    <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>

    Är du redo att börja sälja med Shopify?

    Prova gratis