ร้านค้าทํางานอย่างถูกต้องบนมือถือเมื่อผู้เยี่ยมชมสามารถค้นพบผลิตภัณฑ์ เลือกรุ่น หยิบลงตะกร้า และเข้าถึงการชําระเงินโดยไม่ต้องซูม ลังเล หรือพบองค์ประกอบที่บล็อก ดังนั้นการแสดงตัวอย่างหน้าแรกอย่างง่าย ๆ จึงไม่เพียงพอ
คู่มือที่เขียนโดย SiteQuiVend ผู้เชี่ยวชาญด้านการสร้างและออกแบบเว็บไซต์และร้านค้า Shopify ใหม่ ข้อมูลอัปเดตในเดือนสิงหาคม 2569
ร้านค้าที่ใช้งานได้จริงบนมือถือคืออะไร?
ไซต์ที่ตอบสนองสามารถปรับให้เข้ากับความกว้างของหน้าจอในขณะที่ยังคงใช้งานยาก การควบคุมต้องครอบคลุมมิติเสริมสี่มิติ
แสดง
ไม่มีการตัดข้อความ, การทับซ้อน, ภาพบิดเบี้ยว, หรือเนื้อหาที่มีขนาดใหญ่กว่าหน้าจอ
ปฏิสัมพันธ์
เมนู ฟิลเตอร์ รูปแบบ หีบเพลง ปุ่ม และแบบฟอร์มตอบสนองต่อการสัมผัส
การเดินทางเชิงพาณิชย์
ราคา ความพร้อมใช้งาน การจัดส่ง และการดําเนินการต่อไปนี้ยังคงเป็นที่เข้าใจได้
ประสิทธิภาพ
เนื้อหาหลักจะปรากฏขึ้นโดยไม่ต้องรอมากเกินไปหรือการเคลื่อนไหวที่คาดเดาไม่ได้
Google ใช้เนื้อหาเวอร์ชันมือถือสําหรับการรวบรวมข้อมูลและการจัดทําดัชนี ดังนั้นข้อมูลสําคัญ ชื่อ รูปภาพสําคัญ และข้อมูลที่มีโครงสร้างไม่ควรหายไปบนหน้าจอขนาดเล็ก
1 รวมสามระดับของการตรวจสอบ
การจําลองที่ 375 พิกเซล
สปอตล้น ตารางคงที่ และปุ่มตําแหน่งไม่ดี ฐานที่ทําซ้ําได้นี้ไม่ใช่อุปกรณ์จริง
อุปกรณ์จริง
iPhone และ Android เปิดเผยพฤติกรรมของแป้นพิมพ์ ท่าทาง และหน้าต่างเนทีฟ
ข้อมูลการใช้งาน
รายงาน Shopify แยกแยะอุปกรณ์เคลื่อนที่และเดสก์ท็อปสําหรับการโหลด การโต้ตอบ และความเสถียร
ข้อเสนอแนะที่เป็นรูปธรรม
คําถามและการละทิ้งของลูกค้าสามารถส่งสัญญาณถึงความขัดแย้งในการสืบพันธุ์ได้
2 ทําตามเส้นทางการทดสอบที่เหมือนกับการทดสอบแต่ละครั้ง
ใช้หน้าต่างส่วนตัวเพื่อ จํากัด อิทธิพลของแคชและเซสชันก่อนหน้า หมายเหตุอุปกรณ์เบราว์เซอร์การเชื่อมต่อ URL และเวลาที่เกิดข้อผิดพลาด
- เปิดหน้าแรกและอาจปิดแบนเนอร์คุกกี้
- เปิดแล้วปิดเมนู ค้นหา และภาษาหรือตัวเลือกประเทศ
- เข้าถึงคอลเลกชัน เปลี่ยนการเรียงลําดับ และใช้ตัวกรอง
- เปิดผลิตภัณฑ์ เรียกดูรูปภาพ และเลือกแต่ละรูปแบบ
- ทําให้เกิดข้อผิดพลาดโดยสมัครใจ: ตัวแปรไม่พร้อมใช้งานหรือฟิลด์บังคับว่างเปล่า
- หยิบลงตะกร้า เปลี่ยนจํานวน ลบ แล้วเพิ่มอีกครั้ง
- เข้าถึงชําระเงินโดยไม่ต้องสรุปคําสั่งซื้อและควบคุมช่องที่มองเห็นได้
- ย้อนกลับ: ตะกร้าและตัวเลือกจะต้องสอดคล้องกัน
3 ใช้เมทริกซ์ควบคุมแบบเคลื่อนที่
จําแนกข้อบกพร่องตามผลกระทบ องค์ประกอบความงามรองไม่ได้มีความสําคัญเช่นเดียวกับตะกร้าที่ไม่สามารถเข้าถึงได้
| พื้นที่ | ทดสอบ | ข้อบกพร่องบ่อยครั้ง | ลําดับความสําคัญ |
|---|---|---|---|
| ส่วนหัว | เมนู ค้นหา ปิด | หน้าต่างไม่สามารถปิดได้ | การปิดกั้น |
| คอลเลคชั่น | การเรียงลําดับ, ตัวกรอง, แผนที่ | ตัวกรองนอกหน้าจอ | สูง |
| ผลิตภัณฑ์ | แกลเลอรี่ รูปแบบ เพิ่มเติม | ปุ่มที่ซ่อนอยู่หรือสถานะที่ไม่สอดคล้องกัน | การปิดกั้น |
| ตะกร้า | จํานวน การลบ รวม | ไม่สามารถเข้าถึงทั้งหมดหรือการกระทําได้ | การปิดกั้น |
| เนื้อหา | ข้อความ รูปภาพ ตาราง | การเลื่อนแนวนอน | ปานกลางถึงสูง |
4 ตรวจสอบความสามารถในการอ่านและการโต้ตอบสัมผัส
- ข้อความ: ควรอ่านโดยไม่ต้องซูม รวมถึงราคาและข้อผิดพลาด
- โซนสัมผัส: เว้นวรรคปุ่มเพื่อหลีกเลี่ยงการกดโดยไม่ได้ตั้งใจ
- ความเปรียบต่าง: ควบคุมลิงก์ ปุ่ม และข้อความบนรูปภาพ
- องค์ประกอบคงที่: ที่คาดผมแชทและความยินยอมไม่ควรบุกรุกหน้าจอ
- คีย์บอร์ด: ฟิลด์ที่ใช้งานอยู่และการดําเนินการต่อไปนี้ยังคงสามารถเข้าถึงได้
- ปฐมนิเทศ: ตรวจจับบล็อกที่รักษาความกว้างคงที่
การทดสอบ "นิ้วหัวแม่มือ" นั้นง่าย: ถือโทรศัพท์ด้วยมือข้างเดียวและดําเนินการหลัก หากคุณต้องการเล็งอย่างแม่นยําให้ย้ายหน้าต่างหรือซูมอินเทอร์เฟซสมควรได้รับการแก้ไข
5 ทดสอบแผ่นผลิตภัณฑ์ตะกร้าและการชําระเงิน
อย่า จํากัด ตัวเองให้ผลิตภัณฑ์ที่เรียบง่าย ยังเลือกรายการที่มีหลายรูปแบบผลิตภัณฑ์ที่ไม่พร้อมใช้งานและหากร้านค้าอนุญาตส่วนลดหรือการจัดส่งโดยเฉพาะ
แผ่นผลิตภัณฑ์
ราคาตัวแปรหุ้นปริมาณสื่อคําอธิบายและปุ่มจะต้องอยู่ในการซิงค์ การเปลี่ยนแปลงตัวแปรแต่ละครั้งจะต้องอัปเดตสถานะที่คาดหวัง
ตะกร้า
ตรวจสอบหน้าลิ้นชักและตะกร้าสินค้า ปริมาณ การลบ เกณฑ์ที่ประกาศ รหัสส่วนลดหากคาดไว้ และทั้งหมด
แบบฟอร์ม
คีย์บอร์ดที่ดีควรเปิดสําหรับอีเมล โทรศัพท์ และหมายเลข ข้อผิดพลาดควรอธิบายวิธีแก้ไขฟิลด์ให้ชัดเจน
การชําระเงิน
ควบคุมการเข้าถึง หมายถึงที่นําเสนอ ข้อมูลการจัดส่ง และเหตุการณ์ย้อนหลัง ให้สั่งซื้อจริงเฉพาะในกรณีที่ขั้นตอนการทดสอบของคุณต้องการเท่านั้น
หากต้องการปรับปรุงจุดที่ตรวจพบ โปรดดูคําแนะนําของเราที่ shopify Store ประสบการณ์มือถือ และอันที่อุทิศให้ ลดความซับซ้อนของเส้นทางการซื้อ.
6 ควบคุมความเร็วโดยไม่ทําให้วัดและรู้สึกสับสน
ทดสอบการเข้าชมครั้งแรกด้วยแคชที่ว่างเปล่าและการเชื่อมต่อที่ไม่เอื้ออํานวยกว่า Wi-Fi มืออาชีพของคุณ สังเกตพฤติกรรมก่อนดูบันทึก
- กําลังโหลด: เนื้อหาหลักและภาพผลิตภัณฑ์ปรากฏอย่างรวดเร็วหรือไม่?
- การโต้ตอบ: เมนูหรือปุ่มตอบสนองเมื่อสัมผัสหรือไม่?
- ความมั่นคง: หน้าเพจจะเคลื่อนไหวเมื่อมีรูปภาพ แบบอักษร หรือแอปมาถึงหรือไม่?
- ความต่อเนื่อง: การเปลี่ยนคอลเลกชัน-ผลิตภัณฑ์-ตะกร้าสินค้ายังคงสามารถเข้าใจได้ในเครือข่ายที่ช้าหรือไม่?
ตารางประสิทธิภาพเว็บของ Shopify ติดตาม Core Web Vitals ในการเข้าชมจริงและช่วยแยกแยะอุปกรณ์พกพาและเดสก์ท็อป การวัดในห้องปฏิบัติการช่วยในการวินิจฉัยในขณะที่ข้อมูลภาคสนามสะท้อนถึงอุปกรณ์และเครือข่ายที่ใช้งานจริง
หากปัญหากําลังรออยู่ ให้ตรวจสอบด้วย สาเหตุที่ทําให้ร้าน Shopify ช้า.
7 ทดสอบหลายบริบท ไม่ใช่แค่หลาย ๆ ความกว้าง
ไอโฟนและแอนดรอยด์
ทดสอบ Safari บน iPhone และ Chrome บน Android
Wi-Fi และเครือข่ายมือถือ
การเชื่อมต่อที่ไม่เสถียรสามารถเผยให้เห็นแรงเสียดทานที่มองไม่เห็นในสํานักงาน
ผู้เยี่ยมชมใหม่และเป็นที่รู้จัก
เปรียบเทียบหน้าต่างส่วนตัว ลูกค้าที่เชื่อมต่อ และตะกร้าที่กรอกแล้ว
หลังจากการเปลี่ยนแปลงแต่ละครั้ง
ทําซ้ําการตรวจสอบหลังจากแอปพลิเคชัน ธีม หรือรหัสใหม่
Shopify ยังแนะนําให้ตรวจสอบอุปกรณ์หรือเบราว์เซอร์สําหรับปัญหาในเครื่องก่อนที่จะกําหนดค่าเริ่มต้นให้กับธีมโดยอัตโนมัติ ทําซ้ําบนอุปกรณ์เครื่องที่สองและจดบันทึกสิ่งที่เปลี่ยนแปลง
คุณควรเลือกบริการ SiteQuiVend ใด?
คําแนะนําที่เป็นรูปธรรมสามประการเพื่อระบุลําดับความสําคัญ ไม่ได้แทนที่สูตรการทํางานที่ละเอียดถี่ถ้วนหรือการตรวจสอบที่สมบูรณ์
3 คําของ่ายๆภายในขีด จํากัด ของหนึ่งชั่วโมงโดยมีการประกาศการตอบสนองครั้งแรกภายใน 48 ถึง 72 ชั่วโมงการทํางาน การแก้ไขที่ซับซ้อนอยู่นอกขอบเขตนี้
5 หน้าหรือรุ่น สูงสุด 10 ผลิตภัณฑ์และ 3 คอลเลกชัน โดยมีกําหนดเวลา 5 ถึง 7 วันทําการหลังจากได้รับองค์ประกอบที่จําเป็น
การทดสอบหลายอุปกรณ์อย่างกว้างขวาง การพัฒนาพิเศษ และการกู้คืนทางเทคนิคที่สําคัญ จําเป็นต้องมีขอบเขตที่เหมาะสม
รายการตรวจสอบการตรวจสอบมือถือ Shopify
การควบคุมที่จําเป็น 16 ประการ
- ทดสอบที่บ้านที่ 375 px
- ไม่มีการเลื่อนแนวนอน
- เมนูและค้นหาปิด
- แบนเนอร์คุกกี้ที่ไม่ปิดกั้น
- ตัวกรองการทํางานและการเรียงลําดับ
- รูปภาพและแกลเลอรี่แบบสัมผัส
- ตัวแปรที่อัปเดตอย่างถูกต้อง
- เพิ่มปุ่ม เข้าถึงได้เสมอ
- ข้อความแสดงข้อผิดพลาดที่เข้าใจได้
- ปริมาณและการลบที่ทดสอบ
- รวมตะกร้าสม่ําเสมอ
- สามารถเริ่มการชําระเงินได้
- คีย์บอร์ดไม่ปิดบังการกระทํา
- ทําการทดสอบซาฟารีและโครเมียม
- ทดสอบบนเครือข่ายมือถือดําเนินการ
- การจับและขั้นตอนของข้อบกพร่องที่เก็บไว้
คําถามที่พบบ่อย: ตรวจสอบร้านค้า Shopify บนมือถือ
ตัวอย่างมือถือ Shopify เพียงพอหรือไม่?
ไม่ ช่วยควบคุมเลย์เอาต์ แต่จําเป็นต้องมีอุปกรณ์จริงเพื่อทดสอบการสัมผัส คีย์บอร์ด เบราว์เซอร์ หน้าต่างเนทีฟ และสภาพเครือข่าย
ทําไมต้องทดสอบอย่างแม่นยําที่ 375 px?
ความกว้างนี้เป็นพื้นฐานในทางปฏิบัติและทั่วไปสําหรับการระบุข้อบกพร่องที่ตอบสนอง มันไม่ได้แทนที่ความกว้างหรืออุปกรณ์อื่น ๆ ที่ผู้เยี่ยมชมของคุณใช้จริง
หน้าใดควรได้รับการทดสอบเป็นลําดับความสําคัญ?
ทดสอบการต้อนรับคอลเลกชันแผ่นผลิตภัณฑ์ที่มีรูปแบบตะกร้าและเริ่มการชําระเงิน จากนั้นเพิ่มการค้นหาบัญชีลูกค้าและหน้าเฉพาะสําหรับกิจกรรมของคุณ
ฉันจําเป็นต้องสั่งซื้อจริงหรือไม่?
ไม่เป็นระบบ คุณสามารถควบคุมการเดินทางไปชําระเงินโดยไม่ต้องตรวจสอบ คําสั่งทดสอบที่สมบูรณ์ต้องปฏิบัติตามขั้นตอนที่วางแผนไว้เพื่อหลีกเลี่ยงการทําธุรกรรมหรือหุ้นที่ไม่ถูกต้อง
วิธีการมองเห็นน้ําล้นในแนวนอน?
เลื่อนในแนวตั้งจากนั้นลองท่าทางด้านข้างเล็กน้อย ตารางรูปภาพ URL ยาวแผนที่และบล็อกความกว้างคงที่เป็นสาเหตุทั่วไป
เบราว์เซอร์มือถือใดที่คุณควรตรวจสอบ?
เริ่มต้นด้วย Safari บน iPhone และ Chrome บน Android จากนั้นเพิ่มอุปกรณ์และเบราว์เซอร์ส่วนใหญ่ที่ระบุโดยสถิติของคุณ
เมื่อใดควรทําการทดสอบมือถือซ้ํา?
หลังจากการเปลี่ยนแปลงธีม การติดตั้งหรือลบแอป การเปลี่ยนรถเข็น แคมเปญหลัก และก่อนการเปิดตัวครั้งสําคัญแต่ละครั้ง
คะแนนความเร็วที่ดีทําให้แน่ใจได้ว่าร้านค้าใช้งานได้หรือไม่?
ไม่ หมายเหตุทางเทคนิคไม่ได้ตรวจสอบตัวแปรแบบฟอร์มหรือตะกร้า มันจะต้องเสริมด้วยเส้นทางด้วยตนเองและข้อมูลจริง
การอ้างอิงอย่างเป็นทางการ: ภาพรวมมือถือ Shopify และประสิทธิภาพของเว็บ, การแก้ไขปัญหาธีม Shopify และ แนวทางปฏิบัติที่ดีที่สุดของ Google Mobile.
