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

Få din verksamhet att växa

Om du behöver hjälp med att skapa anpassad kod för dina Shopify e-postmeddelanden kan du anlita en Shopify partner.

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.

Tidig åtkomst

E-postmeddelanden med anpassad kod är endast tillgängliga för vissa butiker som har tidig åtkomst.

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>