การแก้ไขโค้ดธีม

คุณสามารถแก้ไขโค้ดธีมของคุณเพื่อทำการเปลี่ยนแปลงร้านค้าออนไลน์ของคุณอย่างละเอียดได้ ไฟล์ส่วนใหญ่ที่ประกอบขึ้นเป็นธีมมี Liquid ซึ่งเป็นภาษาเทมเพลตของ Shopify และยังมีไฟล์ธีมแบบ HTML, CSS, JSON และ JavaScript. ควรแก้ไขโค้ดสำหรับธีมหากคุณสามารถใช้งานไฟล์ HTML และ CSS และมีความเข้าใจพื้นฐานเกี่ยวกับ Liquid เท่านั้น

ก่อนปรับแต่งธีมของคุณ

หากต้องการเตรียมพร้อมสำหรับการปรับแต่งธีมของคุณ ให้ดำเนินการตามงานที่แนะนำต่อไปนี้:

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

แก้ไขรหัสธีมของคุณ

คุณสามารถแก้ไขรหัสสำหรับธีมของคุณได้

ขั้นตอนมีดังนี้

เดสก์ท็อป
  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

  2. คลิก ... > "แก้ไขรหัส"

iPhone
  1. จาก แอป Shopify ให้แตะเมนูแบบล้นออก

  2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์

  3. แตะจัดการธีม

  4. คลิก ... > "แก้ไขรหัส"

Android
  1. จาก แอป Shopify ให้แตะเมนูแบบล้นออก

  2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์

  3. แตะจัดการธีม

  4. คลิก ... > "แก้ไขรหัส"

เครื่องมือแก้ไขรหัสจะแสดงไดเรกทอรีของไฟล์ธีมด้านซ้าย และช่องว่างเพื่อดูและแก้ไขไฟล์ด้านขวา

เมื่อคุณคลิกไฟล์ในไดเรกทอรีทางด้านซ้าย ไฟล์นั้นจะเปิดขึ้นมาในเครื่องมือแก้ไขรหัส คุณสามารถเปิดและแก้ไขไฟล์หลายไฟล์พร้อมกันได้ โดยไฟล์ใดก็ตามที่คุณแก้ไขจะมีจุดปรากฏอยู่ข้างชื่อไฟล์:

ไดเรกทอรีของไฟล์ธีมที่แสดงจุดติดกับไฟล์ที่แก้ไขแล้ว

สิ่งนี้สามารถช่วยให้คุณสามารถติดตามการเปลี่ยนแปลงที่คุณได้ทำไว้ได้

เรียกคืนธีมเวอร์ชันเก่าของคุณ

หากคุณได้เปลี่ยนไฟล์ธีมและต้องการเปลี่ยนกลับ คุณสามารถย้อนไฟล์ .liquid และ .json ทีละไฟล์กลับไปยังเวลาและวันที่ก่อนที่คุณจะทำการเปลี่ยนแปลงได้

คุณสามารถเปลี่ยนกลับไฟล์ธีมในโฟลเดอร์ใดๆ ในไดเรกทอรีได้ ยกเว้นไฟล์ในโฟลเดอร์องค์ประกอบ ไฟล์ที่อยู่ในโฟลเดอร์องค์ประกอบ รวมถึงไฟล์ theme.scss.liquid และ theme.js จะไม่บันทึกเวอร์ชันที่แก้ไขก่อนหน้า หากคุณกำลังทำการเปลี่ยนแปลงไฟล์ในโฟลเดอร์องค์ประกอบ คุณอาจต้องติดต่อฝ่ายช่วยเหลือเรื่องธีมหรือจ้าง Shopify Partner

ขั้นตอนมีดังนี้

เดสก์ท็อป
  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม

  2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด

  3. ในไดเรกทอรีของไฟล์ธีม ให้คลิกไฟล์ .liquid หรือ .json ที่คุณแก้ไขเมื่อเร็วๆ นี้

  4. ที่ด้านบนสุดของตัวแก้ไขโค้ด ให้คลิกปัจจุบัน

  5. ใช้เมนูดรอปดาวน์เพื่อเลือกเวอร์ชันเก่า การเลือก datestamp จะย้อนโค้ดกลับไปเป็นเวอร์ชันที่บันทึกไว้

  6. ตัวเลือกเสริม: คลิก ดูตัวอย่างร้านค้าเพื่อตรวจสอบยืนยันว่าแก้ไขข้อผิดพลาดแล้ว

  7. หากต้องการเปลี่ยนกลับเป็นเวอร์ชันเก่า ให้คลิกบันทึก

iPhone
  1. จาก แอป Shopify ให้แตะเมนูแบบล้นออก

  2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์

  3. แตะจัดการธีมทั้งหมด

  4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วแตะปุ่ม "" เพื่อเปิดเมนูดำเนินการ จากนั้นแตะ "แก้ไขโค้ด"

  5. ในไดเรกทอรีของไฟล์ธีม ให้แตะไฟล์ .liquid หรือ .json ที่คุณแก้ไขไปเมื่อเร็วๆ นี้

  6. ที่ด้านบนสุดของตัวแก้ไขโค้ด ให้แตะปัจจุบัน

  7. ใช้เมนูดรอปดาวน์เพื่อเลือกเวอร์ชันเก่า การเลือก datestamp จะย้อนโค้ดกลับไปเป็นเวอร์ชันที่บันทึกไว้

  8. ตัวเลือกเสริม: แตะดูตัวอย่างร้านค้าเพื่อตรวจสอบยืนยันว่าได้แก้ไขข้อผิดพลาดแล้ว

  9. หากต้องการเปลี่ยนกลับไปเป็นเวอร์ชันเก่า ให้แตะบันทึก

Android
  1. จาก แอป Shopify ให้แตะเมนูแบบล้นออก

  2. ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์

  3. แตะจัดการธีม

  4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วแตะปุ่ม เพื่อเปิดเมนูดำเนินการ จากนั้นแตะ แก้ไขโค้ด

  5. ในไดเรกทอรีของไฟล์ธีม ให้แตะไฟล์ .liquid หรือ .json ที่คุณแก้ไขไปเมื่อเร็วๆ นี้

  6. ที่ด้านบนสุดของตัวแก้ไขโค้ด ให้แตะปัจจุบัน

  7. ใช้เมนูดรอปดาวน์เพื่อเลือกเวอร์ชันเก่า การเลือก datestamp จะย้อนโค้ดกลับไปเป็นเวอร์ชันที่บันทึกไว้

  8. ตัวเลือกเสริม: แตะดูตัวอย่างร้านค้าเพื่อตรวจสอบยืนยันว่าได้แก้ไขข้อผิดพลาดแล้ว

  9. หากต้องการเปลี่ยนกลับไปเป็นเวอร์ชันเก่า แล้วแตะที่

ตรวจสอบธีม

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

ในตัวแก้ไขรหัส การตรวจสอบธีมสามารถระบุข้อผิดพลาดต่อไปนี้ในรหัสที่แก้ไขแล้วได้:

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

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

ตัวอย่างของการตรวจสอบธีมที่ตรวจพบข้อผิดพลาดของรหัส

บทแนะนำการใช้งานการปรับแต่งรหัสธีม

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

รับความช่วยเหลือในการปรับแต่ง

หากคุณต้องการความช่วยเหลือในการเปลี่ยนแปลงธีม คุณสามารถติดต่อนักพัฒนาธีมของคุณเพื่อรับความช่วยเหลือได้

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับแหล่งข้อมูลอื่นๆ ที่มีอยู่เพื่อช่วยในการปรับแต่งธีม โปรดดูแหล่งข้อมูลเพิ่มเติมสำหรับความช่วยเหลือเกี่ยวกับธีม

ไม่พบคำตอบที่คุณต้องการงั้นหรือ เราพร้อมช่วยเหลือคุณ