การแก้ไขโค้ดธีม
คุณสามารถแก้ไขโค้ดธีมของคุณเพื่อทำการเปลี่ยนแปลงร้านค้าออนไลน์ของคุณอย่างละเอียดได้ ไฟล์ส่วนใหญ่ที่ประกอบขึ้นเป็นธีมมี Liquid ซึ่งเป็นภาษาเทมเพลตของ Shopify และยังมีไฟล์ธีมแบบ HTML, CSS, JSON และ JavaScript. ควรแก้ไขโค้ดสำหรับธีมหากคุณสามารถใช้งานไฟล์ HTML และ CSS และมีความเข้าใจพื้นฐานเกี่ยวกับ Liquid เท่านั้น
ในหน้านี้
ก่อนปรับแต่งธีมของคุณ
หากต้องการเตรียมพร้อมสำหรับการปรับแต่งธีมของคุณ ให้ดำเนินการตามงานที่แนะนำต่อไปนี้:
- ทำซ้ำธีมเพื่อทำสำเนาข้อมูลสำรอง ซึ่งจะทำให้การละทิ้งการเปลี่ยนแปลงของคุณและเริ่มต้นใหม่ง่ายขึ้น หากจำเป็น
- ตรวจสอบให้แน่ใจว่าคุณทราบว่าสามารถใช้งานระดับความช่วยเหลือใดได้บ้าง
- ดูข้อมูลเกี่ยวกับข้อกำหนดและหลักปฏิบัติที่ดีที่สุดสำหรับการอัปโหลดรูปภาพ
แก้ไขรหัสธีมของคุณ
คุณสามารถแก้ไขรหัสสำหรับธีมของคุณได้
ขั้นตอนมีดังนี้
เดสก์ท็อป
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- คลิก ... > "แก้ไขรหัส"
iPhone
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- คลิก ... > "แก้ไขรหัส"
Android
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- คลิก ... > "แก้ไขรหัส"
เครื่องมือแก้ไขรหัสจะแสดงไดเรกทอรีของไฟล์ธีมด้านซ้าย และช่องว่างเพื่อดูและแก้ไขไฟล์ด้านขวา
เมื่อคุณคลิกไฟล์ในไดเรกทอรีทางด้านซ้าย ไฟล์นั้นจะเปิดขึ้นมาในเครื่องมือแก้ไขรหัส คุณสามารถเปิดและแก้ไขไฟล์หลายไฟล์พร้อมกันได้ โดยไฟล์ใดก็ตามที่คุณแก้ไขจะมีจุดปรากฏอยู่ข้างชื่อไฟล์:
สิ่งนี้สามารถช่วยให้คุณสามารถติดตามการเปลี่ยนแปลงที่คุณได้ทำไว้ได้
เรียกคืนธีมเวอร์ชันเก่าของคุณ
หากคุณได้เปลี่ยนไฟล์ธีมและต้องการเปลี่ยนกลับ คุณสามารถย้อนไฟล์ .liquid และ .json ทีละไฟล์กลับไปยังเวลาและวันที่ก่อนที่คุณจะทำการเปลี่ยนแปลงได้
คุณสามารถเปลี่ยนกลับไฟล์ธีมในโฟลเดอร์ใดๆ ในไดเรกทอรีได้ ยกเว้นไฟล์ในโฟลเดอร์องค์ประกอบ ไฟล์ที่อยู่ในโฟลเดอร์องค์ประกอบ รวมถึงไฟล์ theme.scss.liquid และ theme.js จะไม่บันทึกเวอร์ชันที่แก้ไขก่อนหน้า หากคุณกำลังทำการเปลี่ยนแปลงไฟล์ในโฟลเดอร์องค์ประกอบ คุณอาจต้องติดต่อฝ่ายช่วยเหลือเรื่องธีมหรือจ้าง Shopify Partner
ขั้นตอนมีดังนี้
เดสก์ท็อป
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีของไฟล์ธีม ให้คลิกไฟล์
.liquidหรือ.jsonที่คุณแก้ไขเมื่อเร็วๆ นี้ - ที่ด้านบนสุดของตัวแก้ไขโค้ด ให้คลิกปัจจุบัน
- ใช้เมนูดรอปดาวน์เพื่อเลือกเวอร์ชันเก่า การเลือก datestamp จะย้อนโค้ดกลับไปเป็นเวอร์ชันที่บันทึกไว้
- ตัวเลือกเสริม: คลิก ดูตัวอย่างร้านค้าเพื่อตรวจสอบยืนยันว่าแก้ไขข้อผิดพลาดแล้ว
- หากต้องการเปลี่ยนกลับเป็นเวอร์ชันเก่า ให้คลิกบันทึก
iPhone
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีมทั้งหมด
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วแตะปุ่ม "…" เพื่อเปิดเมนูดำเนินการ จากนั้นแตะ "แก้ไขโค้ด"
- ในไดเรกทอรีของไฟล์ธีม ให้แตะไฟล์
.liquidหรือ.jsonที่คุณแก้ไขไปเมื่อเร็วๆ นี้ - ที่ด้านบนสุดของตัวแก้ไขโค้ด ให้แตะปัจจุบัน
- ใช้เมนูดรอปดาวน์เพื่อเลือกเวอร์ชันเก่า การเลือก datestamp จะย้อนโค้ดกลับไปเป็นเวอร์ชันที่บันทึกไว้
- ตัวเลือกเสริม: แตะดูตัวอย่างร้านค้าเพื่อตรวจสอบยืนยันว่าได้แก้ไขข้อผิดพลาดแล้ว
- หากต้องการเปลี่ยนกลับไปเป็นเวอร์ชันเก่า ให้แตะบันทึก
Android
- จากแอป Shopify ให้แตะที่ปุ่ม ☰
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วแตะปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นแตะ แก้ไขโค้ด
- ในไดเรกทอรีของไฟล์ธีม ให้แตะไฟล์
.liquidหรือ.jsonที่คุณแก้ไขไปเมื่อเร็วๆ นี้ - ที่ด้านบนสุดของตัวแก้ไขโค้ด ให้แตะปัจจุบัน
- ใช้เมนูดรอปดาวน์เพื่อเลือกเวอร์ชันเก่า การเลือก datestamp จะย้อนโค้ดกลับไปเป็นเวอร์ชันที่บันทึกไว้
- ตัวเลือกเสริม: แตะดูตัวอย่างร้านค้าเพื่อตรวจสอบยืนยันว่าได้แก้ไขข้อผิดพลาดแล้ว
- หากต้องการเปลี่ยนกลับไปเป็นเวอร์ชันเก่า ให้แตะบันทึก
ตรวจสอบธีม
ตัวแก้ไขรหัสประกอบด้วยการตรวจสอบธีมซึ่งเป็นฟีเจอร์ที่ช่วยป้องกันข้อผิดพลาดโดยการให้ความคิดเห็นทันทีในขณะเขียนรหัสแทนที่จะไปค้นพบข้อผิดพลาดในธีมที่ใช้อยู่ของคุณ
ในตัวแก้ไขรหัส การตรวจสอบธีมสามารถระบุข้อผิดพลาดต่อไปนี้ในรหัสที่แก้ไขแล้วได้:
- สคริปต์การบล็อกพาร์เซอร์ ซึ่งอาจทำให้หน้าร้านทำงานช้าลง
- ความไม่สอดคล้องกันระหว่างไฟล์การแปล เช่น ไม่มีคีย์การแปลหรือการแปลที่ไม่ตรงกันในไฟล์ภาษาท้องถิ่น
- ไม่มีเทมเพลต
ข้อผิดพลาดจะระบุด้วยเส้นสีแดงใต้รหัส หากต้องการดูข้อผิดพลาด ให้เลื่อนเมาส์ไปที่เส้นที่มีการไฮไลต์
บทแนะนำการใช้งานการปรับแต่งรหัสธีม
คุณสามารถทำตามบทแนะนำการใช้งานการปรับแต่งโค้ดธีมเพื่อเป็นแนวทางในการเปลี่ยนแปลงร้านค้าออนไลน์ของคุณได้ โดยระบบจะจัดระเบียบบทแนะนำการใช้งานตามประเภทของหน้าหรือฟีเจอร์ที่ต้องการปรับเปลี่ยน
บทแนะนำการใช้งานการปรับแต่งธีมจะแบ่งตามเวอร์ชันของสถาปัตยกรรมธีมที่ใช้ ดูวิธีระบุเวอร์ชันสถาปัตยกรรมธีมของคุณ
รับความช่วยเหลือในการปรับแต่ง
หากคุณต้องการความช่วยเหลือในการเปลี่ยนแปลงธีม คุณสามารถติดต่อนักพัฒนาธีมของคุณเพื่อรับความช่วยเหลือได้
หากต้องการดูแหล่งข้อมูลอื่นที่มีอยู่เพื่อช่วยเหลือคุณเกี่ยวกับการปรับแต่งธีม โปรดดูแหล่งข้อมูลเพิ่มเติมสำหรับความช่วยเหลือด้านธีม