การแก้ไขโค้ดธีม
คุณสามารถแก้ไขโค้ดธีมเพื่อเปลี่ยนแปลงรายละเอียดร้านค้าออนไลน์ของคุณได้โดยใช้ตัวแก้ไขโค้ด ไฟล์ส่วนใหญ่ที่ประกอบเป็นธีมจะมี Liquid ซึ่งเป็นภาษาเทมเพลตของ Shopify ไฟล์ธีมยังมี HTML, CSS, JSON และ JavaScript อีกด้วย คุณควรแก้ไขโค้ดสำหรับธีมก็ต่อเมื่อคุณมีความรู้เกี่ยวกับ HTML และ CSS รวมถึงมีความเข้าใจพื้นฐานเกี่ยวกับ Liquid
คุณสามารถแก้ไขโค้ดธีมของคุณได้หลังจากที่คุณซื้อธีมนั้นแล้วเท่านั้น ซึ่งรวมถึงการใช้เครื่องมือสร้างโค้ด AI ในตัวแก้ไขธีม หากคุณกำลังใช้ธีมแบบมีค่าใช้จ่ายเวอร์ชันทดลองใช้งาน คุณจะต้องซื้อธีมดังกล่าวก่อนจึงจะสามารถเปลี่ยนแปลงโค้ดได้
ตัวแก้ไขโค้ดจะแสดงไดเรกทอรีของไฟล์ธีมของคุณและพื้นที่สำหรับแสดงและแก้ไขไฟล์ เมื่อคุณคลิกไฟล์ในไดเรกทอรี ไฟล์นั้นจะเปิดขึ้นในตัวแก้ไขโค้ด คุณสามารถเปิดและแก้ไขไฟล์หลายไฟล์พร้อมกันได้ นอกจากนี้คุณยังสามารถเปิดและตรวจสอบไฟล์หลายไฟล์พร้อมกันได้อีกด้วย
ในหน้านี้
แก้ไขโค้ดธีมของคุณ
คุณสามารถใช้ตัวแก้ไขโค้ดเพื่อแก้ไขไฟล์ธีมของคุณ
ขั้นตอน
เดสก์ท็อป
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ด
มือถือ
จาก แอป Shopify ให้แตะไอคอน
ในส่วนช่องทางการขาย ให้แตะร้านค้าออนไลน์
แตะจัดการธีม
แตะ
> แก้ไขโค้ด
การบันทึกการเปลี่ยนแปลง
เมื่อคุณแก้ไขไฟล์ จะมีจุดแสดงขึ้นถัดจากชื่อแท็บเพื่อบ่งบอกว่ามีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คลิกปุ่มบันทึกเพื่อบันทึกการเปลี่ยนแปลงของคุณ คุณยังสามารถกด ⌘ + S บน Mac หรือ Ctrl + S บน Windows เพื่อบันทึกการเปลี่ยนแปลงของคุณได้อีกด้วย
การจัดรูปแบบโค้ดธีม
หากต้องการแก้ไขการเยื้องโค้ด ให้เปิด Command Palette ด้วย ⌘ + Shift + P บน Mac หรือ Ctrl + Shift + P บน Windows พิมพ์ format แล้วเลือก Format document
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดเปิดไฟล์ที่คุณต้องการจัดรูปแบบ
กด
⌘+Pบน Mac หรือCtrl+Pบน Windowsใน Command Palette ให้ป้อน format จากนั้นกด
Enterบนคีย์บอร์ดของคุณบันทึกไฟล์
การติดตามการเปลี่ยนแปลงไฟล์
หากต้องการกู้คืนไฟล์ธีมที่แก้ไขกลับเป็นเวอร์ชันก่อนหน้า ให้ใช้มุมมองไทม์ไลน์สำหรับไฟล์ดังกล่าว
มุมมองไทม์ไลน์จะกู้คืนไฟล์ที่มีอยู่ได้ทีละไฟล์เท่านั้น โดยจะไม่กู้คืนทั้งธีมและไม่สามารถกู้คืนไฟล์ธีมที่ลบไปแล้วได้ ประวัติของไทม์ไลน์มีจำกัด ดังนั้นจึงอาจไม่มีเวอร์ชันเก่าๆ ให้ใช้งาน
การกู้คืนจะแทนที่เนื้อหาของไฟล์ทั้งหมด รวมถึงการเปลี่ยนแปลงที่คุณอาจต้องการเก็บไว้ ก่อนกู้คืนไฟล์ โปรดคัดลอกเนื้อหาของไฟล์ปัจจุบันไว้ในที่ปลอดภัยหากคุณต้องการเก็บการเปลี่ยนแปลงใดๆ ไว้
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดเปิดไฟล์ที่มีอยู่ที่คุณต้องการตรวจสอบหรือกู้คืน
ไม่บังคับ: หากคุณต้องการเก็บการเปลี่ยนแปลงปัจจุบันใดๆ ไว้ โปรดคัดลอกเนื้อหาของไฟล์ปัจจุบันไว้ในที่ปลอดภัยก่อนกู้คืน
ในมุมมองไทม์ไลน์ ให้คลิกรายการบนไทม์ไลน์เพื่อเปรียบเทียบความแตกต่าง
หากต้องการแทนที่เนื้อหาของไฟล์ทั้งหมดด้วยเวอร์ชันก่อนหน้าที่เลือก ให้คลิกขวาที่รายการไทม์ไลน์ แล้วเลือกกู้คืนเนื้อหา
คลิกกู้คืน
Theme Check
ตัวแก้ไขโค้ดมีฟีเจอร์ Theme Check ที่ช่วยป้องกันข้อผิดพลาดโดยจะแสดงความคิดเห็นทันทีขณะที่เขียนโค้ด แทนที่จะไปเจอข้อผิดพลาดในธีมที่ใช้อยู่ของคุณทีหลัง
ในตัวแก้ไขโค้ด Theme Check สามารถระบุข้อผิดพลาดต่อไปนี้ในโค้ดที่แก้ไขได้
- สคริปต์ที่บล็อกการแยกวิเคราะห์ ซึ่งอาจทำให้หน้าร้านทำงานช้าลง
- ความไม่สอดคล้องกันระหว่างไฟล์คำแปล เช่น ไม่มีคีย์คำแปล หรือคำแปลไม่ตรงกันในไฟล์ภาษาท้องถิ่น
- เทมเพลตที่ขาดหายไป
ข้อผิดพลาดจะถูกระบุด้วยเส้นสีแดงใต้โค้ด หากต้องการดูข้อผิดพลาด ให้วางเมาส์เหนือบรรทัดที่ไฮไลท์ไว้
การค้นหาและแทนที่ในตัวแก้ไขโค้ด
คุณสามารถค้นหาภายในตัวแก้ไขโค้ดได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้
- ค้นหาโค้ดของไฟล์ที่ระบุ
- ค้นหาโค้ดของไฟล์ทั้งหมดในธีม
คุณยังสามารถแทนที่โค้ดในไฟล์ที่ระบุหรือหลายรายการในไฟล์ธีมทั้งหมดได้อีกด้วย นอกจากนี้คุณยังสามารถค้นหาไฟล์ตามชื่อเพื่อเปิดไฟล์ได้
การค้นหาภายในไฟล์
คุณสามารถค้นหาและแทนที่โค้ดในไฟล์ที่ต้องการได้ ใช้ปุ่มลูกศรเพื่อตรวจสอบโค้ดแต่ละรายการ
หลังจากค้นหาโค้ดแล้ว คุณสามารถแทนที่โค้ดในไฟล์ได้
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดเปิดไฟล์ที่คุณต้องการค้นหา
กด
⌘+Fบน Mac หรือCtrl+Fบน Windowsในช่อง Search ให้ป้อนคำที่ต้องการค้นหาของคุณ
ไม่บังคับ: หากต้องการแทนที่โค้ด ให้ดำเนินการตามขั้นตอนต่อไปนี้
- ในโมดอลการค้นหา ให้คลิกไอคอน
- ในช่อง Replace ให้ป้อนโค้ดสำหรับแทนที่ คุณสามารถคลิกที่ Preserve case เพื่อให้ตัวพิมพ์ใหญ่เล็กของโค้ดสำหรับแทนที่ตรงกับรายการที่มีอยู่
- คลิกไอคอน Replace เพื่อแทนที่ทีละรายการ หรือคลิกไอคอน Replace all เพื่อแทนที่ทุกรายการพร้อมกัน
การค้นหาในไฟล์ทั้งหมด
คลิกปุ่มค้นหาในแถบด้านข้างฝั่งซ้ายเพื่อค้นหาในไฟล์ธีมทั้งหมด ผลลัพธ์จะแสดงทุกรายการของคำที่คุณค้นหาและไฟล์ที่รายการนั้นปรากฏอยู่
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดคลิกไอคอน
เพื่อเปิดแผงการค้นหา ในช่อง Search ให้ป้อนคำที่ต้องการค้นหาของคุณ
ไม่บังคับ: หากต้องการแทนที่โค้ด ให้ดำเนินการตามขั้นตอนต่อไปนี้
- ในโมดอลการค้นหา ให้คลิกไอคอน
- ในช่อง Replace ให้ป้อนโค้ดสำหรับแทนที่
- แทนที่ทีละรายการ หรือแทนที่ทุกรายการพร้อมกัน
ตัวเลือกการค้นหาขั้นสูง
หากต้องการจำกัดผลการค้นหาให้แคบลง ให้ใช้ตัวเลือกการค้นหาอย่างน้อยหนึ่งรายการต่อไปนี้
- Match case จะแสดงผลลัพธ์การค้นหาที่ตรงตามตัวพิมพ์ใหญ่-เล็ก ตัวอย่างเช่น หากคุณป้อน product การค้นหาจะไฮไลท์ทุกรายการของ product หรือ Product แต่หากคุณเลือก Match case การค้นหาจะไฮไลท์เฉพาะรายการที่เป็น product เท่านั้น
- Match Whole Word จะแสดงผลลัพธ์การค้นหาที่ตรงทั้งคำและไม่รวมผลลัพธ์ที่ตรงกันแค่บางส่วน ตัวอย่างเช่น หากคุณป้อน cart การค้นหาจะไฮไลท์รายการของ cart แต่จะไม่ไฮไลท์ carton
- Use Regular Expression จะแสดงผลการค้นหาที่ตรงกับนิพจน์ทั่วไป (regex) regex คือสตริงอักขระที่ระบุรูปแบบการจับคู่ในข้อความ
ในแผง Search คุณยังสามารถเลือกไฟล์และโฟลเดอร์ที่จะรวมหรือยกเว้นจากผลการค้นหาได้
คลิก เพื่อเปิดเมนูขั้นสูง คุณสามารถป้อนเส้นทางไฟล์หรือโฟลเดอร์ใดก็ได้ในช่อง files to include หรือ files to exclude หากต้องการเพิ่มไฟล์หรือโฟลเดอร์มากกว่าหนึ่งรายการ ให้คั่นด้วยการเว้นวรรคและเครื่องหมายจุลภาค ตัวอย่างเช่น หากต้องการค้นหาไฟล์ในโฟลเดอร์ sections ให้ป้อน ./sections ในช่อง files to include
คุณยังสามารถค้นหาภายในโฟลเดอร์ที่ระบุได้จากมุมมองสารบบไฟล์ โดยคลิกขวาที่โฟลเดอร์ จากนั้นเลือก Find in folder... จากเมนูดรอปดาวน์
การจัดการไฟล์ธีม
คุณสามารถจัดการไฟล์ในโค้ดธีมของคุณได้ คุณสามารถลบไฟล์ เพิ่มไฟล์ใหม่ เปลี่ยนชื่อไฟล์ และกู้คืนไฟล์โค้ดเดิมที่มีการแก้ไขได้จากมุมมองไทม์ไลน์เมื่อมีเวอร์ชันก่อนหน้า ไฟล์แอสเซท เช่น รูปภาพ CSS JavaScript และแบบอักษรในโฟลเดอร์ assets จะไม่มีประวัติไทม์ไลน์
การเปิดไฟล์ธีม
หากต้องการเปิดไฟล์ธีม ให้คลิกที่โฟลเดอร์ จากนั้นคลิกที่ชื่อไฟล์จาก Explorer นอกจากนี้คุณยังสามารถค้นหาไฟล์ตามชื่อหรือสกุลไฟล์ แล้วจึงเปิดไฟล์ได้
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดกด
⌘+Pบน Mac หรือCtrl+Pบน Windowsป้อนชื่อไฟล์ในแถบค้นหาแล้วเลือกไฟล์ หรือเลือกไฟล์จากรายการ Recently opened
การเพิ่มไฟล์ธีมใหม่
หากต้องการเพิ่มไฟล์ ให้เลือกโฟลเดอร์ คลิกไอคอน New file จากนั้นป้อนชื่อไฟล์และสกุลไฟล์
ชื่อไฟล์สามารถใช้อักขระ A-Z, 0-9 ได้ และต้องไม่มีการเว้นวรรค ให้คั่นคำด้วยยัติภังค์หรือขีดล่าง สกุลไฟล์จะกำหนดด้วยเครื่องหมายมหัพภาค . และประเภทของสกุลไฟล์ ตัวอย่างเช่น .liquid หรือ .css
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดคลิกโฟลเดอร์ที่คุณต้องการเพิ่มไฟล์ใหม่เข้าไป
คลิกขวาที่ชื่อโฟลเดอร์แล้วเลือก New file... จากเมนูดรอปดาวน์
ป้อนชื่อใหม่สำหรับไฟล์
กด
Enterบนคีย์บอร์ดของคุณ
การอัปโหลดแอสเซทใหม่
คุณสามารถอัปโหลดแอสเซทใหม่ เช่น ไอคอนหรือไฟล์รูปภาพ ไปยังโฟลเดอร์ assets ของตัวแก้ไขโค้ดได้
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดคลิกขวาที่โฟลเดอร์ assets
คลิกที่ Upload...
เลือกไฟล์ที่คุณต้องการอัปโหลด
คลิกที่ Open
การเปลี่ยนชื่อไฟล์ธีม
คุณสามารถคลิกขวาที่ไฟล์เพื่อเปลี่ยนชื่อได้ โปรดระวังอย่าแก้ไขหรือลบสกุลไฟล์ สกุลไฟล์คือส่วนที่อยู่หลังเครื่องหมายจุด . ซึ่งจะระบุประเภทของไฟล์ เช่น .liquid หรือ .css ชื่อไฟล์สามารถมีตัวอักษร A-Z, 0-9 ได้ และต้องไม่มีการเว้นวรรค โปรดใช้ขีดกลางหรือขีดล่างเพื่อคั่นคำ หากชื่อไฟล์ไม่ถูกต้อง ระบบจะไม่บันทึกชื่อไฟล์ใหม่
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดคลิกขวาที่ไฟล์แล้วเลือก เปลี่ยนชื่อ... จากเมนูดรอปดาวน์
ป้อนชื่อใหม่สำหรับไฟล์
กด
Enterบนคีย์บอร์ดของคุณ
การลบไฟล์ธีม
คุณสามารถลบไฟล์ใดก็ได้ในธีมของคุณ ไฟล์ธีมที่ลบไปแล้วจะไม่สามารถกู้คืนได้
ขั้นตอน
จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม
คลิก
> แก้ไขโค้ดคลิกขวาที่ไฟล์แล้วเลือก ลบถาวร จากเมนูดรอปดาวน์
คลิก ลบ