Dodawanie niestandardowego kodu Liquid do kampanii Shopify Email
Możesz dodać niestandardowe kodowanie do wiadomości Shopify Email, dodając niestandardową sekcję Liquid lub tworząc wiadomość e-mail z całkowicie niestandardowym kodem. Te opcje umożliwiają wprowadzenie niestandardowego kodu Liquid lub HTML.
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ć niestandardowego kodu 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.
Na tej stronie
Uwagi
Przed dodaniem niestandardowego kodu Liquid do wiadomości Shopify Email zapoznaj się z poniższymi informacjami:
- Zmienne, które zawierasz w kodzie, muszą być obsługiwane przez niestandardowy kod Liquid.
- Niestandardową sekcję Liquid można utworzyć wyłącznie za pomocą komputera stacjonarnego.
- Zmienna
unsubscribe_link
jest wymagana w niestandardowych e-mailach Liquid. Jeśli aktywowano śledzenie otwarć, wymagana jest również zmiennaopen_tracking
. Dowiedz się więcej o dodawaniu wymaganych zmiennych do swojego e-maila. - Wprowadzany kod ma następujące limity:
- Maksymalnie 50 kilobajtów (KB) dla niestandardowych sekcji Liquid.
- Maksymalnie 500 KB dla e-maili z niestandardowym kodem Liquid.
Zmienne Liquid obsługiwane w niestandardowych Liquid
Możesz użyć poniższych zmiennych, aby dostosować swoje wiadomości e-mail Shopify za pomocą kodu Liquid.
Zmienna | Opis |
---|---|
unsubscribe_link |
Ta zmienna zapewnia dostęp do linku do anulowania subskrypcji. Ta zmienna jest wymagana, jeśli tworzysz e-maila z niestandardowym kodem. |
open_tracking |
Ta zmienna zapewnia dostęp do wstępnie sformatowanego bloku śledzenia otwarć. Ta zmienna jest wymagana, jeśli tworzysz e-maila z niestandardowym kodem przy włączonej opcji śledzenia otwarć. | abandoned_checkout |
Ta zmienna zapewnia dostęp do następujących właściwości przerwanej realizacji zakupu:
Zmienna |
abandoned_visit |
Ta zmienna zapewnia dostęp do następujących właściwości porzuconego koszyka lub przerwanego przeglądania:
Zmienna |
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.
|
Użycie wymaganych zmiennych
Po utworzeniu niestandardowego e-maila Liquid wymagana jest zmienna unsubscribe_link
. Jeśli aktywowano śledzenie otwarć, wymagana jest również zmienna open_tracking
.
Mimo że te zmienne można wstawić w dowolnym miejscu w kodzie dla e-maila, najczęściej dodaje się je w sekcji stopki e-maila, tak jak na poniższym przykładzie:
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
Przykład niestandardowego kodu Liquid
Możesz dodać niestandardowy Liquid i 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>
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>