Sådan føjer du tilpasset Liquid-kode til Shopify Email-kampagner

Du kan indsætte tilpasset kode i dine Shopify Email-mails ved at tilføje et afsnit med tilpasset Liquid eller ved at oprette en mail med fuldt ud tilpasset kode. Med disse valgmuligheder kan du indsætte tilpasset Liquid- eller HTML-kode.

Liquid er Shopifys enkle og brugervenlige programmeringssprog og det samme programmeringssprog, som temaerne fra Shopifys temabutik er udviklet med.

Du kan bruge tilpasset Liquid til at vise tilpassede aktiver, som f.eks. billeder side om side, tilpassede knapper, billeder i tilpasset størrelse og tilpassede afsnitsstørrelser.

Overvejelser

Gennemgå følgende overvejelser, før du begynder at føje tilpasset Liquid til dine Shopify Email-mails:

  • De variabler, som du inkluderer i din kode, skal understøttes af tilpasset Liquid.
  • Du kan kun bruge en computer til at oprette et tilpasset Liquid-afsnit.
  • Variablen unsubscribe_link er påkrævet i tilpassede Liquid-mails. Hvis du har aktiveret sporing af åbninger, er variablen open_tracking også påkrævet. Få mere at vide om, hvordan du føjer påkrævede variabler til din mail.
  • Du kan indsætte kode med følgende begrænsninger:
    • Højst 50 kilobyte (KB) for afsnit med tilpasset Liquid-kode.
    • Højst 500 KB for mails med tilpasset Liquid-kode.

Liquid-variabler, der understøttes i tilpasset Liquid-kode

Du kan bruge følgende variabler til at tilpasse dine Shopify Email-mails med Liquid.

Beskrivelse af Shopify Email-understøttede Liquid-variabler
Variabel Beskrivelse
unsubscribe_link
Denne variabel giver adgang til linket til afmelding. Denne variabel er påkrævet, hvis du opretter en kodetilpasset mail.
open_tracking
Denne variabel giver adgang til den forudformaterede blok til sporing af åbninger . Denne variabel er påkrævet, hvis du opretter en kodetilpasset mail og har aktiveret sporing af åbninger.
abandoned_checkout

Denne variabel giver adgang til følgende egenskaber for en forladt betaling:

  • url viser webadressen for den forladte betaling.
  • line_items viser de første fem varelinjer i den forladte betaling.Derudover indeholder hvert line_items-objekt følgende egenskaber for hvert produkt:
    • image_url
    • product_title
    • variant_title
    • antal
  • remaining_products_count viser antallet af resterende varelinjer, hvis der er mere end fem varelinjer i den forladte betaling.
  • Variablen abandoned_checkout udfyldes kun, hvis en mail er en del af en markedsføringsautomatisering af forladt betaling. Ellers vil variablen være null.

abandoned_visit

Denne variabel giver adgang til følgende egenskaber for en forladt indkøbskurv eller browsing:

  • url viser webadressen for den forladte betaling.
  • products_added_to_cart viser de første fem produktlinjer, der blev lagt i indkøbskurven for det forladte besøg.Derudover indeholder hvert products_added_to_cart-objekt følgende egenskaber for hvert produkt:
    • titel
    • image_url
    • variant_title
    • antal
  • products_viewed viser de første fem produkter, der blev set under det forladte besøg.Derudover indeholder hvert products_viewed-objekt følgende egenskaber for hvert produkt:
    • titel
    • beskrivelse
    • image_url
    • webadresse
  • remaining_cart_products_count viser antallet af resterende varelinjer, hvis der er mere end fem varelinjer i den forladte betaling.
  • Variablen abandoned_visit udfyldes kun, hvis en mail er en del af en markedsføringsautomatisering for forladt indkøbskurv eller forladt produktbrowsing. Ellers vil variablen være null.

data.customer.*

Denne variabel giver adgang til følgende egenskaber for kundedata:

  • first_name
  • last_name
  • mail
  • by
  • status
  • land
  • Disse egenskaber kan ikke bruges i Liquid-filtre eller Liquid-betingelser.

    email.*

    Denne variabel giver adgang til følgende mailegenskaber:

  • subject viser emnelinjen i mailen.
  • preview_text viser forhåndsvisningen af mailen.
  • shop.*
    Denne variabel giver adgang til følgende butiksegenskaber:
  • name viser butikkens navn.
  • domain viser butikkens primære domæne.
  • url viser butikkens webadresse.
  • shopify_domain viser Shopify-domænet.
    • address viser butikkens adresse med følgende adresseegenskaber:
      • adresse1
      • adresse2
      • by
      • land
      • telefon
      • landsdel
      • postnummer
      • branding viser butikkens branding, hvilket omfatter følgende egenskaber:
        • 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, der gengives direkte som et img-tag.

    Brug af påkrævede variabler

    Når du opretter en tilpasset Liquid-mail, er variablen unsubscribe_link påkrævet. Hvis du har aktiveret sporing af åbninger, er variablen open_tracking også påkrævet.

    Selv om disse variabler kan indsættes et vilkårligt sted i koden for din mail, er det mest almindelige sted at tilføje dem i sidefodsafsnittet i en mail, som f.eks. i følgende eksempel:

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

    Eksempel på tilpasset Liquid-kode

    Du kan indsætte din tilpassede Liquid- eller HTML-kode i kodeeditoren. Følgende kode er et eksempel på, hvordan du kan tilføje Liquid-kode for at få vist dit butiksnavn, en tilpasset knap og et tilpasset billede i en mailbesked.

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

    Er du klar til at begynde at sælge med Shopify?

    Prøv det gratis