แต่งและเผยแพร่หน้าร้านด้วย Storefront Studio
แก้ธีม Layout และเนื้อหาจากพื้นที่พรีวิว ตรวจทั้ง Desktop และ Mobile แล้วเผยแพร่ Draft ให้เป็นหน้าร้านจริงอย่างปลอดภัย
1. แยก Draft ออกจากหน้าร้านที่เผยแพร่แล้ว
Storefront Studio แก้ไข Draft หรือแบบร่าง ส่วนลูกค้าที่เปิดหน้าร้านจริงจะเห็น Published version หรือเวอร์ชันที่เผยแพร่ล่าสุด การเห็นความเปลี่ยนแปลงในพรีวิวจึงไม่ได้หมายความว่าลูกค้าเห็นแล้ว
ก่อนเริ่มแก้
- มีสิทธิ์แก้ไข Storefront Draftจำเป็น
- มีสินค้าและหมวดหมู่สำหรับตรวจในพรีวิว
- เตรียมข้อความ สี โลโก้ และไฟล์รูปที่จะใช้
- ทราบว่าการเผยแพร่จะเปลี่ยนสิ่งที่ลูกค้าเห็นจำเป็น
อย่าเผยแพร่ระหว่างแก้ไม่เสร็จ
2. เลือกหน้าและพื้นที่ที่ต้องการแก้
- 1
เปิดเมนูตั้งค่าหน้าร้าน
เลือกเมนูหน้าร้านจากแถบหลังร้าน ระบบจะเปิด Studio พร้อม toolbar และพรีวิวของ Draft ปัจจุบัน
- 2
เลือกหน้าจากตัวเลือกหน้า
เลือกหน้าแรก รายการสินค้า รายละเอียดสินค้า เติมเครดิต ประวัติออเดอร์ หรือหน้าบัญชีตามส่วนที่ต้องการตรวจ ชื่อหน้าบน toolbar ต้องเปลี่ยนตรงกับที่เลือก
- 3
กดพื้นที่ที่แก้ไขได้ในพรีวิว
เลื่อนพรีวิวแล้วกดบริเวณที่มีสถานะแก้ไขได้ เช่น Navbar, Hero, การ์ดหมวดหมู่ หรือ Footer ระบบจะเปิดแผงตั้งค่าของพื้นที่นั้น
- 4
ตรวจชื่อหน้าและชื่อพื้นที่บนแผง
ก่อนเปลี่ยนค่า ให้ตรวจว่าหัวแผงตรงกับส่วนที่กด ปิดแผงแล้วเลือกใหม่หากเปิดผิดพื้นที่เพื่อไม่ให้แก้ส่วนอื่นโดยไม่ตั้งใจ
ผลที่ควรเห็น: แผงแก้ไขแสดงช่องและตัวเลือกเฉพาะของพื้นที่ที่เลือก และพรีวิวยังคงอยู่ด้านข้าง
3. ปรับธีมและ Layout
- 1
เปิดแผงธีม
เลือกชุดธีมหรือสีหลัก สีเน้น พื้นหลัง และรูปแบบตัวอักษรจากตัวเลือกที่ Studio รองรับ ตรวจข้อความและปุ่มในพรีวิวหลังเปลี่ยนทุกครั้ง
- 2
เลือก Layout ของพื้นที่
ในพื้นที่ที่มีหลายรูปแบบ ให้เปิดตัวเลือก Layout แล้วเลือกการ์ดตัวอย่างที่เหมาะกับจำนวนข้อความและสินค้า ข้อมูลเดิมจะถูกนำไปวางในโครงใหม่
- 3
ตรวจความอ่านง่ายของสี
ดูหัวข้อ เนื้อหา ปุ่ม ลิงก์ ราคา และสถานะทั้งพื้นหลังสว่างและมืด หลีกเลี่ยงคู่สีที่ตัวอักษรกลืนกับพื้นหลัง
- 4
รอ Autosave หลังเปลี่ยนค่า
สังเกตสถานะบันทึกบน toolbar อย่าเปลี่ยนหน้า ปิดแท็บ หรือกดเผยแพร่ขณะที่ระบบยังบันทึกหรือแจ้งข้อผิดพลาด
ผลที่ควรเห็น: สถานะบันทึกกลับเป็นเรียบร้อยและค่าที่เลือกยังอยู่เมื่อสลับไปหน้าอื่นแล้วกลับมา
4. แก้ข้อความ รูป และส่วนประกอบ
- 1
แก้ข้อความตามช่องที่แผงเปิดให้
พิมพ์หัวข้อ คำอธิบาย ป้ายปุ่ม หรือประกาศให้สั้นและชัด ตรวจจำนวนตัวอักษรและข้อความ validation ก่อนปิดแผง
- อ
อัปโหลดโลโก้หรือรูปประกอบทางเลือก
เลือกไฟล์ตามขนาดและสัดส่วนที่แผงแนะนำ ตรวจพื้นที่ครอปและพรีวิวหลังอัปโหลด รอจนการอัปโหลดเสร็จก่อนทำรายการอื่น
- อ
จัดลำดับรายการแบบเลื่อนหรือการ์ดทางเลือก
เพิ่ม ลบ หรือเรียง slide, action หรือส่วนประกอบที่แผงรองรับ ตรวจว่าทุกรายการมีข้อความและปลายทางลิงก์ครบ
- 4
ตรวจสถานะบันทึกอีกครั้ง
ปิดแผงแล้วเปิดใหม่เพื่อยืนยันว่าข้อความและไฟล์ยังอยู่ หากระบบแจ้งบันทึกล้มเหลวให้คงหน้าไว้และลองใหม่ก่อนเผยแพร่
ผลที่ควรเห็น: พรีวิวแสดงเนื้อหาใหม่และ Studio ระบุว่า Draft บันทึกเรียบร้อย
5. ตรวจ Desktop, Mobile และเผยแพร่
- 1
สลับพรีวิวเป็น Desktop
ตรวจความกว้างของเนื้อหา เมนู การ์ดหลายคอลัมน์ รูปที่ครอป และข้อความที่อาจล้นขอบ คลิกไปยังหน้าสำคัญอย่างน้อยหน้าแรกและสินค้า
- 2
สลับพรีวิวเป็น Mobile
ตรวจ Navbar, ปุ่มด้านล่าง การเลื่อนรายการ ขนาดข้อความ และพื้นที่กด โดยเฉพาะ Hero และการ์ดที่เปลี่ยนจากหลายคอลัมน์เป็นคอลัมน์เดียว
- 3
รอให้ Autosave เสร็จ
ตรวจ toolbar ว่าไม่มีงานบันทึกค้างหรือข้อความผิดพลาด หากเพิ่งอัปโหลดไฟล์ให้รอจนพรีวิวโหลดภาพใหม่ครบ
- 4
กดเผยแพร่และอ่านกล่องยืนยัน
กด Publish หรือเผยแพร่ ตรวจชื่อร้านและข้อความผลกระทบ แล้วกดยืนยันเมื่อพร้อมให้ลูกค้าเห็น Draft ชุดนี้
ระวัง
การเผยแพร่มีผลกับหน้าร้านจริงทันที อย่าใช้ปุ่มนี้เป็นวิธีบันทึก Draft และอย่าเผยแพร่เพียงเพื่อทดสอบว่าสีหรือข้อความถูกหรือไม่ - 5
เปิดหน้าร้านจริงในแท็บใหม่
หลังข้อความสำเร็จ เปิด URL หน้าร้านจริง รีเฟรชหนึ่งครั้ง และตรวจจุดที่แก้ทั้ง Desktop และ Mobile โดยไม่อาศัยพรีวิว
ผลที่ควรเห็น: หน้าร้านจริงแสดงธีม Layout และเนื้อหาเดียวกับ Draft ที่เพิ่งเผยแพร่
ตรวจครั้งสุดท้ายก่อนถือว่างานเสร็จ
- Autosave เสร็จโดยไม่มีข้อผิดพลาดจำเป็น
- Desktop ไม่มีข้อความหรือรูปผิดสัดส่วนจำเป็น
- Mobile อ่านและกดปุ่มสำคัญได้จำเป็น
- เผยแพร่สำเร็จและตรวจจาก URL หน้าร้านจริงแล้วจำเป็น
แก้ปัญหาที่พบบ่อย
กดพื้นที่ในพรีวิวแล้วแก้ไม่ได้
ตรวจว่าบัญชีมีสิทธิ์ edit_storefront_draft เลือกหน้าถูกหน้า และกดพื้นที่ที่ Studio รองรับ หากแพ็กเกจถูกล็อกให้จัดการแพ็กเกจก่อน
สถานะ Autosave ค้างหรือบันทึกไม่สำเร็จ
อย่าปิดหน้า ตรวจการเชื่อมต่ออินเทอร์เน็ต รอให้งานอัปโหลดเสร็จ แล้วลองแก้ค่าเล็กน้อยหรือกดบันทึกซ้ำตามปุ่มที่หน้าแสดง
อัปโหลดรูปแล้วไม่แสดง
ตรวจชนิดไฟล์ ขนาด และสัดส่วนตามคำแนะนำ รอการอัปโหลดจนเสร็จ หากมีข้อความผิดพลาดให้เลือกไฟล์ใหม่แทนการเผยแพร่ทันที
พรีวิวเปลี่ยนแต่หน้าร้านจริงไม่เปลี่ยน
ตรวจว่าได้กดเผยแพร่หลัง Autosave แล้ว เปิด URL ร้านจริงแทน URL Studio และรีเฟรชหน้า หากยังไม่ตรงให้กลับมาตรวจสถานะ Draft/Published
Mobile มีข้อความล้นหรือปุ่มกดไม่ได้
กลับ Studio ลดความยาวข้อความ เปลี่ยน Layout หรือรูปให้เหมาะกับจอแคบ ตรวจพรีวิว Mobile แล้วเผยแพร่เวอร์ชันแก้ไขใหม่