การตั้งค่าเว็บไซต์

หน้าการตั้งค่า (/backend/settings) เป็นศูนย์กลางการปรับแต่งร้านค้าทั้งหมด แบ่งออกเป็น 14 แท็บ การเปลี่ยนแปลงทั้งหมดมีผลทันทีบนหน้าร้าน

---

แท็บที่ 1: แบรนด์ (Branding)

ควบคุมอัตลักษณ์ภาพของร้านค้า

• ชื่อร้านค้า — ชื่อที่แสดงในแท็บเบราว์เซอร์ อีเมล และหัวข้อต่างๆ
• โลโก้หลัก — อัปโหลดโลโก้สำหรับธีมสีสว่าง
• โลโก้มืด — อัปโหลดโลโก้สำหรับธีมสีมืด (ไม่บังคับ)
• Favicon — ไอคอนขนาดเล็กที่แสดงในแท็บเบราว์เซอร์
• OG Image — รูปภาพที่แสดงเมื่อแชร์ลิงก์บนโซเชียลมีเดีย

วิธีอัปโหลดรูปภาพ: คลิกพื้นที่อัปโหลด เลือกไฟล์ รูปภาพจะถูกอัปโหลดไปยัง Cloudflare R2 โดยอัตโนมัติ

---

แท็บที่ 2: ธีม (Theme)

ควบคุมสีและรูปแบบทั่วไปของเว็บไซต์

• สีหลัก (Primary Color) — สีหลักที่ใช้สำหรับปุ่มและองค์ประกอบหลัก กำหนดในรูปแบบ HSL (เช่น 220 90% 56%)
• สีพื้นหลัง (Background) — สีพื้นหลังของเว็บไซต์
• สีขอบมน (Radius) — ความโค้งมนของขอบปุ่มและการ์ด

คลิก บันทึก หลังจากปรับค่าสี การเปลี่ยนแปลงจะปรากฏบนหน้าร้านทันที

---

แท็บที่ 3: หน้าแรก (Home Page)

ควบคุมเนื้อหาที่แสดงบนหน้าแรกของร้านค้า

• หัวข้อ Hero — ข้อความหัวข้อขนาดใหญ่ในส่วน Hero
• คำอธิบาย Hero — ข้อความรองใต้หัวข้อ
• สินค้าแนะนำ — เลือกสินค้าที่จะแสดงในส่วนสินค้าแนะนำบนหน้าแรก สามารถเพิ่มได้หลายสินค้า

---

แท็บที่ 4: แถบนำทาง (Navbar)

ควบคุมเมนูและแถบนำทางด้านบน

• ตำแหน่งโลโก้ — กำหนดว่าโลโก้อยู่ซ้าย กลาง หรือขวา
• รายการเมนู — เพิ่ม แก้ไข หรือลบรายการเมนูในแถบนำทาง
  • แต่ละรายการมีชื่อและ URL ปลายทาง
  • สามารถสร้างเมนูย่อยได้

---

แท็บที่ 5: ส่วนท้าย (Footer)

ควบคุมเนื้อหาส่วนท้ายของเว็บไซต์

• ลิงก์ส่วนท้าย — เพิ่มลิงก์สำคัญ (เช่น บ้าน ร้านค้า ติดต่อ)
• โซเชียลมีเดีย — ใส่ URL ของบัญชีโซเชียลมีเดียต่างๆ
• ข้อมูลติดต่อ — อีเมล โทรศัพท์ ที่อยู่สำนักงาน

---

แท็บที่ 6: ข้อมูลติดต่อ (Contact)

ตั้งค่าช่องทางการติดต่อของร้านค้า

• อีเมลสนับสนุน — อีเมลที่ลูกค้าสามารถติดต่อได้
• หมายเลขโทรศัพท์ — เบอร์โทรสนับสนุน
• ที่อยู่ — ที่อยู่ธุรกิจ
• LINE ID — ID LINE สำหรับติดต่อ
• Discord — ลิงก์ Discord

---

แท็บที่ 7: LINE

ตั้งค่าการผสานระบบกับ LINE Bot

• LINE Bot ID — รหัสของ LINE Bot ที่ใช้
• LINE Channel Secret — ค่า secret สำหรับยืนยันตัวตน webhook
• LINE Channel Access Token — token สำหรับส่งข้อความผ่าน API
• Webhook URL — URL ที่ LINE ใช้ส่งข้อมูลมายังระบบ

---

แท็บที่ 8: การชำระเงิน (Payment)

ตั้งค่าวิธีการชำระเงินที่รับได้

• รับสลิปการชำระเงิน — เปิด/ปิดการรับชำระด้วยการโอนเงิน
• รับการชำระด้วย Wallet — เปิด/ปิดการชำระด้วยยอด wallet
• QR Code PromptPay — อัปโหลดรูป QR Code สำหรับการโอนเงิน
• ผู้ให้บริการยืนยันสลิป — เลือกระบบที่ใช้ยืนยันสลิป

---

แท็บที่ 9: ป๊อปอัพประกาศ (Popup Announcements)

ตั้งค่าป๊อปอัพที่แสดงเมื่อลูกค้าเข้าเว็บไซต์

• เปิด/ปิดป๊อปอัพ — สลับการแสดงป๊อปอัพ
• รูปภาพป๊อปอัพ — อัปโหลดรูปภาพหลักของป๊อปอัพ
• ลิงก์ — URL ที่ป๊อปอัพจะลิงก์ไปเมื่อคลิก
• ความถี่ — กำหนดว่าป๊อปอัพจะแสดงซ้ำหรือเพียงครั้งเดียวต่อเซสชัน

---

แท็บที่ 10: ปุ่ม CTA (Call to Action)

ปรับแต่งปุ่มเรียกร้องให้ดำเนินการที่สำคัญ

• ข้อความปุ่มหลัก — ข้อความบนปุ่ม CTA หลัก
• ลิงก์ปุ่มหลัก — URL ปลายทาง
• ข้อความปุ่มรอง — ข้อความปุ่ม CTA รอง (ไม่บังคับ)

---

แท็บที่ 11: FAQ

จัดการคำถามที่พบบ่อยที่แสดงบนหน้าแรก

1. คลิก เพิ่มคำถาม
2. กรอก:
   • คำถาม — คำถามที่ลูกค้ามักถาม
   • คำตอบ — คำตอบที่ชัดเจนและครบถ้วน
3. คลิก บันทึก
4. คำถามจะปรากฏในส่วน FAQ บนหน้าแรก
5. ลากเพื่อเรียงลำดับคำถาม

---

แท็บที่ 12: Webhooks

ตั้งค่า URL สำหรับรับการแจ้งเตือนจากระบบ

• Discord Webhook — URL webhook สำหรับส่งการแจ้งเตือนออเดอร์ใหม่ไปยัง Discord
• Email Webhook — URL สำหรับรับการแจ้งเตือนทางอีเมล
• ออเดอร์ใหม่ — เปิด/ปิดการแจ้งเตือนเมื่อมีออเดอร์ใหม่
• การชำระเงินสำเร็จ — เปิด/ปิดการแจ้งเตือนเมื่อชำระเงินสำเร็จ

---

แท็บที่ 13: LINE Integration

ตั้งค่าการผสานระบบ LINE เพิ่มเติมสำหรับการแจ้งเตือนลูกค้า

• เปิดใช้การแจ้งเตือน LINE — เปิด/ปิดการส่งแจ้งเตือนออเดอร์ผ่าน LINE
• ข้อความแจ้งเตือน — กำหนดรูปแบบข้อความที่ส่งเมื่อสถานะออเดอร์เปลี่ยน

---

แท็บที่ 14: ประกาศ (Announcements)

จัดการแถบประกาศที่ด้านบนของหน้าร้าน

1. คลิก เพิ่มประกาศ
2. กรอก:
   • ข้อความประกาศ — เนื้อหาที่ต้องการแสดง
   • ลิงก์ — URL ที่แถบประกาศจะลิงก์ไป (ไม่บังคับ)
   • สีพื้นหลัง — สีของแถบประกาศ
3. คลิก บันทึก
4. ประกาศจะปรากฏที่ด้านบนสุดของหน้าร้านทันที

---

การบันทึกการตั้งค่า

ทุกแท็บมีปุ่ม บันทึก ของตนเอง:

• การเปลี่ยนแปลงในแท็บหนึ่งจะไม่กระทบแท็บอื่น
• คลิก บันทึก หลังจากแก้ไขแต่ละแท็บ
• หากออกจากแท็บโดยไม่บันทึก การเปลี่ยนแปลงจะสูญหาย