Liquid

นิยาม

Liquid คือภาษาเทมเพลต (template language) แบบโอเพนซอร์สที่ Shopify สร้างขึ้นตั้งแต่ปี 2006 และปล่อยให้ใช้งานฟรี ปัจจุบันถูกใช้เป็นเครื่องยนต์หลักในการเรนเดอร์หน้าเว็บร้านค้าบน Shopify ทุกแห่ง รวมถึงแพลตฟอร์มอื่นอย่าง Jekyll, Salesforce Commerce Cloud และ Zendesk

พูดง่าย ๆ — Liquid คือ "กาว" ที่เชื่อมระหว่างข้อมูลสินค้าจริงในฐานข้อมูล Shopify กับหน้าเว็บที่ลูกค้าเห็น เมื่อมีคนเข้าเว็บร้านคุณ Shopify จะดึงข้อมูลจาก database แล้วให้ Liquid ประกอบร่างออกมาเป็น HTML สดใหม่ทุกครั้งที่โหลด

Liquid ไม่ใช่ภาษาโปรแกรมเต็มรูปแบบ — มันเป็น markup language ที่ตั้งใจออกแบบให้ปลอดภัย เจ้าของร้านแก้ไขเทมเพลตได้โดยไม่ต้องกลัวว่าลูกค้าจะรันโค้ดอันตรายบนเซิร์ฟเวอร์ Shopify

— เข้าใจ Liquid ผ่านร้านอาหาร

ลองนึกภาพร้านอาหารญี่ปุ่นที่คุณไปนั่งกินบ่อย ๆ

- ข้อมูลสินค้า (ชื่อสินค้า ราคา สต็อก รูป) = วัตถุดิบในตู้เย็นหลังร้าน

- Liquid = พ่อครัวที่หยิบวัตถุดิบมาประกอบเป็นจาน

- เทมเพลต (.liquid file) = สูตรอาหารที่บอกว่าจานนี้ต้องใส่อะไรบ้าง

- หน้าเว็บที่ลูกค้าเห็น = จานอาหารที่เสิร์ฟถึงโต๊ะ

ถ้าคุณเปลี่ยนราคาสินค้าใน Shopify Admin พ่อครัว (Liquid) จะทำจานใหม่ทันที ไม่ต้องแก้สูตรอาหารเลย นี่คือความต่างหลักจากเว็บ static ที่ต้อง rebuild ทั้งเว็บทุกครั้งที่แก้ข้อมูล

สูตรและโครงสร้างพื้นฐาน

Liquid ทำงานผ่าน 2 องค์ประกอบหลัก:

1. Output — แสดงค่าออกหน้าเว็บ

{{ product.title }}
{{ product.price | money }}

2. Tag — ควบคุม logic

{% if product.available %}
 <button>เพิ่มลงตะกร้า</button>
{% else %}
 <button disabled>สินค้าหมด</button>
{% endif %}

3. Filter — แปลงค่าด้วยเครื่องหมาย pipe |

{{ 1990 | divided_by: 100 | money }} → ฿19.90
{{ product.tags | join: ", " }}
{{ "hello" | upcase }} → HELLO

ตัวอย่างการคำนวณส่วนลด (%)

{% assign discount = product.compare_at_price | minus: product.price %}
{% assign percent = discount | times: 100 | divided_by: product.compare_at_price %}
ลด {{ percent }}%

Loop กับ Collection

{% for product in collection.products limit: 12 %}
 <div class="card">{{ product.title }} — {{ product.price | money }}</div>
{% endfor %}

Liquid ไม่รองรับการเขียนฟังก์ชันเอง ไม่มี while loop ไม่มี variable ที่เปลี่ยนค่าแบบ mutable ภายใน for loop เดียวกัน (มี workaround ผ่าน increment/decrement แต่จำกัด)

ตารางเปรียบเทียบ Liquid กับภาษาที่ใกล้เคียง

หมายเหตุ: Liquid เวอร์ชันปัจจุบันของ Shopify รองรับ tag {% liquid %} สำหรับเขียนหลายบรรทัดโดยไม่ต้องใส่ {% %} ทุกบรรทัด

— ใช้จริงในร้าน DTC ไทย

1. แสดงราคาแบบมีตัวคั่นหลักพันตาม locale ไทย

{{ product.price | money_with_currency }} → ฿1,990.00 THB

2. Badge "สินค้าใหม่" อัตโนมัติจาก tag

{% if product.tags contains "new" %}
 <span class="badge-new">ใหม่</span>
{% endif %}

3. Free shipping threshold — ตัวอย่างข้อมูลจริง

- ค่าขนส่งมาตรฐาน Kerry: 50 บาท

- ยอดขั้นต่ำส่งฟรี: 800 บาท

{% assign shipping_threshold = 800 %}
{% if cart.total_price >= shipping_threshold %}
 <p>🎉 คุณได้สิทธิ์ส่งฟรี!</p>
{% else %}
 {% assign diff = shipping_threshold | minus: cart.total_price %}
 <p>ซื้ออีก {{ diff | money }} เพื่อส่งฟรี</p>
{% endif %}

4. Countdown Flash Sale

{% assign now = "now" | date: "%s" | plus: 0 %}
{% assign end = section.settings.sale_end | date: "%s" | plus: 0 %}
{% assign remain = end | minus: now %}
{% if remain > 0 %}
 <p>เหลืออีก {{ remain | divided_by: 3600 }} ชั่วโมง</p>
{% endif %}

5. Cross-sell "ซื้อคู่กันบ่อย"

{% for item in product.metafields.custom.bundle_products.value %}
 {{ item.title }} — {{ item.price | money }}
{% endfor %}

6. Personalization ตาม tag ลูกค้า (ผ่าน customer object)

- ลูกค้า VIP tag → แสดงส่วนลดพิเศษ 10%

- ลูกค้าใหม่ → แสดงโค้ดต้อนรับ 50 บาท

ตัวเลขจริงที่ควรรู้:

- Shopify theme ปัจจุบัน (Dawn) มีไฟล์ .liquid ประมาณ 80+ ไฟล์

- หน้า product page หนึ่งหน้าใช้ Liquid render โดยเฉลี่ย 15–30 ms บน CDN Shopify

- ร้านที่ใช้ Section Rendering API + Liquid ลดเวลา TTFB ได้ 40–60% เทียบกับ full page reload

##

❌ 1: "เขียน JavaScript ใน Liquid ได้เลย"

Liquid รันบน server ก่อนที่ browser จะเห็น HTML ถ้าคุณเขียน <script> ในไฟล์ .liquid โค้ด JS นั้นจะถูกส่งไปรันฝั่ง client อยู่ดี ไม่ใช่ Liquid

❌ 2: "ใช้ Liquid query database ได้"

Liquid เข้าถึงได้เฉพาะ object ที่ Shopify เปิดให้ (product, collection, cart, customer, shop, metafield ฯลฯ) ถ้าต้องการข้อมูลอื่นต้องใช้ Storefront API หรือ Admin API

❌ 3: "ตัวแปรใน Liquid เปลี่ยนค่าได้"

{% assign x = 1 %}
{% assign x = x | plus: 1 %} ✅ ได้
{% for i in (1..3) %}{% assign x = x | plus: 1 %}{% endfor %} ⚠️ ค่า x ยังเป็น 2

Liquid ไม่รองรับ mutable variable ใน scope ของ loop — ต้องใช้ increment แทน

❌ 4: "ลบ whitespace ด้วย {%- -%} ไม่สำคัญ"

สำคัญมาก โดยเฉพาะใน loop ที่วน 50+ ครั้ง whitespace เกินสามารถเพิ่มขนาด HTML ได้ 10–30 KB ต่อหน้า

❌ 5: "ทุกอย่างทำใน Liquid ได้"

งานที่ควรใช้ JS: filter สินค้าแบบ real-time, cart drawer, currency switcher หลายสกุล, search autocomplete — Liquid ทำได้แต่ช้าและเปลือง server render

❌ 6: "ก็อปเทมเพลตจาก Theme Store มาใช้ได้เลย"

Theme Store บังคับให้ใช้ Liquid เวอร์ชันที่ Shopify กำหนด ถ้า theme เก่าใช้ tag ที่ deprecated (เช่น {% include %}) จะพังเมื่อ Shopify อัปเดต — ปัจจุบันแนะนำ {% render %} เท่านั้น

ที่เกี่ยวข้อง

- Section — บล็อกเนื้อหาที่ merchant ลากวางใน Theme Editor ได้ แต่ละ section คือไฟล์ .liquid + schema JSON

- Snippet — ไฟล์ .liquid ย่อยที่เรียกใช้ซ้ำผ่าน {% render 'snippet-name' %}

- Schema — JSON block ใน section กำหนด setting ที่โชว์ใน Customizer

- Metafield — ฟิลด์ข้อมูลเสริมที่ผูกกับ product/collection/customer ใช้เก็บข้อมูล custom

- Object — ตัวแปรที่ Shopify ให้มา เช่น product, cart, shop

- Filter — ฟังก์ชันแปลงค่าใน Liquid (money, date, img_url, t)

- Tag — คำสั่ง logic (if, for, assign, case, capture)

- Storefront API — GraphQL API สำหรับดึงข้อมูล Shopify ไปใช้ใน headless setup

- Theme Check — เครื่องมือ lint ตรวจ syntax Liquid ก่อน deploy

- Section Rendering API — endpoint ให้ JS ขอ render เฉพาะ section กลับมาเป็น HTML

สรุปสั้น ๆ: Liquid คือภาษากลางระหว่างข้อมูลร้านคุณกับหน้าจอลูกค้า เรียน 1–2 สัปดาห์ก็เขียนเทมเพลตเองได้ แต่ถ้าอยากทำ headless commerce หรือ custom feature ลึก ๆ ต้องต่อกับ Storefront API เพิ่ม เพราะ Liquid อย่างเดียวไปไม่ถึง