หน้าร้านออนไลน์

หน้าร้านออนไลน์

ลูกค้าทุกคนเปิดร้านของคุณได้ผ่าน nubsatang.com/shop/<slug> ไม่ต้องสมัครสมาชิก ไม่ต้องล็อกอิน เห็นสินค้า เพิ่มเข้าตะกร้า แล้วสั่งได้ทันที

ตั้งค่าหน้าร้านที่ Backoffice > หน้าร้าน (/s/<shopId>/backoffice/shop-page)

ลิงก์หน้าร้านสาธารณะ

ส่วนบนสุดของหน้าตั้งค่า แสดง URL ของร้านพร้อมปุ่ม

• คัดลอก -- copy ลิงก์ไปแชร์
• เปิดดู -- ดูตัวอย่างที่ลูกค้าจะเห็น

ตัวอย่าง: https://nubsatang.com/shop/twentytoys

URL นี้ปลอดภัยจะส่งให้ใคร แชร์ใน social/อีเมล/ป้าย QR ได้เลย

ตั้งชื่อ URL (slug)

ส่วน "ข้อมูลทั่วไป" จะลิงก์ไป ตั้งค่าร้าน -- slug อยู่ตรงนั้น

Free / Standard = ระบบสุ่มให้ แก้ไม่ได้ Pro = ตั้งเองได้ (เช่น twentytoys)

การแสดงผลหน้าร้าน

ส่วน "การแสดงผลหน้าร้าน" ปรับหน้าตาที่ลูกค้าเห็น

Accent color

• สีหลักของหน้าร้าน (ปุ่ม กรอบ highlight)
• กราดิเอนต์ใช้สีนี้ + เฉดอ่อนของมันอัตโนมัติ
• เปิด color picker หรือใส่ hex เอง

จำนวนคอลัมน์

• 1 column -- สินค้าใหญ่ ดูง่าย เหมาะกับมือถือ/สินค้าน้อย
• 2 columns -- เห็นพร้อมกันมากขึ้น เหมาะกับ catalog ใหญ่

ลูกค้าก็เปลี่ยนเองได้ในหน้าร้าน (override session)

แสดงราคา

• เปิด -- ราคาขึ้นใต้สินค้า
• ปิด -- ซ่อนราคา (กรณีอยากให้ลูกค้าทักมาถามก่อน)

แสดงสต็อก

• เปิด -- บอก "เหลือ N ชิ้น"
• ปิด -- ไม่บอก (กันคู่แข่งเช็ค หรือกันลูกค้าเร่งสั่ง)

สินค้าหมดสต็อก

• ซ่อน (hide) -- ไม่แสดงเลย
• แสดงพร้อม badge (show) -- แสดงสินค้าแต่สั่งไม่ได้ มีป้าย "หมด"

Branding

• Free -- ลิงก์มีคำว่า "Powered by NubSatang" ที่ footer
• Standard / Pro -- ไม่มี branding -- ดูเหมือนเว็บของร้านตรง ๆ

หน้าตาที่ลูกค้าเห็น

ลูกค้าเปิด URL จะเห็น:

1. Hero สีตามที่ตั้ง + ชื่อร้าน
2. Search + ตัวเลือก เรียง (ใหม่สุด, ขายดี, ราคา) + Per page
3. Grid สินค้า (1 หรือ 2 คอลัมน์) -- แต่ละ card มีรูป ชื่อ ราคา (ถ้าเปิด) สต็อก (ถ้าเปิด)
4. กดสินค้า -- เปิด modal ดูรายละเอียด + ปุ่ม "ใส่ตะกร้า"
5. ปุ่มตะกร้า ลอยที่มุม -- กดเพื่อ checkout
6. Checkout -- ใส่ชื่อ + เบอร์โทร (หรือใช้ LINE identity ถ้ามาจากบอท)
7. ยืนยัน -- ระบบสร้างออเดอร์ + บอทส่งใบเสร็จ + QR PromptPay หาลูกค้าใน LINE

ลิงก์หน้าตรวจสอบออเดอร์

nubsatang.com/shop/<slug>/track -- ลูกค้าเช็คสถานะออเดอร์โดยใส่ order ID ที่ได้รับจากบอท

Tip

• ตั้ง accent color ให้ตรงโทนแบรนด์ก่อนเปิดให้ลูกค้า (สีเปลี่ยนภาพรวมหน้าทั้งหน้า)
• ทดสอบเปิดหน้าร้านบนมือถือก่อนแชร์ -- ตรวจขนาด ความเร็ว ลูกค้าส่วนใหญ่ใช้มือถือ
• ถ้าสินค้าน้อย ใช้ 1 column สวยกว่า; ถ้าเยอะใช้ 2 column ลูกค้าหาง่ายกว่า
• ปิด แสดงราคา ชั่วคราวถ้าจะปรับราคารวมหลายอัน
• เปิด ซ่อนสินค้าหมด ถ้าไม่อยากให้ลูกค้าเห็นของหมดเยอะ (ดูร้านดูเงียบ)

ลำดับถัดไป

• เพิ่มสินค้า ให้มีของในร้านก่อน
• ดู ระบบพรีออเดอร์ เพื่อเข้าใจ flow ที่ลูกค้าจะผ่าน
• ตั้ง ติดตามการชำระเงิน ให้พร้อมรับสลิป