แก้หน้าเว็บ

มีสองทางที่แก้หน้าเว็บได้ ใช้ทางไหนก็ได้ ผลเหมือนกัน

แก้ตรงจุดบนหน้าร้าน

เปิดโหมดแก้

1. เข้าหลังบ้านให้เรียบร้อยก่อน (/admin)
2. กด เปิดหน้าร้าน ↗ ที่ล่างสุดของเมนูซ้าย
3. จะเห็นปุ่ม ✏ แก้ข้อความ ลอยอยู่มุมขวาล่าง — กดเพื่อเปิดโหมด

จะเห็นอะไรเมื่อเปิดโหมดแล้ว

• ข้อความที่แก้ได้ทุกชิ้นจะมี กรอบเส้นประ ล้อมไว้
• เอาเมาส์ชี้ที่ข้อความไหน จะมี ไอคอนดินสอ โผล่ขึ้นมา
• ตรงส่วนที่มีของให้จัดเป็นชุด จะมีปุ่มของตัวเอง เช่น ✏ จัดการสไลด์ ที่แบนเนอร์ และ ✏ ตั้งค่าระดับสมาชิก ที่แถบสมาชิก

ลูกค้าไม่เห็นอะไรเลย ระบบส่งโหมดนี้ให้เฉพาะคนที่ล็อกอินหลังบ้านอยู่ โหมดจะยังเปิดค้างไว้แม้เปลี่ยนหน้า จนกว่าจะกดปิด

แก้ทีละจุด

1. กดไอคอนดินสอ → กล่องแก้ไขเด้งขึ้นมา
2. แก้ข้อความในช่อง
3. กด บันทึก → ข้อความบนหน้าเปลี่ยนทันที ไม่ต้องรีเฟรช

บางจุดมีหลายช่องในกล่องเดียว เช่นปุ่มจะมีทั้ง ข้อความบนปุ่ม และ ลิงก์ปลายทาง

แก้อะไรได้บ้างจากหน้าร้าน

เปลี่ยนไอคอนแถบจุดขาย

แถบ 4 ช่องใต้แบนเนอร์ (เช่น "ส่งไวทุกวัน" "ตรวจก่อนส่งทุกกล่อง") กดดินสอที่ ตัวไอคอน จะได้ตารางไอคอนให้เลือก 20 แบบ กดเลือกแล้วบันทึก

ไอคอนจะเปลี่ยนเป็นสีของร้านให้เองอัตโนมัติ

ตัวแก้ไขข้อความ — ปุ่มบนแถบเครื่องมือ

ช่องข้อความหลายบรรทัดทุกช่อง ทั้งในหลังบ้านและในกล่องแก้ตรงจุด มีแถบปุ่มให้

แทรกรูปในข้อความ

กดปุ่ม รูป → เลือกไฟล์ → รูปจะแทรกลงในข้อความ กดที่รูปในกล่องแก้ไข เพื่อ

• ใส่หรือแก้ คำอธิบายรูป — ช่วยคนตาบอดที่ใช้โปรแกรมอ่านหน้าจอ และช่วยให้ Google เข้าใจรูป
• ปรับ ความกว้าง เป็น % ของเนื้อหา
• เลือก การจัดวาง — อยู่กลาง (ข้อความอยู่บน-ล่าง) หรือชิดซ้าย/ชิดขวา (ข้อความไหลรอบอีกด้าน)

ฝังวิดีโอ

กดปุ่ม วิดีโอ แล้ววางลิงก์ รองรับ 3 ที่

⚠️ ลิงก์ย่อใช้ไม่ได้ เช่น vm.tiktok.com/xxxx ที่ได้จากปุ่มแชร์ในแอป ต้องเป็น ลิงก์เต็ม ที่มีชื่อบัญชีและเลขวิดีโอครบ วิธีเอาลิงก์เต็ม: เปิดวิดีโอในเบราว์เซอร์แล้วก็อปจากแถบที่อยู่

วิดีโอ TikTok และ Instagram จะโหลดตัวเล่นของเจ้าของแพลตฟอร์มตอนที่มีคนเปิดหน้านั้น ถ้าใส่หลายอันในหน้าเดียว หน้าจะโหลดช้าลง ใส่เท่าที่จำเป็น

วางข้อความจากที่อื่น

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

แก้จากหลังบ้าน

แถบประกาศบนสุด

ตั้งค่า › ตั้งค่าร้าน → ช่อง แถบประกาศ เว้นว่าง = ไม่แสดงแถบ

เหมาะกับ "ส่งฟรีเมื่อสั่งครบ 1,500 บาท" หรือ "ปิดรับออเดอร์ 13–16 เม.ย."

เมนูเว็บ

หน้าเว็บ › เมนูเว็บ

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

สิ่งที่ต้องรู้

• เมนูชุดเดียวใช้ทั้งบนจอใหญ่และเมนู ☰ บนมือถือ
• จอใหญ่โชว์ 6 รายการแรก ที่เหลือพับไว้ใต้ "เพิ่มเติม"
• หมวดที่มีหมวดย่อยจะกางเป็นเมนูย่อยให้เอง
• ใส่ได้สูงสุด 30 รายการ
• ปุ่ม กลับเป็นอัตโนมัติ มีให้กดถ้าจัดแล้วไม่ถูกใจ

แบนเนอร์

หน้าเว็บ › แบนเนอร์

แต่ละแบนเนอร์มี หัวข้อ · คำโปรย · ข้อความบนปุ่ม · ลิงก์ปลายทาง

กดที่ภาพในตารางเพื่อเปลี่ยน · เปิด/ปิดแต่ละอันได้โดยไม่ต้องลบ

แกลเลอรี่

หน้าเว็บ › แกลเลอรี่

รูปบรรยากาศหรือรูปลูกค้าใช้จริง แสดงบนหน้าแรก

• เรียงเหมือนที่ลูกค้าเห็น กดที่รูปเพื่อเปลี่ยน
• ลูกศรเลื่อนลำดับ · รูปตา = ซ่อน/แสดง · ถังขยะ = ลบ (กดสองครั้ง)
• รูปแนวตั้ง 600 × 800 จะสวยที่สุด
• เลือกได้หลายรูปพร้อมกัน หรือลากไฟล์มาวาง
• ใส่คำอธิบายรูปด้วย ช่วยผู้พิการทางสายตาและช่วย Google

หน้าเนื้อหา

หน้าเว็บ › หน้าเนื้อหา

ร้านใหม่มีมาให้ 5 หน้า

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

สร้างหน้าใหม่ได้ด้วยปุ่ม + สร้างหน้าใหม่ ตั้งชื่อ ที่อยู่ และเลือกว่าจะให้ขึ้นในฟุตเตอร์ไหม

สีและฟอนต์

หน้าเว็บ › สีและฟอนต์

หน้านี้มี ตัวอย่างสด อยู่บนสุด เปลี่ยนตามที่เลือกด้านล่างทันทีก่อนบันทึก

ชุดสีสำเร็จรูป 6 ชุด

กำหนดสีเอง — เลือก 4 สี ที่เหลือระบบคำนวณให้

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

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

แก้แล้วขึ้นเว็บจริงเลยไหม

ใช่ ทุกอย่างในหน้านี้บันทึกลงร้านจริงทันที ไม่ต้องสั่ง deploy

สิ่งที่ต้อง npm run deploy มีแค่การแก้ไฟล์ wrangler.jsonc (เรื่อง OTP กับ SMS — ดู เปิดร้านให้พร้อมขาย)

อยากลองก่อนขึ้นจริง ทำได้ด้วยการรันร้านในเครื่องตัวเอง ในโฟลเดอร์ร้าน สั่ง npm run setup ครั้งเดียว แล้ว npm run dev จะได้ร้านจำลองที่ http://127.0.0.1:8787 ซึ่งใช้ข้อมูลคนละชุดกับร้านจริง แก้อะไรในนั้นไม่กระทบร้านจริง

ขั้นถัดไป: ปัญหาที่เจอบ่อย