Dodawanie niestandardowej sekcji Liquid do Shopify Email

Dodanie niestandardowej sekcji Liquid umożliwia wprowadzanie niestandardowego Liquid lub HTML do wiadomości Shopify Email.

Liquid to prosty i łatwy w użyciu język programowania Shopify, ten sam, którego używa się do tworzenia szablonów dostępnych w Sklepie z szablonami Shopify.

Możesz użyć niestandardowej sekcji Liquid do wyświetlenia niestandardowych zasobów, takich jak obrazy ułożone obok siebie, niestandardowe przyciski, obrazy o niestandardowym rozmiarze i niestandardowe rozmiary sekcji.

Uwagi

Przed dodaniem niestandardowego Liquid do wiadomości Shopify Email zapoznaj się z poniższymi uwagami.

  • Zmienne, które zawierasz w kodzie, muszą być obsługiwane przez niestandardową sekcję Liquid.
  • Wielkość wprowadzonego kodu nie może przekraczać 50 MB.
  • Niestandardową sekcję Liquid można utworzyć wyłącznie za pomocą komputera stacjonarnego.

Zmienne Liquid obsługiwane w niestandardowej sekcji Liquid

W celu dostosowania swoich wiadomości Shopify Email w niestandardowej sekcji Liquid możesz użyć poniższych zmiennych.

Opis zmiennych Liquid obsługiwanych przez Shopify Email
Zmienna Opis
abandoned_checkout

Ta zmienna zapewnia dostęp do następujących właściwości przerwanej realizacji zakupu:

  • url wyświetla adres URL przerwanej realizacji zakupu.
  • line_items wyświetla pierwsze pięć pozycji pojedynczych przerwanej realizacji zakupu. Ponadto każdy obiekt line_items zawiera następujące właściwości każdego produktu:
    • product_title
    • variant_title
    • quantity
  • remaining_products_count przedstawia liczbę pozostałych pozycji pojedynczych, jeśli przerwana realizacja zakupu dotyczyła więcej niż pięciu pozycji.
  • Zmienna abandoned_checkout wstawia dane tylko wtedy, gdy e-mail jest częścią automatyzacji marketingowej przerwanej realizacji zakupu. W przeciwnym razie zmienna będzie miała wartość null.

abandoned_visit

Ta zmienna zapewnia dostęp do następujących właściwości porzuconego koszyka lub przerwanego przeglądania:

  • url wyświetla adres URL przerwanej realizacji zakupu.
  • products_added_to_cart wyświetla pierwsze pięć pozycji pojedynczych produktu dodanych do koszyka, który został porzucony. Ponadto każdy obiekt products_added_to_cart zawiera następujące właściwości każdego produktu:
    • title
    • image_url
    • variant_title
    • quantity
  • products_viewed wyświetla pierwsze pięć produktów wyświetlonych podczas wizyty, która została przerwana. Ponadto każdy obiekt products_viewed zawiera następujące właściwości każdego produktu:
    • title
    • opis
    • image_url
    • url
  • remaining_cart_products_count przedstawia liczbę pozostałych pozycji pojedynczych, jeśli przerwana realizacja zakupu dotyczyła więcej niż pięciu pozycji.
  • Zmienna abandoned_visit wstawia dane tylko wtedy, gdy e-mail jest częścią automatyzacji marketingu porzuconego koszyka lub przerwanego przeglądania produktów. W przeciwnym razie zmienna będzie miała wartość null.

data.customer.*

Ta zmienna zapewnia dostęp do następujących właściwości danych klienta:

  • first_name
  • last_name
  • email
  • city
  • state
  • kraj
  • Tych właściwości nie można stosować w filtrach Liquid ani warunkach Liquid.

    email.*

    Ta zmienna zapewnia dostęp do następujących właściwości e-maila:

  • subject wyświetla wiersz tematu e-maila.
  • preview_text wyświetla podgląd tekstu e-maila.
  • shop.*
    Zmienna ta daje dostęp do następujących właściwości sklepu:
  • name wyświetla nazwę sklepu.
  • domain wyświetla domenę podstawową sklepu.
  • url wyświetla adres URL sklepu.
  • shopify_domain wyświetla domenę Shopify sklepu.
    • address wyświetla adres sklepu z widocznymi następującymi właściwościami adresu:
      • address1
      • address2
      • city
      • kraj
      • telefon
      • province
      • pocztowy
      • branding wyświetla branding sklepu obejmujący następujące właściwości:
        • 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, które jest renderowane bezpośrednio jako tag img.

    Przykład niestandardowego kodu Liquid

    Po dodaniu niestandardowej sekcji Liquid do szablonu e-maila możesz dodać swój niestandardowy kod Liquid lub HTML w edytorze kodu.

    Poniższy przykładowy kod umożliwia dodanie kodu Liquid w celu wyświetlenia nazwy sklepu, niestandardowego przycisku i obrazu o niestandardowym rozmiarze w wiadomości e-mail.

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

    Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

    Wypróbuj za darmo