แก้ไขธีมของคุณ
คุณสามารถแก้ไขธีมของคุณเพื่อปรับแต่งเนื้อหา เลย์เอาต์ แบบอักษร และสี ของร้านค้าออนไลน์ของคุณได้ แต่ละธีมมีส่วนและการตั้งค่าที่ช่วยให้คุณสามารถเปลี่ยนความงามและการใช้งานของร้านค้าของคุณได้โดยไม่ต้องแก้ไขโค้ด
ในหน้านี้
ก่อนปรับแต่งธีมของคุณ
หากต้องการเตรียมพร้อมสำหรับการปรับแต่งธีมของคุณ ให้ดำเนินการตามงานที่แนะนำต่อไปนี้:
- ทำซ้ำธีมเพื่อทำสำเนาข้อมูลสำรอง ซึ่งจะทำให้การละทิ้งการเปลี่ยนแปลงของคุณและเริ่มต้นใหม่ง่ายขึ้น หากจำเป็น
- ตรวจสอบให้แน่ใจว่าคุณทราบว่าสามารถใช้งานระดับความช่วยเหลือใดได้บ้าง
- ดูข้อมูลเกี่ยวกับข้อกำหนดและหลักปฏิบัติที่ดีที่สุดสำหรับการอัปโหลดรูปภาพ
ตัวแก้ไขธีม
ตัวแก้ไขธีมจะแสดงมุมมองแบบต้นไม้ของเนื้อหาทั้งหมดบนเทมเพลตที่คุณดูอยู่ในแถบด้านข้าง ให้ขยายส่วนโหนดโดยใช้ไอคอนขยาย ▾ เพื่อดูบล็อกหรือย่อส่วนนั้นได้โดยการใช้ไอคอนย่อ ▸ เพื่อซ่อนบล็อกดังกล่าว โดยคุณสามารถคลิกที่ส่วนหรือบล็อกใดๆ เพื่อดูการตั้งค่าได้
เข้าถึงตัวแก้ไขธีม
ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
ถัดไปจากธีมที่คุณต้องการแก้ไข ให้คลิก "ปรับแต ่ง"
คลิกที่ ส่วน
ตัวตรวจสอบตัวอย่าง
ตัวตรวจสอบตัวอย่างเป็นฟีเจอร์ใหม่ของตัวแก้ไขธีม ซึ่งจะช่วยให้คุณสามารถไปยังส่วนและบล็อกต่างๆ ได้โดยตรงจากหน้าต่างแสดงตัวอย่าง และช่วยค้นหาการตั้งค่าที่สอดคล้องกันได้เร็วและง่ายขึ้น โดยคุณสามารถจัดเรียงใหม่ ซ่อน หรือลบส่วนและบล็อกต่างๆ ได้จากหน้าต่างแสดงตัวอย่างของคุณ
ตัวตรวจสอบตัวอย่างพร้อมใช้งานกับธีมฟรีของ Shopify ทั้งหมดและเปิดใช้ตามค่าเริ่มต้น คุณสามารถเปิดหรือปิดตัวตรวจสอบตัวอย่างด้วยปุ่มสลับในระหว่างเซสชันการแก้ไขได้
เมื่ อเปิดใช้ตัวตรวจสอบตัวอย่างแล้ว คุณสามารถคลิกที่องค์ประกอบที่ระบุไว้เพื่อเปิดการตั้งค่าที่สอดคล้องกัน บนอุปกรณ์มือถือ เมื่อเปิดใช้ตัวตรวจสอบตัวอย่างแล้ว คุณสามารถคลิกที่องค์ประกอบใดก็ได้เพื่อเลือกการตั้งค่าที่สอดคล้องกัน โดยคุณสามารถเปิดชีตด้านล่างเพื่อทำการแก้ไขผ่านการตั้งค่าที่เลือกนี้
ตัวตรวจสอบตัวอย่างจะแสดงเส้นขอบที่แตกต่างกัน 2 เส้นรอบๆ ส่วนและบล็อกที่คลิกในหน้าต่างแสดงตัวอย่าง:
- เส้นทึบสีฟ้า: ส่วนที่มีการใช้งาน ระบบจะไฮไลท์การตั้งค่าที่สอดคล้องกันในแถบด้านข้างเป็นสีเทา
- เส้นประสีฟ้า: บล็อกที่เกี่ยวข้องสำหรับส่วนนั้น การคลิกที่รายการในหน้าต่างแสดงตัวอย่างจะเปิดการตั้งค่าสำหรับบล็อกหรือส่วนนั้น
การคลิกที่ส่วนใดก็ได้ของเว็บไซต์คุณในหน้าต่างแสดงตัวอย่าง จะเป็นการโหลดการตั้งค่าที่สอดคล้องกันในแถบด้านข้าง บนอุปกรณ์มือถือ การแตะสองครั้งจะเป็นการเข้าดูเว็บไซต์ในฐานะลูกค้า
เพิ่มส่วนและบล็อกในตัวตรวจสอบตัวอย่าง
ขณะที่คุณใช้งานตัวตรวจสอบตัวอย่าง คุณสามารถเพิ่มส่วนและบล็อกไปยังธีมของคุณได้โดยตรงจากหน้าต่างแสดงตัวอย่าง บนมือถือ คุณสามารถเพิ่ม คัดลอก ซ่อน ย้าย และลบส่วนต่างๆ ได้โดยใช้โหมดแก้ไขในชีตด้านล่าง
| เครื่องมือ | คำอธิบาย |
|---|---|
| เพิ่มส่วน | ปุ่มเพิ่มส่วนจะแสดงที่ด้านบนและด้านล่างของส่วนที่เลือกให้คลิกเพิ่มส่วน เพื่อแทรกส่วนใหม่ไว้ด้านบนหรือด้านล่างของส่วนที่เลือก |
| เพิ่มบล็อก | ปุ่มเพิ่มบล็อกจะแสดงขึ้นเมื่อคุณวางเมาส์ไว้เหนือบล็อกที่มีอยู่ หากต้องการเพิ่มบล็อก ให้คลิกไอคอน + เมนูป๊อปอัปจะแสดงขึ้นพร้อมกับธีมและบล็อกสำหรับแอปที่สามารถเพิ่มไปยังส่วนที่เลื อกได้ ให้คลิกที่บล็อกที่คุณต้องการเพิ่ม ซึ่งหน้าต่างการตั้งค่าของบล็อกใหม่จะโหลดไว้ในแถบด้านข้างขวา |
เครื่องมือตัวตรวจสอบตัวอย่าง
คุณสามารถย้าย ซ่อน สร้างซ้ำ หรือลบส่วนและบล็อกต่างๆ จากตัวแก้ไขธีมของคุณด้วยตัวตรวจสอบตัวอย่างได้
| เครื่องมือ | คำอธิบาย |
|---|---|
| ย้ายไปยังตําแหน่งถัดไป/ก่อนหน้า | คุณสามารถย้ายส่วนหรือบล็อกไปยังตําแหน่งถัดไปหรือตําแหน่งก่อนหน้าได้โดยใช้ไอคอนลูกศรในตัวตรวจสอบตัวอย่าง หากส่วนที่เลือกอยู่ที่ด้านบนของหน้าคุณ หากส่วนที่เลือกอยู่ที่ด้านบนของหน้าคุณ ปุ่มย้ายไปยังตําแหน่งก่อนหน้าจะแสดงเป็นสีเทา แต่หากส่วนของคุณอยู่ที่ด้านล่างของหน้าคุณ จากนั้นคุณจะไม่สามารถใช้ปุ่มย้ายไปยังตําแหน่งถัดไปได้ |
| สร้างส่วนหรือบล็อกซ้ำ | คลิกไอคอนคัดลอกเพื่อสร้างส่วนหรือบล็อกและเนื้อหาซ้ำ |
| ซ่อนส่วนหรือบล็อก | คลิกไอคอนรูปดวงตาเพื่อซ่อนส่วนหรือบล็อก เมื่อทำการซ่อนส่วนหรือบล็อก คุณจะไม่สามารถยกเลิกการซ่อนจากในตัวตรวจสอบตัวอย่างได้ ทั้งนี้ คุณสามารถคลิกปุ่มเลิกทำ ในแถบหลักของคุณ หรือปิดแผงการตั้งค่าเพื่อกลับไปยังหน้าหลักตัวแก้ไขธีมได้ ซึ่งคุณจะดูส่วนหรือบล็อกใดๆ ที่ซ่อนอยู่ในแถบด้านข้างของคุณซึ่งจะมีไอคอนรูปดวงตาถูกขีดทับ คลิกไ อคอนนี้เพื่อยกเลิกการซ่อนส่วนหรือบล็อกดังกล่าว |
| ลบส่วนหรือบล็อก | คลิกไอคอนถังขยะเพื่อลบส่วนหรือบล็อกที่เลือกในตัวตรวจสอบตัวอย่าง |
โหมดแถบด้านข้าง
ตัวแก้ไขธีมจะมีสองโหมดให้คุณเลือกใช้ เพื่อใช้ประโยชน์จากพื้นที่ทั้งหมดบนหน้าจอของคุณ
โหมดแถบด้านข้างแบบสองด้านมีไว้สำหรับหน้าต่างเบราว์เซอร์ที่กว้างขึ้นและหน้าจอขนาดใหญ่ขึ้น ส่วนโหมดแถบด้านข้างแบบเดี่ยวมีไว้สำหรับหน้าต่างเบราว์เซอร์ที่แคบลงและหน้าจอที่มีขนาดเล็กลง โดยโหมดแถบด้านข้างจะเป็นตัวระบุตำแหน่งที่แผงการตั้งค่าจะแสดงในเครื่องมือแก้ไข
โหมดแถบด้านข้างแบบสองด้าน
หากคุณมีหน้าจอที่กว้างกว่า 1600 พิกเซล และหน้าต่างเบราว์เซอร์ของคุณขยายอย่างเต็มหน้าจอ หรือหน้าต่างเบราว์เซอร์ของคุณมีก ารขยายถึงความกว้างอย่างน้อย 1600 พิกเซล แถบด้านข้างสองแถบจะแสดงขึ้น โดยแถบด้านข้างด้านซ้ายมือจะมีแผงการนําทาง และแถบด้านข้างด้านขวามือจะมีแผงการตั้งค่าอยู่
โหมดแถบด้านข้างแบบเดี่ยว
เบราว์เซอร์ที่แคบกว่าจะมีแถบด้านข้างเพียงแถบเดียวเพื่อประหยัดพื้นที่ในการแสดงตัวอย่างธีม เมื่อคุณคลิกที่ส่วนหรือบล็อกเพื่อแก้ไข แผงควบคุมการตั้งค่าจะเปิดขึ้นเหนือด้านบนของแผงการนําทางในแถบด้านข้าง
กลุ่มส่วน
ส่วนต่างๆ จะจัดกลุ่มเป็นพื้นที่ดังต่อไปนี้ในทุกเทมเพลตของหน้า:
- ส่วนหัว: ประกอบด้วยส่วนหัว แถบประกาศ และแอปอื่นๆ หรือ Liquid แบบกำหนดเองของคุณ
- เทมเพลต: ประกอบด้วยส่วนต่างๆ ที่ประกอบขึ้นมาเป็นเนื้อหาหลักของหน้า ตัวอย่างเช่น ส่วนเทมเพลตอาจรวมถึงโพสต์บล็อก คอลลาจ รายการคอลเลกชัน หรือ Liquid แบบกำหนดเอง
- ส่วนท้าย: ประกอบด้วยส่วนท้าย การลงทะเบียนอีเมล และแอปอื่นๆ หรือ Liquid แบบกำหนดเองของคุณ
ส่วนหัวและส่วนท้ายของคุณจะถูกใช้ร่วมกันในทุกหน้าของร้านค้าออนไลน์ของคุณ ตัวอย่างเช่น ห ากคุณเพิ่มบล็อก Liquid แบบกำหนดเองไปยังส่วนหัว Liquid แบบกำหนดเองดังกล่าวจะแสดงบนหน้าสินค้า หน้าแรก และหน้าอื่นๆ ของคุณทั้งหมด คุณยังสามารถจัดเรียงส่วนต่างๆ ใหม่ได้ตามต้องการ
ส่วนและบล็อก
ในรายการของส่วนและบล็อก บล็อกทั้งหมดของส่วนต่างๆ ในหน้านั้นจะแสดงขึ้นตามค่าเริ่มต้น
ส่วนที่เป็นส่วนหัวหรือส่วนท้ายจะถูกย่อตามค่าเริ่มต้น แต่คุณสามารถดูได้หากคุณคลิกไอคอนขยาย ▸ ที่อยู่ถัดจากชื่อของส่วนนั้น
การย้ายส่วนและบล็อก
คุณสามารถย้ายส่วนหรือบล็อกจากพื้นที่หนึ่งของหน้าไปยังอีกพื้นที่หนึ่งได้โดยใช้ไอคอน ⋮⋮ เพื่อคลิกและลากส่วนหรือบล็อกแล้ววางลงในพื้นที่อื่นที่ว่างอยู่
หากคุณพยายามย้ายส่วนหรือบล็อกที่ไม่ได้รับอนุญาต ส่วนหรือบล็อกนั้นจะกลับไปยังพื้นที่เดิม
การลบส ่วน
คุณสามารถลบส่วนหรือบล็อกจากเทมเพลตได้ที่หน้าจอตั้งค่าของแต่ละรายการ ปุ่มลบส่วน จะแสดงที่ด้านล่างของการตั้งค่าส่วน
ขั้นตอน:
- คลิกส่วนหรือบล็อกที่คุณต้องการจะลบในแถบเครื่องมือตัวแก้ไขธีมด้านข้าง
- คลิก “ลบส่วน” หรือ “ลบบล็อก”
- คลิกบันทึก หากคุณกำลังแก้ไขธีมที่เผยแพร่แล้ว ให้คลิกเผยแพร่เพื่อบันทึกการเปลี่ยนแปลงของคุณ และทำให้ธีมดังกล่าวเผยแพร่ในร้านค้าของคุณ
การซ่อนบล็อก
คุณสามารถซ่อนส่วนหรือบล็อกใดๆ ได้โดยใช้ไอคอนรูปดวงตา
เทมเพลต
คุณสามารถเข้าถึงเทมเพลตธีมทั้งหมดจากตัวเลือกหน้าในแถบด้านบนของตัวแก้ไขธีม
หากคุณใช้ธีม Online Store 2.0 คุณยังสามารถสร้างเทมเพลตใหม่ได้โดยตรงจากตัวเลือกหน้าได้โดยคลิกที่ตัวเลือก “เทมเพลตใหม่”
การดูตัวอย่างเทมเพลตที่มีแหล่งข้อมูลเฉพาะ
เมื่อคุณดูเทมเพลต คุณสามารถดูตัวอย่างได้ว่าเทมเพลตนั้นมีลักษณะอย่างไรกับแหล่งข้อมูลที่เข้ากันได้ในร้านค้าของคุณ ตัวอย่างเช่น หากคุณดูเทมเพลตสินค้า คุณสามารถทดสอบเทมเพลตนั้นกับสินค้าใดๆ ก็ได้ในร้านค้าของคุณ
ขั้นตอน:
- จากตัวเลือกหน้าตัวแก้ไขธีม ให้เลือกเทมเพลตที่คุณต้องการดูตัวอย่าง
- จากแผงการนําทางในส่วนตัวอย่าง ให้คลิก “เปลี่ยนแปลง”
- จากเมนูเลือก ให้เลือกแหล่งข้อมูลที่คุณต้องการดูตัวอย่าง
การเลิกทำและการทำซ้ำ
ปุ่ม “เลิกทํา” และ “ทําใหม่” ได้ถูกย้ายไปยังด้านขวาบนของตัวแก้ไขธีมแล้ว
การแก้ไขแบบอินไลน์ของข้อมูลแบบกำหนดเอง
เมื่อใช้งานข้อมูลแบบกำหนดเองเ พื่อสร้างหน้าเมตาอ็อบเจกต์ คุณสามารถแก้ไขเมตาฟิลด์และเมตาอ็อบเจกต์ของคุณได้โดยตรงแบบอินไลน์โดยไม่ต้องไปที่ส่วนผู้ดูแลระบบเพื่อทำการเปลี่ยนแปลง ซึ่งวิธีนี้ใช้ได้ผลกับเมตาฟิลด์รูปภาพ วิดีโอ สี สินค้า หน้า คอลเลกชัน และข้อความ
ขั้นตอน:
- เลือกการตั้งค่าที่เข้ากันได้ในธีมที่อ้างอิงไปที่เมตาอ็อบเจกต์ของคุณ
- เลือกและแก้ไขค่าเมตาฟิลด์ในรายการเมตาอ็อบเจกต์ของคุณจากแผงควบคุมการตั้งค่า
- บันทึกงานแล้วระบบจะรีเฟรชแลนดิ้งเพจโดยอัตโนมัติพร้อมกับข้อมูลที่อัปเดต
การดูเอกสารประกอบ การรับความช่วยเหลือและการตรวจสอบเวอร์ชันธีมของค ุณ
ลิงก์ไปยังเอกสารประกอบและข้อมูลสนับสนุนเกี่ยวกับธีมของคุณจะอยู่ในเมนู “อื่นๆ” ⋯ ในแถบเมนู โดยในเมนูนี้ คุณยังสามารถตรวจสอบเวอร์ชันธีมและข้อมูลผู้สร้างได้อีกด้วย
รับความช่วยเหลือในการปรับแต่ง
หากคุณต้องการความช่วยเหลือในการเปลี่ยนแปลงธีมของคุณ คุณสามารถติดต่อผู้พัฒนาธีมเพื่อรับความช่วยเหลือได้
หากต้องการดูแหล่งข้อมูลอื่นที่มีอยู่เพื่อช่วยเหลือคุณเกี่ยวกับการปรับแต่งธีม โปรดดูแหล่งข้อมูลเพิ่มเติมสำหรับความช่วยเหลือด้านธีม