การเพิ่ม 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 ได้

ตัวแปร Liquid ที่รองรับเทมเพลตอีเมลทั้งหมด

เมื่อใช้ Liquid คุณจะสามารถใช้ตัวแปรต่อไปนี้เพื่อปรับแต่งข้อความใดๆ ก็ได้ใน Shopify Email

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

    คุณสามารถใช้ตัวแปรต่อไปนี้เพื่อปรับแต่งข้อความขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นใน Shopify Email ด้วย Liquid ได้

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

    คำอธิบายของตัวแปร Liquid ที่รองรับ Shopify Email สำหรับการเรียกดู ตะกร้าสินค้า และการชำระเงินที่ยังไม่เสร็จสิ้น
    ตัวแปร คำอธิบาย
    abandoned_checkout.*

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

    • url แสดง URL ของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
    • line_items แสดงสินค้าเฉพาะรายการ 5 รายการแรกของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นนอกจากนี้ line_items แต่ละอ็อบเจกต์ยังมีคุณสมบัติเกี่ยวกับสินค้าแต่ละรายการดังต่อไปนี้
      • image_url
      • product_title
      • variant_title
      • quantity
    • remaining_products_count แสดงจำนวนสินค้าเฉพาะรายการที่เหลืออยู่ หากมีสินค้าเฉพาะรายการในขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นมากกว่า 5 รายการ
    id
    (checkout ID)
    ID เฉพาะของขั้นตอนการชำระเงินเพื่อการใช้งานภายใน
    shop
    ชื่อร้านค้า Shopify ของคุณ
    name
    ชื่อขขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น หรือที่เรียกว่าหมายเลขการขั้นตอนการชำระเงิน
    total_price
    ราคารวมของคำสั่งซื้อ (ยอดรวม + ค่าจัดส่ง - ส่วนลดค่าจัดส่ง + ภาษี)
    shipping_price

    ราคาค่าจัดส่ง

    ตัวอย่าง {{ shipping_price | money }}

    shipping_address
    ที่อยู่ที่จัดส่ง
    billing_address
    ที่อยู่สำหรับเรียกเก็บเงิน
    line_items
    รายการสินค้าเฉพาะรายการทั้งหมดในขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
    unavailable_line_items
    รายการสินค้าเฉพาะรายการทั้งหมดในขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นยังไม่พร้อมให้บริการ
    note
    หมายเหตุที่แนบมากับขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
    landing_site

    เส้นทางของเว็บไซต์แลนดิ้งเพจที่ลูกค้าใช้ ซึ่งเป็นหน้าแรกที่ลูกค้าเข้าถึงเมื่อพวกเขามาถึงร้านค้า

    ตัวอย่างเช่น /products/great-product?ref=my-tracking-token

    landing_site_ref

    แยกพารามิเตอร์อ้างอิงจากเว็บไซต์แลนดิ้งเพจ พารามิเตอร์อ้างอิงอาจเป็น: ref, source, r

    หากค่าของ landing_site เป็น /products/great-product?ref=my-tracking-token ค่าของ landing_site_ref ก็จะเป็น my-tracking-token คุณสามารถดำเนินการบางอย่างได้ หากพารามิเตอร์การอ้างอิงของคุณมีค่าเท่ากับที่กำหนด:

    {% if landing_site_ref == 'my-tracking-token' %} การดำเนินการของฉ้ัน... {% endif %}
    referring_site

    URL ของช่องทางอ้างอิงที่นำลูกค้ารายดังกล่าวให้มาเยี่ยมชมร้านค้าของคุณ

    ตัวอย่างเช่น: https://www.google.com/?s=great+products

    created_at

    วันและเวลาที่ลูกค้าได้สร้างขั้นตอนการชำระเงินที่พวกเขาไม่ได้ดำเนินการให้เสร็จสิ้น

    closed_at

    วันที่และเวลาที่ปิดขั้นตอนการชำระเงิน

    customer_locale
    รหัสภาษาสองหรือสามตัวอักษรของภาษาท้องถิ่นของลูกค้า โดยอาจตามด้วยรหัสภูมิภาคหรือไม่ก็ได้ ตัวอย่างเช่น
    th
    ,
    en-CA
    item_count
    ผลรวมของจำนวนสินค้าทั้งหมด
    unique_gateways
    รายการผู้ให้บริการการชำระเงินที่ไม่ซ้ำกันที่มีให้ใช้งานในขั้นตอนการชำระเงิน
    discount
    ส่วนลดที่ใช้กับตะกร้าสินค้าหรือสินค้าเฉพาะรายการในขั้นตอนขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
    discounts
    รายการส่วนลดที่ใช้กับขั้นตอนการชำระเงิน
    successfully_applied_discounts
    ส่วนลดที่ใช้กับขั้นตอนการชำระเงินเรียบร้อยแล้ว
    discounts_amount

    จำนวนเงินรวมของส่วนลดเมื่อใช้ส่วนลดทั้งหมด

    ตัวอย่าง: +$5.00

    discounts_savings

    จำนวนเงินรวมที่ประหยัดได้เมื่อใช้ส่วนลดทั้งหมด

    ตัวอย่างเช่น:-$5.00

    buyer_accepts_marketing
    การคืนสินค้า
    จริง
    หรือ
    เท็จ
    ทั้งนี้ขึ้นอยู่กับว่าลูกค้ายอมรับการตลาดระหว่างขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นหรือไม่
    subtotal_line_items
    สินค้าเฉพาะรายการที่ใช้ในการคํานวณราคารวมในขั้นตอนการชำระเงิน โดยไม่รวมทิปของสินค้าเฉพาะรายการใดๆ
    requires_shipping
    การคืนสินค้า
    จริง
    หากมีสินค้าอย่างน้อยหนึ่งรายการในขั้นตอนการชำระเงินที่ต้องจัดส่ง
    subtotal_price
    ราคารวมของสินค้าเฉพาะรายการในขั้นตอนการชำระเงิน
    email
    อีเมลที่เชื่อมโยงกับขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
    shop_name
    ชื่อร้านค้าของคุณ
    tax_lines

    ระบบจะแบ่งภาษีตามประเภทของภาษี:

    {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency }} {% endfor %}
    tax_price
    ภาษีรวมของสินค้าทั้งหมดในขั้นตอนการชำระเงิน
    attributes

    ลักษณะที่แนบมากับขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น

    ตัวอย่าง {{ attributes.gift-note }}

    shipping_method
    ข้อมูลเกี่ยวกับวิธีจัดส่งวิธีแรกที่มีให้ใช้งานในขั้นตอนการชำระเงิน
    shipping_methods
    วิธีการจัดส่งมีให้บริการในขั้นตอนการชำระเงิน
    free
    การคืนสินค้า
    จริง หากราคารวมของหน้าการชำระเงินเป็นศูนย์
    free_shipping
    การคืนสินค้า
    จริง
    หากขั้นตอนการชำระเงินไม่ต้องมีการจัดส่ง หรือหากราคาค่าจัดส่งเป็นศูนย์
    different_billing_address
    การคืนสินค้า
    จริง
    หรือ
    เท็จ
    โดยขึ้นอยู่กับว่าที่อยู่ที่จัดส่งเป็นที่อยู่เดียวกันกับที่อยู่สำหรับเรียกเก็บเงินหรือไม่
    customer
    อ็อบเจกต์ customer จะมีมีแอตทริบิวต์ของเอาต์พุต customer
    gift_cards
    บัตรของขวัญที่ใช้กับขั้นตอนการการชำระเงิน
    gift_cards_amount
    จํานวนราคาในขั้นตอนการชําระเงินที่จะชําระด้วยบัตรของขวัญ
    transactions
    ธุรกรรมของขั้นตอนการชำระเงิน
    shareable_url
    URL ของสินค้าชิ้นแรกในสินค้าเฉพาะรายการ
    shareable_title
    ชื่อสินค้าของสินค้าเฉพาะรายการชิ้นแรก
    total_tip
    ยอดรวมทิปที่ลูกค้าเพิ่มในขั้นตอนการชำระเงิน
    discount_applications
    อธิบายว่าเหตุผลและวิธีลดราคาสินค้าในขั้นตอนการชำระเงิน
    cart_level_discount_applications
    การใช้ส่วนลดเฉพาะตะกร้าสินค้าของตะกร้าสินค้า
    currency
    สกุลเงินที่ใช้ในขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
    line_items_subtotal_price
    ผลรวมของราคาของสินค้าเฉพาะรายการทั้งหมดของขั้นตอนการชำระเงินหลังจากมีการใช้ส่วนลดสินค้าเฉพาะรายการแล้ว

    ตัวแปร Liquid สำหรับการเรียกดูที่ถูกละทิ้งและอีเมลตะกร้าสินค้าที่ยังไม่ชำระเงิน

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

    คำอธิบายตัวแปร Liquid ที่ Shopify Email รองรับ
    ตัวแปร คำอธิบาย
    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
      • image_alt_text
    • remaining_cart_products_count แสดงจำนวนสินค้าเฉพาะรายการที่เหลืออยู่ หากมีสินค้าเฉพาะรายการในขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นมากกว่า 5 รายการ

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

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

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