การเพิ่ม Liquid แบบกำหนดเองไปยังแคมเปญ Shopify Email
คุณสามารถเพิ่มการเขียนโค้ดแบบกำหนดเองไปยังข้อความใน Shopify Email ได้โดยการเพิ่มส่วน Liquid แบบกำหนดเอง หรือโดยการสร้างอีเมลทั้งหมดด้วยโค้ดแบบกำหนดเอง ตัวเลือกเหล่านี้จะช่วยให้คุณป้อน Liquid หรือ HTML แบบกำหนดเองได้
Liquid คือภาษาโปรแกรมของ Shopify ที่ใช้งานง่ายและเป็นภาษาเดียวกันกับที่ร้านค้าธีมของ Shopify ใช้สร้างธีม
คุณสามารถใช้ Liquid แบบปรับแต่งเองเพื่อแสดงองค์ประกอบแบบปรับแต่งเองได้ เช่น รูปภาพแบบขนาบข้างกัน ปุ่มแบบปรับแต่งเอง รูปภาพที่ปรับแต่งขนาดเอง และขนาดส่วนแบบปรับแต่งเอง
ในหน้านี้
ข้อพิจารณา
ตรวจสอบข้อควรพิจารณาต่อไปนี้ก่อนที่คุณจะเริ่มเพิ่ม Liquid แบบปรับแต่งเองลงในข้อความ Shopify Email ของคุณ
- ตัวแปรที่ใส่ในโค้ดของคุณต้องเป็นตัวแปรที่ Liquid แบบปรับแต่งเองรองรับ
- คุณสามารถใช้อุปกรณ์เดสก์ท็อปสร้างส่วน Liquid แบบปรับแต่งเองได้เท่านั้น
- จำเป็นต้องมีตัวแปร
unsubscribe_link
ในอีเมล Liquid แบบปรับแต่งเอง หากคุณเปิดใช้งานการติดตามการเปิดอ่าน คุณจะต้องใช้ตัวแปรopen_tracking
ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มตัวแปรที่จำเป็นในอีเมล - โค้ดที่คุณป้อนมีข้อจํากัดดังต่อไปนี้:
- ส่วน Liquid แบบกำหนดเองมีขนาดได้สูงสุด 50 กิโลไบต์ (KB)
- อีเมลที่สร้างด้วยโค้ด Liquid แบบกำหนดเองมีขนาดได้สูงสุด 500 KB
ตัวแปร Liquid ที่ Liquid แบบกำหนดเองรองรับ
คุณสามารถใช้ตัวแปรต่อไปนี้เพื่อปรับแต่งข้อความใน Shopify Email ด้วย Liquid ได้
ตัวแปร | คำอธิบาย |
---|---|
unsubscribe_link |
ตัวแปรนี้จะให้สิทธิ์การเข้าถึงลิงก์เพื่อยกเลิกการสมัครรับข้อมูลจำเป็นต้องมีตัวแปรนี้หากคุณสร้างอีเมลที่ใช้โค้ดแบบกำหนดเอง |
open_tracking |
ตัวแปรนี้จะให้สิทธิ์การเข้าถึงบล็อกการติดตามการเปิดอ่านที่มีการจัดรูปแบบล่วงหน้า จำเป็นต้องมีตัวแปรนี้หากคุณสร้างอีเมลที่ใช้โค้ดแบบกำหนดเองและได้เปิดใช้งานการติดตามการเปิดอ่าน | abandoned_checkout |
ตัวแปรนี้ให้สิทธิ์การเข้าถึงคุณสมบัติของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นต่อไปนี้
ตัวแปร |
abandoned_visit |
ตัวแปรนี้ให้สิทธิ์การเข้าถึงคุณสมบัติของตะกร้าสินค้าที่ยังไม่ชำระเงินหรือการสำรวจเลือกดูต่อไปนี้
ตัวแปร |
data.customer.* |
ตัวแปรนี้จะให้สิทธิ์การเข้าถึงคุณสมบัติของข้อมูลลูกค้าต่อไปนี้ first_name last_name email city สถานะ ประเทศ ไม่สามารถใช้คุณสมบัติเหล่านี้ภายในตัวกรอง Liquid หรือ เงื่อนไข Liquid ได้ |
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>