รายชื่อร้านค้าสาธิตของ Shopify Hydrogen [กำลังอัปเดต]

เผยแพร่แล้ว: 2022-04-25

สารบัญ

เนื่องจาก Shopify เป็นแพลตฟอร์มอีคอมเมิร์ซ SaaS ผู้ใช้จึงต้องเผชิญกับข้อจำกัดมากมายในการปรับแต่งร้านค้าออนไลน์ของตน แต่สำหรับ Hydrogen สิ่งนี้อาจไม่เป็นเช่นนั้นอีกต่อไป

Hydrogen เป็นเฟรมเวิร์กที่อิงตามปฏิกิริยาแรกของ Shopify สำหรับนักพัฒนาเพื่อสร้างหน้าร้านที่กำหนดเอง ด้วยการใช้ส่วนประกอบ React Server, การเรนเดอร์ฝั่งเซิร์ฟเวอร์ & API การแคช กรอบงานช่วยให้นักพัฒนาสร้างหน้าร้านที่รวดเร็วและยืดหยุ่นอย่างมากในระยะเวลาอันสั้น

ร้านค้าสาธิตมีประโยชน์สำหรับคุณในการทำความคุ้นเคยกับกรอบงาน โครงสร้าง และส่วนประกอบ นอกจากนี้ยังให้แนวคิดที่ชัดเจนว่าร้านค้า Shopify Hydrogen มีรูปลักษณ์และดำเนินการอย่างไรในความเป็นจริง

การสาธิตหน้าร้านของ Shopify Hydrogen

  1. การสาธิตอย่างเป็นทางการของ Shopify

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

  1. Shopify Supply

ที่จริงแล้วนี่ไม่ใช่ร้านสาธิต แต่เป็นร้านค้าอย่างเป็นทางการที่สร้างด้วย Hydrogen โดย Shopify เอง

  1. สาธิตไฮโดรเจน โดย Tapita

การสาธิตส่วนหน้าของ Shopify Hydrogen สร้างขึ้นโดย SimiCart โดยใช้ตัวสร้างหน้า Tapita Hydrogen เพื่อลากและวางทุกหน้า

  1. การสาธิตไฮโดรเจนโดย rafaelcg.com

การสาธิตส่วนหน้านี้สร้างขึ้นเพื่อการศึกษา ซึ่งแสดงให้เห็นว่านักพัฒนาสามารถสร้างหน้าร้านแบบกำหนดเองขั้นพื้นฐานด้วยไฮโดรเจนได้อย่างไร

  1. การสาธิตไฮโดรเจนโดย Sanity

การสาธิตแสดงให้เห็นว่าร้านค้า Shopify Hydrogen สามารถทำงานร่วมกับ Sanity.io ซึ่งเป็นเครื่องมือที่รวมผลิตภัณฑ์และข้อมูลการตลาดเข้าด้วยกันได้อย่างไร

การสาธิตโครงการ Shopify Hydrogen

นี่คือคอลเล็กชันโปรเจ็กต์สาธิตบน Github เพื่อช่วยให้คุณทำความรู้จักกับส่วนประกอบและโครงสร้างของ Shopify Hydrogen

  • การสาธิตโดย Shopify
  • โครงการโดย Shopify Supply
  • สาธิตโดย Shobhit Sirohi
  • สาธิตโดย henryclong
  • สาธิตโดย andacg1
  • สาธิตโดย bschnell-google
  • สาธิตโดย kwaaaaaa

Shopify Hydrogen กับ Shopify ร้านค้าปกติ: อะไรคือความแตกต่าง?

แม้ว่านักพัฒนาซอฟต์แวร์อาจเป็นเรื่องง่าย แต่ผู้ขายของ Shopify อาจพบว่าเป็นการยากที่จะทำความเข้าใจ Shopify Hydrogen ข้อกำหนดที่เกี่ยวข้องและวิธีการทำงาน

ดังนั้นเราจึงทำการเปรียบเทียบโดยย่อเพื่อชี้ให้เห็นความแตกต่างหลักระหว่าง Shopify Hydrogen และร้านค้าปกติของ Shopify เพื่อให้ผู้ค้า Shopify ที่ไม่เข้าใจเทคโนโลยีสามารถมีภาพที่ดีขึ้นได้

คำนิยาม

  • Shopify Hydrogen : เฟรมเวิร์กสำหรับหน้าร้านแบบกำหนดเองพร้อมส่วนประกอบ UI
  • Shopify : แพลตฟอร์มอีคอมเมิร์ซ

กรอบงานและแพลตฟอร์มเป็นคำศัพท์ด้านไอทีที่สร้างความสับสนให้บุคคลภายนอกเข้าใจ

แพลตฟอร์มมีทั้งซอฟต์แวร์และฮาร์ดแวร์ ซึ่งให้สภาพแวดล้อมสำหรับผู้คนในการสร้างและใช้แอปพลิเคชัน กรอบงานก็เหมือนกับเทมเพลตที่มีส่วนประกอบสำเร็จรูปสำหรับนักพัฒนาในการสร้างแอปพลิเคชัน

เรามักมองว่าแท่นนี้เป็นสนามเด็กเล่น ซึ่งผู้คนมาเยี่ยมชมและเล่นสไลเดอร์และกระดานหก ในทางกลับกัน โครงเป็นกระดานหกเอง คุณสามารถสร้างกระดานหกด้วยไม้และสีที่จัดไว้ให้

ตอนนี้ กลับมาที่กรณีของ Shopify กัน

Shopify ซึ่งเป็นแพลตฟอร์มอีคอมเมิร์ซมีธีม ฟีเจอร์อีคอมเมิร์ซ และแอปสำหรับเจ้าของร้านค้าเพื่อสร้างเว็บไซต์ออนไลน์

ในขณะเดียวกัน Shopify Hydrogen – เฟรมเวิร์ก – มีโครงสร้าง เครื่องมือ และส่วนประกอบที่จำเป็นสำหรับนักพัฒนาในการสร้างหน้าร้านแบบกำหนดเองเพื่อทำงานบนเว็บไซต์ Shopify

ภาษาการเข้ารหัส

  • Shopify Hydrogen : Javascript พร้อม Reacts framework
  • Shopify ร้านค้าปกติ : Shopify Liquid

Liquid เป็นภาษาเขียนโค้ดเพียงภาษาเดียวสำหรับ Shopify ซึ่งเป็นเอกสิทธิ์ของ Shopify ในทางกลับกัน Javascript เป็นภาษาเขียนโค้ดที่เป็นสากลมากซึ่งใช้สำหรับแอปพลิเคชันนับล้าน ตัวอย่างเช่น Netflix, Facebook, Candy Crush, Linkedin เป็นต้น เป็นแอปพลิเคชั่นเด่นบางตัวที่ใช้ Javascript

แม้ว่า Shopify Liquids จะเป็นภาษาเขียนโค้ดที่มั่นคง แต่ก็มีข้อจำกัดบางประการ โดยเฉพาะในด้านประสิทธิภาพ การใช้ Javascript สำหรับหน้าร้านของ Shopify ช่วยให้หน้าเว็บเร็วขึ้นในขณะที่เปิดความเป็นไปได้ไม่รู้จบเพื่อสร้าง UI&UX ของเว็บไซต์ที่ไม่เหมือนใคร

ใช้งานง่าย

  • Shopify Hydrogen : เน้นนักพัฒนา
  • Shopify ร้านค้าปกติ : ไม่ใช่ techie-oriented

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

ประโยชน์

Hydrogen ช่วยให้นักพัฒนาและผู้ค้ามีวิธีใหม่ในการสร้างประสบการณ์อีคอมเมิร์ซแบบไดนามิกบน Shopify แก้ปัญหาที่มีอยู่มากมายกับหน้าร้าน Shopify ปัจจุบัน เช่น ขาดความยืดหยุ่นและประสิทธิภาพด้านความเร็ว

มาเจาะลึกถึงข้อดีของ Shopify Hydrogen:

พัฒนาได้เร็ว

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

นอกจากนี้ Shopify Hydrogen ยังมาพร้อมกับ hooks ส่วนประกอบและยูทิลิตี้ที่พร้อมใช้งานที่เชื่อมต่อกับ Storefront API ได้โดยตรง ดังนั้น การดึงข้อมูลจึงทำได้ง่ายและมีประสิทธิภาพ โดยไม่จำเป็นต้องสร้างการสืบค้น GraphQL

ประสิทธิภาพที่ดีขึ้น

Shopify Hydrogen ใช้ประโยชน์จากเทคโนโลยีเว็บขั้นสูงเพื่อเพิ่มประสิทธิภาพความเร็วและยกระดับประสิทธิภาพ:

  • สตรีมมิงแบบฝั่งเซิร์ฟเวอร์
  • ส่วนประกอบเซิร์ฟเวอร์ตอบสนอง
  • แคชในตัวอัจฉริยะ & การดึงข้อมูลที่มีประสิทธิภาพ
  • รวมการแสดงผลฝั่งเซิร์ฟเวอร์ การดึงข้อมูลฝั่งไคลเอ็นต์ & การจัดส่งที่ขอบแบบไดนามิก

การปรับปรุงประสิทธิภาพย่อมนำไปสู่คะแนน Google Core Vitals ที่ดีขึ้นอย่างหลีกเลี่ยงไม่ได้ ด้วยเหตุนี้ ผลลัพธ์ SEO ที่ดีขึ้น

ความเก่งกาจมากขึ้น

Hydrogen คือวิธีที่ Shopify ตอบสนองต่อการค้าขายแบบไร้หัว ซึ่งเป็นหนึ่งในแนวโน้มอีคอมเมิร์ซที่โดดเด่นที่สุดในปี 2022

การค้าแบบไร้หัวหมายถึงการแยกส่วนหน้าออกจากส่วนหลังเพื่อให้ได้ความสามารถในการปรับแต่งและบูรณาการที่ไม่มีใครเทียบได้

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

นอกจากนี้ ด้วยสถาปัตยกรรมแบบไม่ใช้หัว การปรับแต่งและบำรุงรักษาทั้งหมดสามารถทำได้ในแบ็กเอนด์และในส่วนหน้าพร้อมกัน เมื่อรู้ว่ากระบวนการส่วนหน้าจะไม่ส่งผลกระทบต่อส่วนหลังและในทางกลับกัน นักพัฒนาและนักออกแบบจะมีอิสระในการทำงานมากขึ้น

ดูเพิ่มเติม: ตัวอย่างร้านค้า Headless Shopify

การปรับเปลี่ยนในแบบของคุณดีขึ้น

อนาคตของอีคอมเมิร์ซคือการมอบประสบการณ์ที่เกี่ยวข้องให้กับลูกค้ามากที่สุด

การปรับเปลี่ยนในแบบของคุณอย่างง่ายเริ่มต้นด้วยการโลคัลไลซ์เซชั่น - เพจได้รับการแปลเป็นภาษาต่างๆ สำหรับผู้ซื้อในประเทศต่างๆ

อย่างไรก็ตาม ในปัจจุบัน การปรับแต่งอีคอมเมิร์ซให้เป็นส่วนตัวมีความซับซ้อนมากขึ้นเรื่อยๆ เราได้เห็นราคาเปลี่ยนแปลงแบบไดนามิกตามบริบทที่แตกต่างกัน คำแนะนำผลิตภัณฑ์ที่แสดงต่อลูกค้าที่แตกต่างกัน และอื่นๆ

ขณะนี้ร้านค้าอีคอมเมิร์ซกำลังพยายามปรับแต่งทุกรายละเอียดเล็ก ๆ ของเว็บไซต์ของตน

Ilya Grigorik ซึ่งเป็นวิศวกรหลักของ Shopify ได้อธิบายเกี่ยวกับการปรับเปลี่ยนอีคอมเมิร์ซในแบบของคุณให้ทันสมัย ​​ได้แสดงภาพทุกหน้าให้เป็นกระดาน Tetris แบบเปิด และสามารถปรับแต่ง "ช่อง" บนกระดานแต่ละช่องเพื่อดึงดูดผู้เยี่ยมชมแบบไดนามิกได้

แล้ว Shopify Hydrogen จะช่วยในเรื่องการปรับเปลี่ยนในแบบของคุณได้อย่างไร?

หน้าร้าน Shopify Hydrogen ประกอบด้วยส่วนประกอบ UI ต่างๆ แทนที่จะเป็นโครงสร้างที่มั่นคง นักพัฒนาและผู้ค้าสามารถปรับแต่งองค์ประกอบเนื้อหาแต่ละส่วนเพื่อนำเสนอเนื้อหาแบบไดนามิกที่ดีที่สุดและประสบการณ์ลูกค้าที่เป็นส่วนตัว

ตัวอย่างเช่น คุณสามารถสร้างบล็อกสำหรับคำแนะนำผลิตภัณฑ์ตามข้อมูลลูกค้า เช่น การซื้อที่ผ่านมาหรือข้อมูลประชากร

นอกจากนี้ เว็บสโตร์ส่วนบุคคลมักจะซับซ้อนมาก ซึ่งต้องการเทคโนโลยีเว็บที่ทรงพลังและเป็นไดนามิกมากกว่า เพื่อรักษาประสิทธิภาพความเร็วที่ดี Shopify ตระหนักถึงปัญหานี้มานานแล้ว ดังนั้นความพยายามทั้งหมดของ Hydrogen ในการจัดเก็บที่เร็วขึ้นรวมถึงการเรนเดอร์ฝั่งเซิร์ฟเวอร์ที่ดีขึ้น การแคชแบบไดนามิกและการดึงข้อมูลจึงถูกสร้างขึ้นโดยคำนึงถึงปัญหาเฉพาะนี้

ปรับแต่งหน้าร้านไฮโดรเจนด้วย SimiCart

ไฮโดรเจนเป็นก้าวสำคัญของ Shopify สู่อนาคตของอีคอมเมิร์ซ: พลวัตและการปรับเปลี่ยนในแบบของคุณ Hydrogen ช่วยให้ Shopify สามารถให้คุณค่าแก่ลูกค้าของตนได้มากขึ้น โดยเฉพาะอย่างยิ่งผู้ค้าที่ขยายธุรกิจ ดังนั้นจึงรักษาความได้เปรียบในการแข่งขันเหนือแพลตฟอร์มที่ยืดหยุ่นอื่นๆ

สำหรับผู้ค้า การละทิ้งส่วนหน้า Shopify ปัจจุบันของคุณและสร้างหน้าร้าน Hydrogen ช่วยแก้ไขจุดบอดที่มีอยู่มากมาย เช่น ประสิทธิภาพและการปรับแต่ง ส่งผลให้มูลค่าการสั่งซื้อเฉลี่ยสูงขึ้น อัตราการรักษาที่ดีขึ้น และเพิ่มรายได้

อย่างไรก็ตาม ในปัจจุบัน Hydrogen ยังคงสร้างมาเพื่อนักพัฒนามากกว่าเจ้าของ Shopify ที่ไม่เชี่ยวชาญด้านเทคโนโลยี จำเป็นต้องมีประสบการณ์ในการเขียนโค้ด ไม่มีเครื่องมือสร้างหน้าสำหรับเริ่มต้น และไม่มีคู่มือสำหรับผู้เริ่มต้นใช้งานด้วย

SimiCart นำเสนอโซลูชันการพัฒนาที่สมบูรณ์เพื่อสร้างหน้าร้านที่ไม่มีหัวเรื่องด้วย Shopify Hydrogen ในราคาที่เหมาะสม แพ็คเกจนี้มาพร้อมกับเครื่องมือสร้างเพจแบบลากและวาง เพื่อให้ผู้ค้าของ Shopify สามารถสร้างหน้าร้าน Hydrogen แบบกำหนดเองได้ เช่นเดียวกับที่พวกเขาทำกับร้านค้า Shopify ปกติ

สร้างหน้าร้านไฮโดรเจนได้อย่างง่ายดาย