Dodawanie niestandardowej sekcji Liquid do Shopify Email

Rozwijaj swój biznes

Jeśli potrzebujesz pomocy w utworzeniu niestandardowego kodu dla wiadomości Shopify Email, możesz zatrudnić eksperta Shopify.

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>