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

ขยายธุรกิจของคุณให้เติบโต

หากคุณต้องการความช่วยเหลือในการสร้างโค้ดแบบกำหนดเองสำหรับข้อความ Shopify Email ของคุณ คุณสามารถจ้างผู้เชี่ยวชาญของ Shopify ได้

การเพิ่มส่วน 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>