Legge til en egendefinert Liquid-seksjon for Shopify Email

Ved å legge til en egendefinert Liquid-seksjon kan du legge inn egendefinert Liquid- eller HTML-kode i Shopify Email-meldinger.

Liquid er Shopifys enkle og brukervennlige programmeringsspråk, og er det samme programmeringsspråket som brukes for å bygge temaer fra Shopify Theme Store.

Du kan bruke seksjonen for egendefinert Liquid-kode til å vise egendefinerte ressurser som bilder side om side, tilpassede knapper samt bilder og seksjoner med egendefinerte størrelser.

Hensyn

Gå gjennom følgende vurderinger før du begynner å legge til egendefinert Liquid-kode i Shopify Email-meldinger.

Liquid-variabler som støttes i seksjonen for egendefinert Liquid

Du kan bruke følgende variabler til å tilpasse Shopify Email-meldinger i seksjonen for egendefinert Liquid-kode.

Beskrivelse av Shopify Email-støttede Liquid-variabler
Variabel Beskrivelse
abandoned_checkout

Denne variabelen gir tilgang til følgende egenskaper for en forlatt kasse:

  • url viser URL-adressen til den forlatte kassen.
  • line_items viser de fem første varelinjene i den forlatte kassen. I tillegg inneholder hvert line_items-objekt følgende egenskaper om hvert produkt:
    • product_title
    • variant_title
    • antall
  • remaining_products_count viser gjenstående antall varelinjer, hvis det er mer enn fem varelinjer i den forlatte kassen.
  • Variabelen abandoned_checkout fylles bare ut hvis en e-post er en del av en markedsføringsautomasjon for forlatt kasse. Ellers vil denne variabelen være null.

abandoned_visit

Denne variabelen gir tilgang til følgende egenskaper for en forlatt handlekurv eller et forlatt besøk:

  • url viser URL-adressen til den forlatte kassen.
  • products_added_to_cart viser de fem første produktvarelinjene som er lagt i handlekurven i det forlatte besøket. I tillegg inneholder hvert products_added_to_cart objekt følgende egenskaper for hvert produkt:
    • tittel
    • image_url
    • variant_title
    • antall
  • products_viewed viser de fem første produktene som ble vist under det forlatte besøket. I tillegg inneholder hvert products_viewed-objekt følgende egenskaper om hvert produkt:
    • tittel
    • beskrivelse
    • image_url
    • url
  • remaining_cart_products_count viser gjenstående antall varelinjer, hvis det er mer enn fem varelinjer i den forlatte kassen.
  • Variabelen abandoned_visit fylles bare ut hvis en e-post er en del av en markedsføringsautomasjon for forlatt handlekurv eller forlatt kikking på produkter. Ellers vil denne variabelen være null.

data.customer.*

Denne variabelen gir tilgang til følgende kundeopplysningsegenskaper:

  • first_name
  • last_name
  • e-post
  • city
  • state
  • land
  • Disse egenskapene kan ikke brukes i Liquid-filtre eller Liquid-betingelser.

    email.*

    Denne variabelen gir tilgang til følgende e-postegenskaper:

  • subject viser emnefeltet for e-postmeldingen.
  • preview_text viser forhåndsvisningsteksten for e-postmeldingen.
  • shop.*
    Denne variabelen gir tilgang til følgende butikkegenskaper:
  • name viser butikkens navn.
  • domain viser butikkens primære domene.
  • url viser butikkens URL-adresse.
  • shopify_domain viser butikkens Shopify-domene.
    • address viser butikkens adresse, som eksponerer følgende adresseegenskaper:
      • address1
      • address2
      • city
      • land
      • telefon
      • province
      • postnummer
      • branding viser butikkens merkevarebygging, som inkluderer følgende 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 gjengis som en img-tagg direkte.

    Eksempel på egendefinert Liquid-kode

    Når du har lagt til en seksjon for egendefinert Liquid-kode i e-postmalen kan du legge til egendefinert Liquid- eller HTML-kode i redigeringsprogrammet for kode.

    Følgende kode er et eksempel på hvordan du kan legge til Liquid-kode for å vise butikknavn, en tilpasset knapp og et bilde med egendefinert størrelse i en e-postmelding.

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

    Er du klar til å begynne å selge med Shopify?

    Prøv det gratis