Shopify Email 캠페인에 사용자 지정 Liquid 추가
사용자 지정 Liquid 섹션을 추가하거나 완전히 사용자 지정 코딩된 이메일을 생성하여 Shopify Email 메시지에 사용자 지정 코딩을 추가할 수 있습니다. 이러한 옵션을 사용하면 사용자 지정 Liquid 또는 HTML을 입력 할 수 있습니다.
Liquid는 Shopify의 간단하고 사용하기 쉬운 프로그래밍 언어이며 Shopify 테마 스토어에서 테마 구축에 사용된 것과 동일한 프로그래밍 언어입니다.
사용자 지정 Liquid 섹션을 통해 병렬 이미지, 사용자 지정 버튼, 사용자 지정 크기 이미지, 사용자 지정 섹션 크기 등의 맞춤형 자산을 표시할 수 있습니다.
고려 사항
Shopify Email 메시지에 사용자 지정 Liquid를 추가하기 전에 다음 고려 사항을 검토하십시오.
- 코드에 포함되는 변수는 사용자 지정 Liquid에서 지원해야 합니다.
- 데스크톱 장치에서만 사용자 지정 Liquid 섹션을 생성할 수 있습니다.
- 사용자 Liquid 이메일에는
unsubscribe_link변수가 필요합니다. 확인 추적을 활성화한 경우open_tracking변수도 필요합니다. 이메일에 필수 변수를 추가하는 방법 자세히 알아보기. - 입력하는 코드에는 다음과 같은 제한 사항이 있습니다.
- 사용자 지정 Liquid 섹션의 경우 최대 50킬로바이트(KB)입니다.
- 사용자 지정 코딩 Liquid 이메일은 최대 500KB입니다.
사용자 지정 Liquid 주문에서 지원되는 Liquid 변수
다음 변수를 사용하여 Liquid로 Shopify 이메일 메시지를 사용자 지정할 수 있습니다.
| 변수 | 설명 |
|---|---|
unsubscribe_link |
이 변수는 구독 취소 링크에 대한 액세스 권한을 제공합니다. 사용자 지정 코딩 이메일을 생성하는 경우 이 변수가 필요합니다. |
open_tracking |
이 변수는 미리 형식이 지정된 열린 추적 블록에 액세스할 수 있습니다.사용자 지정 코딩 이메일을 생성하고 확인 추적을 활성화한 경우 이 변수가 필요합니다. | abandoned_checkout |
이 변수를 통해 다음과 같은 중단된 결제의 속성을 사용할 수 있습니다.
|
abandoned_visit |
이 변수를 통해 중단된 카트 또는 검색의 다음과 같은 속성을 사용할 수 있습니다.
|
data.customer.* |
이 변수를 통해 다음과 같은 고객 데이터 속성을 사용할 수 있습니다. first_name(이름)last_name(성)이메일city상태국가 |
email.* |
이 변수를 통해 다음과 같은 이메일 속성을 사용할 수 있습니다. subject는 이메일 제목 줄을 표시합니다.preview_text는 이메일의 미리 보기 텍스트를 표시합니다. |
shop.* |
이 변수를 통해 다음과 같은 상점 속성을 사용할 수 있습니다.
name은 상점 이름을 표시합니다.domain은 상점 기본 도메인을 표시합니다.url은 상점 URL을 표시합니다.shopify_domain은 상점 Shopify 도메인을 표시합니다.
|
필수 변수 사용
사용자 지정 Liquid 이메일을 생성할 때는 unsubscribe_link 변수가 필요합니다. 확인 추적을 활성화한 경우 open_tracking 변수도 필요합니다.
이 변수는 이메일 코드의 아무 곳에나 삽입할 수 있습니다. 이 변수를 추가하는 가장 일반적인 위치는 다음 예제에 나온 것처럼 이메일의 바닥글 섹션입니다.
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>사용자 지정 Liquid 코드 예
코드 편집기에 사용자 지정 Liquid 및 HTML을 입력할 수 있습니다. 다음 코드는 이메일 메시지에 스토어 이름, 사용자 지정 버튼 및 사용자 지정 크기 이미지를 표시할 수 있도록 Liquid 코드를 추가하는 방법의 예입니다.
<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>