การเพิ่ม Liquid แบบกำหนดเองไปยังแคมเปญ Shopify Email

หน้านี้พิมพ์ขึ้นเมื่อ Dec 09, 2023 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/promoting-marketing/create-marketing/shopify-email/create-email/custom-liquid

คุณสามารถเพิ่มการเขียนโค้ดแบบกำหนดเองไปยังข้อความใน 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 ได้

คำอธิบายตัวแปร Liquid ที่ Shopify Email รองรับ
ตัวแปร คำอธิบาย 
unsubscribe_link
 ตัวแปรนี้จะให้สิทธิ์การเข้าถึงลิงก์เพื่อยกเลิกการสมัครรับข้อมูลจำเป็นต้องมีตัวแปรนี้หากคุณสร้างอีเมลที่ใช้โค้ดแบบกำหนดเอง 
open_tracking
 ตัวแปรนี้จะให้สิทธิ์การเข้าถึงบล็อกการติดตามการเปิดอ่านที่มีการจัดรูปแบบล่วงหน้า จำเป็นต้องมีตัวแปรนี้หากคุณสร้างอีเมลที่ใช้โค้ดแบบกำหนดเองและได้เปิดใช้งานการติดตามการเปิดอ่าน 
abandoned_checkout

ตัวแปรนี้ให้สิทธิ์การเข้าถึงคุณสมบัติของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นต่อไปนี้

  • url แสดง URL ของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
  • line_items แสดงสินค้าเฉพาะรายการ 5 รายการแรกของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นนอกจากนี้ line_items แต่ละอ็อบเจกต์ยังมีคุณสมบัติเกี่ยวกับสินค้าแต่ละรายการดังต่อไปนี้
    • image_url
    • product_title
    • variant_title
    • quantity
  • remaining_products_count แสดงจำนวนสินค้าเฉพาะรายการที่เหลืออยู่ หากมีสินค้าเฉพาะรายการในขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นมากกว่า 5 รายการ

    • ตัวแปร abandoned_checkout จะป้อนเฉพาะเมื่ออีเมลเป็นส่วนหนึ่งของการดำเนินการอัตโนมัติด้านการตลาดสำหรับขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นเท่านั้นมิฉะนั้นตัวแปรจะเป็น null

 
abandoned_visit

ตัวแปรนี้ให้สิทธิ์การเข้าถึงคุณสมบัติของตะกร้าสินค้าที่ยังไม่ชำระเงินหรือการสำรวจเลือกดูต่อไปนี้

  • url แสดง URL ของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
  • products_added_to_cart แสดงสินค้าเฉพาะรายการ 5 รายการแรกที่เพิ่มลงในตะกร้าสินค้าของการเข้าชมที่ถูกละทิ้งนอกจากนี้ products_added_to_cart แต่ละอ็อบเจกต์ยังมีคุณสมบัติเกี่ยวกับสินค้าแต่ละรายการดังต่อไปนี้
    • title
    • image_url
    • variant_title
    • quantity
  • products_viewed แสดงสินค้า 5 รายการแรกที่ดูระหว่างการเข้าชมที่ถูกละทิ้งนอกจากนี้ products_viewed แต่ละอ็อบเจกต์ยังมีคุณสมบัติเกี่ยวกับสินค้าแต่ละรายการดังต่อไปนี้
    • title
    • คำอธิบาย
    • image_url
    • url
  • remaining_cart_products_count แสดงจำนวนสินค้าเฉพาะรายการที่เหลืออยู่ หากมีสินค้าเฉพาะรายการในขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นมากกว่า 5 รายการ

    • ตัวแปร abandoned_visit จะป้อนเมื่ออีเมลเป็นส่วนหนึ่งของการดำเนินการอัตโนมัติด้านการตลาดสำหรับการสำรวจดูสินค้าที่ถูกละทิ้งหรือตะกร้าสินค้าที่ยังไม่ชำระเงินเท่านั้น มิฉะนั้นตัวแปรจะเป็น null 

data.customer.*

ตัวแปรนี้จะให้สิทธิ์การเข้าถึงคุณสมบัติของข้อมูลลูกค้าต่อไปนี้

  • first_name
  • last_name
  • email
  • city
  • สถานะ
  • ประเทศ

    • ไม่สามารถใช้คุณสมบัติเหล่านี้ภายในตัวกรอง Liquid หรือ เงื่อนไข Liquid ได้ 

    email.*

    ตัวแปรนี้จะให้สิทธิ์การเข้าถึงคุณสมบัติของอีเมลต่อไปนี้

  • subject แสดงบรรทัดหัวเรื่องของอีเมล
  • preview_text แสดงข้อความตัวอย่างของอีเมล
    		•  
    shop.*
    		 ตัวแปรนี้จะให้สิทธิ์การเข้าถึงคุณสมบัติของร้านค้าต่อไปนี้
  • name แสดงชื่อร้านค้า
  • domain แสดงโดเมนหลักของร้านค้า
  • url แสดง URL ร้านค้า
  • shopify_domain แสดงโดเมน Shopify
    • address แสดงที่อยู่ร้านค้าซึ่งจะเปิดเผยคุณสมบัติของที่อยู่ดังต่อไปนี้
      • address1
      • address2
      • city
      • ประเทศ
      • โทรศัพท์
      • province
      • รหัสไปรษณีย์
      • branding แสดงการสร้างแบรนด์ของร้านค้า ซึ่งรวมถึงคุณสมบัติดังต่อไปนี้
        • 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 ซึ่งจะแสดงเป็นแท็ก img โดยตรง

    การใช้ตัวแปรที่จำเป็น

    เมื่อคุณสร้างอีเมล 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>

    พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

    ทดลองใช้งานฟรี