Lägga till ett anpassat Liquid-avsnitt för Shopify Email

Om du lägger till ett anpassat Liquid-avsnitt kan du ange anpassad Liquid eller HTML i dina Shopify e-postmeddelanden.

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 det anpassade Liquid-avsnittet 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 avsnittet anpassad Liquid.
  • Koden du anger får inte vara större än 50 KB.
  • Du kan bara använda en stationär enhet för att skapa ett anpassat Liquid-avsnitt.

Liquid-variabler stöds i avsnittet anpassad Liquid

Du kan använda följande variabler för att anpassa dina Shopify-e-postmeddelanden i det anpassade Liquid-avsnittet.

Beskrivning av Liquid-variabler som stöds av Shopify e-post
Variabel Beskrivning
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:
    • 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.

    Exempel på anpassad Liquid-kod

    När du har lagt till ett anpassat Liquid-avsnitt i din e-postmall kan du 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>
      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>

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

    Prova gratis