การแก้ไขปัญหาธีมร้านค้าออนไลน์ของคุณ

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

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

ระบุแหล่งที่มาของปัญหา

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

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

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

   • ล้างแคชและคุกกี้ในเบราว์เซอร์ของคุณ หากคุณได้เข้าสู่ระบบศูนย์ช่วยเหลือของ Shopify ด้วยบัญชีผู้ใช้ Shopify ของคุณ การล้างแคชและคุกกี้ในเบราว์เซอร์จะเป็นการออกจากระบบบัญชีผู้ใช้ของคุณ หากคุณใช้งานผู้ช่วยเสมือนในศูนย์ช่วยเหลือ การล้างแคชและคุกกี้ในเบราว์เซอร์จะรีเซ็ตประวัติแชทของคุณและจะเป็นการออกจากระบบบัญชีผู้ใช้ของคุณ โดยคุณต้องเริ่มแชทกับผู้ช่วยเสมือนในศูนย์ช่วยเหลือใหม่
   • ลองใช้โหมดไม่ระบุตัวตน อุปกรณ์อื่น หรือแอป Shopify
   • ลองใช้อินเทอร์เน็ตจากมือถือหรือการเชื่อมต่ออินเทอร์เน็ตที่อื่น
   • ตรวจสอบให้แน่ใจว่าเบราว์เซอร์ของคุณเป็นปัจจุบัน
   • ตรวจสอบให้แน่ใจว่าไม่ได้ตั้งค่าเบราว์เซอร์ให้บล็อกคุกกี้ทั้งหมด เนื่องจากบางแอปอาจแสดงผลไม่ถูกต้องหากไม่มีคุกกี้
   • ตรวจสอบให้แน่ใจว่าคุณไม่ได้กำลังใช้งานเครือข่ายส่วนตัวเสมือน (VPN) หรือเปิดใช้งานไฟร์วอลล์ที่บล็อก Shopify อยู่

3. หากคุณยังประสบปัญหาดังกล่าว แม้จะเปลี่ยนไปใช้อุปกรณ์ เบราว์เซอร์ หรือการเชื่อมต่ออินเทอร์เน็ตอื่นแล้ว ปัญหาดังกล่าวอาจไม่ใช่ปัญหาจากฝั่งคุณและไม่สามารถจำลองได้ หากต้องการระบุแหล่งที่มาของปัญหา ให้ลองจำลองปัญหาขึ้นใหม่โดยใช้ธีมอื่น ให้ไปที่ Theme Store และติดตั้งธีมเวอร์ชันใหม่ และทดสอบว่าปัญหายังคงเกิดขึ้นกับธีมเวอร์ชันล่าสุดหรือไม่ การติดตั้งธีมอื่น เช่น ธีมฟรีจาก Shopify ถือเป็นแนวทางปฏิบัติที่ดีเช่นกัน ซึ่งจะช่วยระบุได้ว่าปัญหาเกิดขึ้นเฉพาะกับธีมนั้นหรือส่งผลกระทบต่อธีมทั้งหมด หลังจากทดลองธีมอื่นๆ แล้ว ขั้นตอนต่อไปที่จะต้องทำจะแตกต่างกันไป ขึ้นอยู่กับลักษณะของปัญหา:

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

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

การแสดงรูปภาพคลาดเคลื่อน

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

• ในกรณีที่ส่วนหัวแสดงกว้างกว่าบนเดสก์ท็อปและรูปภาพโลโก้แสดงเล็กกว่าที่คาดไว้บนมือถือ อาจเกิดจากพื้นที่ว่างในไฟล์ภาพโลโก้ แก้ไขไฟล์รูปภาพเพื่อให้แน่ใจว่าครอบตัดรอบโลโก้และไม่มีพื้นที่ว่าง
• หากรูปภาพสไลด์โชว์ของคุณถูกครอบตัด นั่นเป็นเพราะเหตุผลด้านการออกแบบที่จะทำให้รูปภาพดูเหมือนกันทั้งบนมือถือและบนเดสก์ท็อป เนื่องจากเนื้อหาจะแสดงบนหน้าจอมือถือขนาดเล็กมาก จึงมีรายละเอียดมากมายที่อาจสูญหายไปจากการย่อขนาดเนื้อหา แต่เนื้อหาจะถูกครอบตัดเพื่อให้แน่ใจว่ารายละเอียดจะไม่สูญหาย รูปภาพแนวตั้งซึ่งมีความสูงมากกว่าความกว้างอาจใช้พื้นที่บนเดสก์ท็อปได้มากเช่นกัน จึงเป็นเหตุผลให้รูปภาพสไลด์โชว์มีความสูงสูงสุด คุณสามารถเพิ่มจุดโฟกัสให้กับรูปภาพสไลด์โชว์เพื่อให้แน่ใจว่าจุดโฟกัสจะอยู่ที่จุดศูนย์กลางของรูปภาพสไลด์โชว์เสมอ หากการเพิ่มจุดโฟกัสไม่ได้ผล คุณสามารถลองค้นหารูปภาพที่ใช้ได้กับขนาดหน้าจอทุกขนาด ดูข้อมูลเพิ่มเติมเกี่ยวกับหลักปฏิบัติที่ดีที่สุดสำหรับรูปภาพสไลด์โชว์
• หากรูปภาพ GIF แสดงไม่ถูกต้องและถูกเพิ่มไปยังหน้าร้านของคุณด้วยตัวเครื่องมือแก้ไข Rich Text เช่น ในคำอธิบายสินค้าหรือบล็อกโพสต์ สาเหตุอาจเกิดจากขนาดของรูปภาพ คุณสามารถแก้ไขได้โดยคลิก GIF ในเครื่องมือแก้ไข Rich Text จากนั้นคลิกแก้ไขรูปภาพ ในเมนูดรอปดาวน์ขนาดรูปภาพ ให้เลือกต้นฉบับ คุณสามารถปรับขนาด GIF ได้โดยคลิกและลากมุมของรูปภาพเข้าด้านในเพื่อลดขนาดหรือลากออกด้านนอกเพื่อเพิ่มขนาด
• หากสีของรูปภาพบนหน้าร้านของคุณแตกต่างจากรูปภาพต้นฉบับอย่างเห็นได้ชัด เป็นไปได้ว่ารูปภาพเหล่านั้นไม่ได้เป็นไปตามมาตรฐานสีแดง เขียว น้ำเงิน (sRBG) หากต้องการแก้ไขการเปลี่ยนสีนี้ ให้บันทึกไฟล์ของคุณในแอปพลิเคชันแก้ไขรูปภาพเป็น sRBG คำศัพท์ทั่วไปในการดำเนินการนี้คือ "Web optimize", "Adjust image for Web" หรือ "Save for Web" ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรไฟล์สี
• หากรูปภาพสินค้าในหน้าคอลเลกชันของคุณไม่ตรงกัน คุณอาจจำเป็นต้องปรับอัตราส่วนภาพในไฟล์รูปภาพสินค้าให้มีอัตราส่วนความสูงต่อความกว้างเท่ากัน จากนั้นอัปโหลดรูปภาพสินค้าอีกครั้ง คุณยังสามารถใช้แอปแก้ไขรูปภาพจาก Shopify App Store ได้อีกด้วย

สินค้าหรือคอลเลกชันแสดงไม่ถูกต้อง

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

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

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

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

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

เนื้อหาที่แปลแล้วแสดงไม่ถูกต้อง

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

คุณสามารถใช้สถานะต่อไปนี้กับเนื้อหาที่แปลแล้วได้:

• แปลแล้ว: เนื้อหามีคำแปล
• ล้าสมัย: เนื้อหาในภาษาเริ่มต้นมีการอัปเดต แต่คำแปลอาจจะยังไม่ได้อัปเดตตาม
• ไม่ได้แปล: ไม่มีคำแปลของเนื้อหาประเภทนี้

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

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

การอัปเดตในตัวแก้ไขธีมไม่แสดงบนหน้าร้าน

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดบริบทของร้านค้า

เครื่องมือแก้ไข Rich Text

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

ตรวจสอบโค้ด HTML

คุณสามารถตรวจสอบโค้ด HTML ในเครื่องมือแก้ไข Rich Text ได้

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

1. ไปที่หน้าในผู้ดูแลระบบของคุณ
2. คลิกปุ่ม</>แสดง HTML เพื่อตรวจสอบโค้ด HTML
3. ค้นหาและลบโค้ด HTML ที่อาจทำให้เกิดปัญหาในการแสดงผล
4. คลิกที่ “บันทึก”

ล้างการจัดรูปแบบ

คุณสามารถไฮไลต์ข้อความบางส่วนและล้างการจัดรูปแบบ HTML ได้

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

1. ไปที่หน้าในผู้ดูแลระบบของคุณ
2. ไฮไลต์ข้อความที่มีปัญหาด้านการจัดรูปแบบ
3. คลิกปุ่ม 🚫
4. คลิกที่ “บันทึก”

ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือแก้ไข Rich Text

หน้านี้กำลังเปลี่ยนเส้นทางไปยัง URL ที่ไม่สนับสนุน

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

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

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

ข้อความแจ้งข้อผิดพลาดของโค้ด

หากมีข้อผิดพลาดทางไวยากรณ์ในโค้ดธีมของคุณ ข้อความเตือน HTML error found หรือ Theme error จะแสดงในตัวแก้ไขธีมของคุณ ข้อความแจ้งข้อผิดพลาดจะแสดงไฟล์ Liquid ที่มีข้อผิดพลาด

ข้อความแจ้งข้อผิดพลาด The theme you're looking for couldn't be found อาจแสดงเมื่อมี HTML ที่ใช้งานไม่ได้ อาจไม่สามารถโหลดหน้าได้ในตัวแก้ไขธีมด้วยเหตุผลหลายประการ เช่นเหตุผลดังต่อไปนี้

• ปัญหาการเชื่อมต่อเครือข่าย
• รหัส Liquid ในธีมของคุณไม่ถูกต้อง

คุณสามารถค้นหาการเปลี่ยนแปลงโค้ดธีมของคุณและแก้ไขโค้ด หรือเปลี่ยนไฟล์กลับเป็นไฟล์ก่อนหน้าการเปลี่ยนแปลงโค้ด

ขั้นตอน

1. คลิกไฟล์ส่วน .liquid ที่มีลิงก์ในข้อความแจ้งข้อผิดพลาดหรือตรวจสอบไฟล์เพื่อดูการเปลี่ยนแปลงล่าสุด การดำเนินการนี้จะนำคุณไปที่หน้าแก้ไข HTML/CSS จากนั้นไฟล์จะเปิดขึ้นในตัวแก้ไขโค้ด

2. ดูโค้ดในไฟล์แล้วลองค้นหา HTML หรือ Liquid ที่ไม่ถูกต้อง เครื่องมือแก้ไขโค้ดจะแสดงข้อผิดพลาดทางรูปแบบภาษาเป็นสีแดง ปัญหาทั่วไปมีดังต่อไปนี้

   • แท็กปิด HTML ที่เกินมา เช่น การปิด </div> โดยไม่เปิด <div>
   • แท็ก HTML ที่ไม่ได้ปิดที่เกินมา เช่น การเปิด <div> โดยไม่ปิด </div>
   • แท็ก HTML ที่มีรูปแบบผิดปกติ เช่น <div class="my-class" โดยไม่มี >
   • โค้ด Liquid ที่มีรูปแบบผิดปกติ
   • HTML ที่ใช้งานไม่ได้ในไฟล์ส่วนย่อยของธีมที่รวมไว้

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

4. คลิกที่ “บันทึก”

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

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