Shopify เปิดธีมใหม่ด้วย AI ทำให้โค้ดสะอาดและอ่านง่ายสำหรับนักพัฒนา

การเปิดตัวธีมใหม่ของ Shopify ที่ออกแบบโดยอาศัยเทคโนโลยี AI เป็นสัญญาณสำคัญว่าแพลตฟอร์มอี‑คอมเมิร์ซกำลังพยายามทำให้โค้ดพื้นฐานกลับมาอ่านได้ง่ายและเป็นมิตรต่อผู้พัฒนา อีกทั้งยังตอบสนองต่อความต้องการของผู้ค้า (merchant) ที่ใช้บริการ Shopify Sidekick เพื่อปรับแต่งหน้าร้านอย่างอัตโนมัติ

Overview

ธีมใหม่ถูกนำเสนอในฟอรั่มนักพัฒนาว่าเป็นตัวแทนทดแทนของ “Horizon” ธีมฐานเดิมที่ขึ้นอยู่กับ JSON จำนวนมาก ผู้ใช้จะพบไฟล์เทมเพลตแบบข้อความธรรมดาที่เขียนด้วย HTML และภาษาการเทมเพลต Liquid ซึ่งออกแบบให้มนุษย์และเครื่องอ่านได้ง่ายยิ่งขึ้น

จากข้อมูลของบริษัท ธีมใหม่นี้มีบรรทัดโค้ดน้อยกว่า **93 % เมื่อเปรียบเทียบกับ Horizon ทำให้ขนาดไฟล์โดยรวมลดลงอย่างมาก นอกจากนี้ โครงสร้างใหม่ยังคงรักษา “forever API” ของธีม Liquid เก่าไว้เพื่อความเข้ากันได้ย้อนหลัง

Ben Sehl, ผู้จัดการผลิตภัณฑ์ด้าน storefronts ของ Shopify บน X ชี้ว่า “โมเดล AI ชั้นนำที่มีอยู่แล้วเข้าใจ HTML เป็นอย่างดี เนื่องจากเป็นรูปแบบที่แสดงออกได้ชัดเจน มีท้องถิ่นและใช้โทเค็นอย่างคุ้มค่า” คำพูดนี้สะท้อนถึงแนวคิดว่าการเลือกใช้ภาษา markup ที่เรียบง่ายจะช่วยให้ AI ทำงานได้มีประสิทธิภาพสูงสุด

Key Details

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

ผู้ใช้จะเห็น “บล็อกคอมโพเซเบิล” (composable block tag) ที่ประกอบด้วยพารามิเตอร์ย่อยหลายชั้น ซึ่งทำหน้าที่คล้ายกับ props ของ React แต่ไม่มีการสร้าง virtual DOM ทำให้กระบวนการเรนเดอร์เร็วขึ้นและโค้ดสั้นลง

อีกส่วนสำคัญคือ “partial primitive” ซึ่งอนุญาตให้อัปเดตเฉพาะส่วนของหน้าเว็บโดยไม่ต้องรีเรนเดอร์ทั้งหมด ทั้งนี้ยังมี standard actions ที่เป็นชุดทริกเกอร์เหตุการณ์ เช่น การอัปเดตรถเข็นสินค้า ซึ่งช่วยลดโค้ดการทำงานแบบตอบสนอง (reactivity) จำนวนหลายพันบรรทัดจาก Horizon

Technical Changes

ธีมใหม่ได้นำแนวคิด “declarative, settings‑driven architecture” มาใช้ ผู้พัฒนาต้องกำหนดค่าและโครงสร้างในระดับไฟล์เท่านั้น ไม่จำเป็นต้องคำนึงถึงจำนวนองค์ประกอบล่วงหน้า หากต้องการเพิ่มปุ่มเพิ่มเติมก็เพียงห่อด้วยแท็ก HTML `<div>` ธรรมดา

เพื่อให้สอดคล้องกับข้อกำหนดของ AI และผู้พัฒนา ทีมงานได้สร้าง “กฎ 20 ข้อ” เพื่อควบคุมสัญญา (contracts), โครงสร้าง, การตรวจสอบความถูกต้อง, ความซับซ้อน, ระดับการซ้อนกันและขนาดไฟล์ของธีมที่สร้างขึ้น

นอกจากนี้ Liquid ยังรองรับตรรกะขั้นสูงเช่น นิพจน์ Boolean, ตัวดำเนินการ infix พร้อมลำดับความสำคัญ, และอาเรย์หรืออ็อบเจ็กต์แบบ literal ทำให้ผู้ค้าและนักพัฒนาสามารถเขียนเงื่อนไขได้โดยไม่ต้องพึ่งภาษาที่เป็น DSL เฉพาะ

• Composable block tag – พารามิเตอร์ซ้อนหลายชั้น, คล้าย React props
• Partial primitive – อัปเดตส่วนเฉพาะของหน้าโดยไม่มีรีเรนเดอร์ทั้งหมด
• Standard actions – ชุดทริกเกอร์เหตุการณ์ (เช่น update cart)
• 20 new validation rules – ควบคุมสัญญา, ความซับซ้อนและขนาดไฟล์

AI Integration

การเปิดตัว Shopify Sidekick ทำให้ผู้ค้าประมาณ 20 % ของทั้งหมดเริ่มใช้งานเครื่องมือ AI เพื่อแก้ไขธีม โดยมีการทำ “edits” ถึง 25 ล้านครั้ง** ในปีนี้เพียงอย่างเดียว การใช้ AI ไม่ได้หมายความว่าต้องเขียนโค้ดใหม่ทุกครั้ง แต่เพียงแค่ระบุคุณสมบัติตามภาษาธรรมชาติ (เช่น “ตั้งพื้นหลังเป็นสีฟ้า”) แล้วระบบจะเปลี่ยนให้โดยอัตโนมัติ

เพื่อให้ Sidekick ทำงานได้อย่างราบรื่น ทีมพัฒนาต้องทำให้โครงสร้างของธีมใหม่อ่านง่ายและมีสัญญาชัดเจน ซึ่งตรงกับหลักการที่ AI ต้องการ: โค้ดที่เป็น “explicit contracts” และ “constructive feedback” การจัดเรียงใหม่นี้จึงไม่ได้เพียงเพื่อมนุษย์เท่านั้น แต่ยังเป็นการปรับตัวให้เข้ากับวิธีทำงานของโมเดลภาษา (LLM) ด้วย

Impact on Merchants and Developers

สำหรับผู้ค้า ธีมที่เน้น HTML + Liquid ทำให้สามารถดูและแก้ไขไฟล์เทมเพลตได้โดยตรง ไม่ต้องเผชิญกับ JSON ที่ซับซ้อน การทำความเข้าใจโค้ดพื้นฐานช่วยลดเวลาในการเรียนรู้และเพิ่มประสิทธิภาพการปรับแต่งหน้าร้าน

นักพัฒนายังได้รับประโยชน์จาก “forever API” ของธีมเดิมที่ยังคงใช้งานได้ ทำให้ไม่ต้องย้ายโปรเจกต์เก่าออกไป นอกจากนี้ การใช้บล็อกคอมโพเซเบิลและ partial primitive ช่วยลดภาระการเขียนโค้ด JavaScript เพิ่มเติม ซึ่งอาจทำให้ค่าใช้จ่ายในการพัฒนาลดลง

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

Future Outlook

ทีมงาน Shopify ยังได้บอกว่าในอนาคตจะมีการสนับสนุน Tailwind CSS บนธีมใหม่ ซึ่งคาดว่าจะเพิ่มความยืดหยุ่นในการออกแบบโดยไม่ต้องละทิ้งหลักการโค้ดที่เรียบง่าย

แนวโน้มการพัฒนาเทคโนโลยี AI ภายในอี‑คอมเมิร์ซดูเหมือนจะเดินหน้าอย่างต่อเนื่อง การทำให้โครงสร้างโค้ดเป็นมิตรต่อทั้งมนุษย์และเครื่องจักรอาจกลายเป็นมาตรฐานใหม่ของแพลตฟอร์มอื่น ๆ ในอุตสาหกรรม

Summary

Shopify เปิดตัวธีมพื้นฐานใหม่ที่ลดความซับซ้อนของโค้ดโดยใช้ HTML + Liquid, ลดบรรทัดโค้ดลง 93 % และรองรับการทำงานของ AI อย่าง Sidekick. การเปลี่ยนแปลงนี้คาดว่าจะช่วยให้ผู้ค้าและนักพัฒนาปรับแต่งร้านค้าได้เร็วขึ้น พร้อมเตรียมพื้นฐานสำหรับเทคโนโลยีเช่น Tailwind CSS ในอนาคต.