การเพิ่มส่วน Liquid แบบปรับแต่งเองใน Shopify Email

การเพิ่มส่วน Liquid แบบปรับแต่งเองช่วยให้คุณสามารถป้อน Liquid หรือ HTML แบบปรับแต่งเองลงในข้อความ Shopify Email ของคุณได้

Liquid คือภาษาเขียนโปรแกรมของ Shopify ที่ใช้งานง่ายและเป็นภาษาเดียวกันกับที่ร้านค้าธีมของ Shopify ใช้สร้างธีม

คุณสามารถใช้ส่วน Liquid แบบปรับแต่งเองเพื่อแสดงองค์ประกอบแบบปรับแต่งเองได้ เช่น รูปภาพแบบข้างกัน ปุ่มแบบปรับแต่งเอง รูปภาพที่ปรับแต่งขนาดเอง และขนาดส่วนแบบปรับแต่งเอง

ข้อพิจารณา

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

  • ตัวแปรที่ใส่ในโค้ดของคุณต้องเป็นตัวแปรที่ส่วน Liquid แบบปรับแต่งเองรองรับ
  • โค้ดที่คุณป้อนต้องมีขนาดไม่เกิน 50 KB
  • คุณสามารถใช้อุปกรณ์เดสก์ท็อปสร้างส่วน Liquid แบบปรับแต่งเองได้เท่านั้น

ตัวแปร Liquid ที่รองรับในส่วน Liquid แบบปรับแต่งเอง

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

คำอธิบายตัวแปร Liquid ที่ Shopify Email รองรับ
ตัวแปร คำอธิบาย
abandoned_checkout

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

  • url แสดง URL ของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้น
  • line_items แสดงสินค้าเฉพาะรายการ 5 รายการแรกของขั้นตอนการชำระเงินที่ยังไม่เสร็จสิ้นนอกจากนี้ line_items แต่ละออบเจ็กต์ยังมีคุณสมบัติเกี่ยวกับสินค้าแต่ละรายการดังต่อไปนี้
    • 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 แบบปรับแต่งเอง

    หลังจากที่คุณเพิ่มส่วน Liquid แบบปรับแต่งเองไปยังเทมเพลตอีเมลของคุณแล้ว คุณสามารถเพิ่ม Liquid หรือ HTML ที่คุณปรับแต่งเองในเครื่องมือแก้ไขโค้ดได้

    โค้ดต่อไปนี้คือตัวอย่างวิธีที่คุณสามารถเพิ่มโค้ด Liquid เพื่อแสดงปุ่มชื่อร้านค้า แบบปรับแต่งเอง และรูปภาพขนาดที่ปรับแต่งเองในข้อความอีเมลได้

    <style>
      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#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>

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

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