การปรับแต่งร้านค้าออนไลน์ของคุณโดยใช้ตัวแก้ไขธีม

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

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

เข้าถึงตัวแก้ไขธีม

คุณสามารถเข้าถึงตัวแก้ไขธีมได้จากส่วนผู้ดูแล Shopify ของคุณ

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

  2. ถัดไปจากธีมที่คุณต้องการแก้ไข ให้คลิก "ปรับแต่ง"

แถบเมนูมีข้อมูลเกี่ยวกับธีมของคุณ เมนูเพื่อเข้าถึงข้อมูลเพิ่มเติมและพื้นที่ต่างๆ ของธีมของคุณ และส่วนควบคุมสำหรับการปรับแต่งธีมของคุณ

แถบเมนูจะแสดงข้อมูลธีมและปุ่มสำหรับจัดการการปรับแต่งธีม

แถบเมนูจะแสดงข้อมูลเพิ่มเติมและตัวเลือกการนำทางดังต่อไปนี้

คุณสามารถเข้าถึงเทมเพลตและเลย์เอาต์ตลาดที่แตกต่างกันได้จากเมนูต่อไปนี้

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

การดูเอกสารประกอบ การรับความช่วยเหลือและการตรวจสอบเวอร์ชันธีมของคุณ

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

ใช้ปุ่มเพิ่มเติมเพื่อเข้าถึงข้อมูลธีม

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

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

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

การใช้ปุ่มลัดคีย์บอร์ดในตัวแก้ไขธีม

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

รายการปุ่มลัดคีย์บอร์ดที่รองรับสำหรับตัวแก้ไขธีม ทั้งสำหรับอุปกรณ์ Windows และ macOS
หมวดหมู่การดำเนินการปุ่มลัดบน Windowsปุ่มลัดบน macOS
ทั่วไป เลิกทำ CTRL + Z + Z
ทำซ้ำ CTRL + Y + Y
บันทึก CTRL + S + + S
ดูทางลัดทั้งหมด CTRL + / + /
เครื่องมือ ตัวตรวจสอบตัวอย่าง CTRL + SHIFT + | + + |
โหมดดูตัวอย่าง + CTRL + | + + |
Sidekick CTRL + . + .
การนำทาง ส่วนต่างๆ + CTRL + Z + + 1
การตั้งค่าธีม + CTRL + Z + + 2
การฝังแอป + CTRL + Z + + 3
ส่วนและบล็อก ซ่อนและแสดง CTRL + SHIFT + H + + H
ลบออก SHIFT + +
เลือกก่อนหน้า SHIFT + +
เลือกถัดไป SHIFT + +
เปิดองค์ประกอบที่เลือก SHIFT + ENTER +
ขยายส่วนทั้งหมด CTRL + SHIFT + O + + O
ยุบส่วนทั้งหมด CTRL + SHIFT + P + + P

เทมเพลต

คุณสามารถเข้าถึงเทมเพลตธีมทั้งหมดจากตัวเลือกหน้าในแถบด้านบนของตัวแก้ไขธีม

เลือกเทมเพลตจากแถบเมนู

หากคุณใช้ธีม Online Store 2.0 คุณยังสามารถสร้างเทมเพลตใหม่ได้โดยตรงจากตัวเลือกหน้าได้โดยคลิกที่ตัวเลือก “เทมเพลตใหม่

การดูตัวอย่างเทมเพลตที่มีแหล่งข้อมูลเฉพาะ

คุณสามารถดูตัวอย่างการแสดงผลเทมเพลตของคุณร่วมกับแหล่งข้อมูลที่เข้ากันได้ในร้านค้าของคุณ ตัวอย่างเช่น หากคุณดูเทมเพลตสินค้า คุณสามารถทดสอบเทมเพลตนั้นกับสินค้าใดๆ ก็ได้ในร้านค้าของคุณ

คุณยังคงต้องกําหนดเทมเพลตไปยังแหล่งข้อมูลใน Shopify Admin

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

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

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

  2. ถัดไปจากธีมที่คุณต้องการแก้ไข ให้คลิก "ปรับแต่ง"

  3. จากเมนูเทมเพลต ให้เลือกเทมเพลตที่คุณต้องการดูตัวอย่าง

  4. จากเมนูแถบด้านข้าง ในส่วน แสดงตัวอย่าง คลิก เปลี่ยนแปลง

  5. จากเมนูเลือก ให้เลือกแหล่งข้อมูลที่คุณต้องการดูตัวอย่าง

ตัวตรวจสอบตัวอย่าง

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

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

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

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

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

ตัวตรวจสอบตัวอย่างจะแสดงเส้นขอบใดเส้นขอบหนึ่งจากสองเส้นขอบรอบส่วนและบล็อกที่คลิกในหน้าต่างแสดงตัวอย่างดังต่อไปนี้

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

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

เพิ่มส่วนและบล็อกในตัวตรวจสอบตัวอย่าง

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

ตัวตรวจสอบตัวอย่าง เพิ่มตัวเลือกส่วน

ตัวตรวจสอบตัวอย่าง เพิ่มตัวเลือกบล็อก

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

เครื่องมือตัวตรวจสอบตัวอย่าง

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

ชุดเครื่องมือตรวจสอบตัวอย่าง

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

การดูขนาดหน้าจอที่แตกต่างกันในเครื่องมือแก้ไขธีม

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

  • คลิกปุ่ม เดสก์ท็อป สำหรับเดสก์ท็อป
  • คลิกปุ่ม มือถือ สำหรับมือถือ
  • คลิกปุ่ม เต็มหน้าจอ เพื่อเต็มหน้าจอ

การเลิกทำและการทำซ้ำ

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

หากไม่มีการปรับแต่งที่ยังไม่ได้บันทึกที่ต้องทำซ้ำ เลิกทำ หรือทั้งสองอย่าง ปุ่มที่เกี่ยวข้องจะกลายเป็นสีเทา

ปุ่มเลิกทำและทำซ้ำในแถบเมนูของตัวแก้ไขธีม

เมนูแถบด้านข้าง

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

โหมดแถบด้านข้าง

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

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

โหมดแถบด้านข้างแบบสองด้าน

หากคุณมีหน้าจอที่กว้างกว่า 1600 พิกเซล และหน้าต่างเบราว์เซอร์ของคุณขยายอย่างเต็มหน้าจอ หรือหน้าต่างเบราว์เซอร์ของคุณมีการขยายถึงความกว้างอย่างน้อย 1600 พิกเซล แถบด้านข้างสองแถบจะแสดงขึ้น โดยแถบด้านข้างด้านซ้ายมือจะมีแผงการนําทาง และแถบด้านข้างด้านขวามือจะมีแผงการตั้งค่าอยู่

แผงการตั้งค่าจะแสดงที่ด้านขวามือของหน้าจอในโหมดแถบด้านข้างแบบสองด้าน

หากต้องการดูตัวแก้ไขธีมในโหมดแถบด้านข้างแบบเดี่ยวบนหน้าจอขนาดใหญ่ ให้ย่อหน้าต่างเบราว์เซอร์ของคุณให้แคบลงจนกว่าแผงการตั้งค่าจะอยู่ด้านบนของแถบการนําทางด้านข้างหรือหายไป

โหมดแถบด้านข้างแบบเดี่ยว

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

แผงการตั้งค่าจะแสดงเป็นแผงการนําทางแบบวางซ้อนในโหมดแถบด้านข้างแบบเดี่ยว

ส่วนและบล็อก

ในรายการของส่วนและบล็อก บล็อกทั้งหมดของส่วนต่างๆ ในหน้านั้นจะแสดงขึ้นตามค่าเริ่มต้น

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

กลุ่มส่วน

ส่วนต่างๆ จะถูกจัดกลุ่มไว้ในพื้นที่ต่อไปนี้สำหรับทุกเทมเพลตหน้าในธีมของคุณ

  • พื้นที่ส่วนหัวประกอบด้วยส่วนหัว แถบประกาศ และแอปอื่นๆ หรือ Liquid แบบกำหนดเองของคุณ
  • พื้นที่เทมเพลตประกอบด้วยส่วนต่างๆ ที่ประกอบขึ้นมาเป็นเนื้อหาหลักของหน้าของคุณ ตัวอย่างเช่น ส่วนเทมเพลตอาจรวมถึงโพสต์บล็อก คอลลาจ รายการคอลเลกชัน หรือ Liquid แบบกำหนดเอง
  • พื้นที่ส่วนท้ายประกอบด้วยส่วนท้าย การลงทะเบียนอีเมล และแอปอื่นๆ หรือ Liquid แบบกำหนดเองของคุณ

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

ขยายและย่อส่วนเและบล็อก

ขยายส่วนโหนดโดยใช้ปุ่มขยาย เพื่อดูบล็อก หรือย่อส่วนนั้นได้โดยใช้ปุ่มย่อ เพื่อซ่อนบล็อกดังกล่าว โดยคุณสามารถคลิกที่ส่วนหรือบล็อกใดๆ เพื่อดูการตั้งค่าได้

ขยายและย่อส่วนเพื่อดูบล็อก

การย้ายส่วนและบล็อก

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

หากคุณพยายามย้ายส่วนหรือบล็อกที่ไม่ได้รับอนุญาต ส่วนหรือบล็อกนั้นจะกลับไปยังพื้นที่เดิม

การลบส่วนและบล็อค

คุณสามารถลบส่วนหรือบล็อกจากเทมเพลตได้ด้วยวิธีใดวิธีหนึ่งจากสองวิธีต่อไปนี้:

  • เลื่อนเคอร์เซอร์ของคุณไปไว้ข้างๆ ชื่อส่วน จากนั้นคลิกปุ่มลบ

    Remove a section in the template overview

  • คลิกชื่อส่วน จากนั้นคลิก ลบส่วน ในรายละเอียดการตั้งค่าส่วน

    Remove a section using the Remove section button

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

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

  2. ถัดไปจากธีมที่คุณต้องการแก้ไข ให้คลิก "ปรับแต่ง"

  3. คลิกส่วนหรือบล็อกที่คุณต้องการจะลบในแถบเครื่องมือตัวแก้ไขธีมด้านข้าง

  4. คลิก “ลบส่วน” หรือ “ลบบล็อก

  5. คลิกบันทึก หากคุณแก้ไขธีมที่เผยแพร่แล้ว ให้คลิกที่ “เผยแพร่” เพื่อบันทึกการเปลี่ยนแปลงและเผยแพร่ธีมไปยังร้านค้าของคุณ

การซ่อนส่วนและบล็อก

คุณสามารถซ่อนส่วนหรือบล็อกใดๆ ได้โดยใช้ปุ่มดู

Hide a section using the hide icon

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