เลิกง้อ Marketplace
ทำเว็บขายของ + ทำการตลาดด้วยตัวเอง

คู่มือฉบับลงมือทำ: สร้างเว็บขายสินค้าของตัวเองด้วย Lovable ตั้งแต่สมัครใช้งาน เขียนพร้อมท์ เชื่อม Stripe รับเงิน ทำระบบหลังบ้าน ดึงสินค้าจาก Shopee ด้วย Apify และเริ่มทำการตลาดด้วย “เมฆ”

โดย ทีม Mekha Innovationอ่าน 10 นาที

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

เว็บของตัวเองแก้ทั้งสามเรื่องนี้ในทีเดียว คุณกำหนดราคาเอง คุมหน้าตาแบรนด์เอง เก็บข้อมูลลูกค้าเอง เมื่อก่อนเรื่องนี้แพงเพราะต้องจ้างโปรแกรมเมอร์ แต่ตอนนี้พิมพ์บอก AI เป็นภาษาไทยธรรมดาก็ได้เว็บใช้งานจริงแล้ว

💡 เตรียมของก่อนเริ่ม

อีเมลสำหรับสมัคร, รูปสินค้าและราคาที่จะขาย, และเวลาว่างสักหนึ่งบ่าย เท่านี้พอ — ไม่ต้องมีพื้นฐานโค้ดเลย

1ขั้นที่ 1 — สมัครใช้งาน Lovable

  1. 01

    สมัครบัญชี

    เข้า lovable.dev กด Sign up แล้วเลือกล็อกอินด้วย Google ใช้เวลาไม่ถึงนาทีและไม่ต้องผูกบัตรตั้งแต่แรก

  2. 02

    เริ่มด้วยแพลนฟรี

    ทดลองสร้างเว็บและแก้ไขได้ตามเครดิตรายเดือน พอเริ่มขายจริงค่อยอัปเกรดเป็น Pro ซึ่งจำเป็นถ้าจะเปิดใช้ระบบชำระเงิน

  3. 03

    สร้างโปรเจกต์แรก

    กด New Project ตั้งชื่อเป็นชื่อร้านของคุณ แล้วคุณจะเจอช่องแชทกับพรีวิวเว็บอยู่ข้าง ๆ กัน อัปเดตทันทีทุกครั้งที่สั่ง

หน้าแรกของ Lovable หลังล็อกอิน พร้อมช่องพิมพ์คำสั่งสร้างเว็บ
ขั้นที่ 1 — หน้าแรกของ Lovable หลังสมัครและล็อกอินด้วยบัญชี Google

ชื่อโปรเจกต์จะกลายเป็นส่วนหนึ่งของลิงก์เว็บชั่วคราว ตั้งให้เรียบร้อยตั้งแต่แรกจะได้ไม่ต้องมาเปลี่ยนทีหลัง (ภายหลังผูกโดเมนของตัวเองได้)

2ขั้นที่ 2 — พร้อมท์สร้างเว็บ E-commerce ของคุณ

หัวใจของการใช้ Lovable คือ “พร้อมท์” หรือคำสั่งที่คุณพิมพ์บอก AI กฎง่าย ๆ คือยิ่งบอกละเอียด ยิ่งได้ตรงใจ ระบุประเภทสินค้า กลุ่มลูกค้า อารมณ์ของแบรนด์ และหน้าที่ต้องมีให้ครบ แทนที่จะพิมพ์แค่ “ทำเว็บขายของ”

พร้อมท์ที่ 1 — สร้างหน้าร้าน
สร้างเว็บไซต์ขายสินค้าออนไลน์ชื่อร้าน "บ้านกาแฟดอย" ขายเมล็ดกาแฟคั่วจากภาคเหนือ กลุ่มลูกค้าคือคนทำงานอายุ 25-40 ปีที่ชอบชงกาแฟเองที่บ้าน

โทนดีไซน์: อบอุ่น มินิมอล สีน้ำตาลเอิร์ธโทนกับครีม ใช้ฟอนต์ไทยอ่านง่าย ดูพรีเมียมแต่ไม่หรูจนเข้าไม่ถึง

หน้าที่ต้องมี:
1. หน้าแรก — hero พร้อมรูปสินค้าเด่น, สินค้าขายดี 4 ชิ้น, จุดขายของร้าน 3 ข้อ, รีวิวลูกค้า, footer พร้อมช่องทางติดต่อ
2. หน้ารวมสินค้า — แสดงเป็นกริด กรองตามหมวดหมู่และช่วงราคา เรียงตามราคา/ใหม่ล่าสุดได้
3. หน้ารายละเอียดสินค้า — แกลเลอรีรูป, ราคา, ตัวเลือก (น้ำหนัก/ระดับการบด), จำนวน, ปุ่มหยิบใส่ตะกร้า, รายละเอียดและวิธีเก็บรักษา
4. ตะกร้าสินค้า — แก้จำนวน/ลบสินค้าได้ สรุปยอดรวมและค่าจัดส่ง
5. หน้าชำระเงิน — กรอกชื่อ เบอร์ อีเมล ที่อยู่จัดส่ง แล้วสรุปออเดอร์

ทุกหน้าต้องรองรับมือถือเป็นหลัก ข้อความทั้งหมดเป็นภาษาไทย
ตอนนี้ใช้ข้อมูลสินค้าตัวอย่าง 8 รายการไปก่อน
หน้าจอ Lovable ขณะพิมพ์พร้อมท์สร้างเว็บ e-commerce และเว็บร้านค้าที่ได้ในพรีวิว
ขั้นที่ 2 — พิมพ์พร้อมท์เดียว แล้วดูเว็บร้านค้าขึ้นในพรีวิวทันที

เคล็ดลับการเขียนพร้อมท์

  • สั่งทีละเรื่อง อย่ารวมสิบอย่างในข้อความเดียวถ้าเป็นการแก้
  • บอก “ทำไม” ด้วย เช่น “ขยายปุ่มเพราะลูกค้ากดไม่โดนบนมือถือ”
  • อ้างอิงหน้าจอที่เห็น เช่น “ในหน้ารายละเอียดสินค้า ส่วนราคา”
  • ถ้าผลลัพธ์หลุดทาง สั่งย้อนกลับเวอร์ชันก่อนหน้าได้เสมอ

3ขั้นที่ 3 — เชื่อมต่อ Stripe เพื่อรับชำระเงิน

เว็บสวยแค่ไหนก็ไม่มีความหมายถ้ารับเงินไม่ได้ Lovable มีระบบชำระเงินในตัวที่ใช้ Stripe อยู่เบื้องหลัง คุณไม่ต้องไปเปิดบัญชี Stripe เองหรือหา API key มาแปะ แค่สั่งใน Lovable ตรง ๆ (ฟีเจอร์นี้ต้องใช้แพลน Pro ขึ้นไป)

พร้อมท์ที่ 2 — เปิดระบบชำระเงิน
เปิดใช้งานระบบรับชำระเงินด้วย Stripe ให้หน่อย

จากนั้นสร้างสินค้าและราคาในระบบชำระเงินตามรายการสินค้าในเว็บ แล้วต่อปุ่ม "ชำระเงิน" ในหน้า checkout ให้พาไปหน้าจ่ายเงินจริง

- รองรับการซื้อแบบจ่ายครั้งเดียว
- สกุลเงินบาท (THB)
- หลังจ่ายเงินสำเร็จให้พาไปหน้า "ขอบคุณ" พร้อมสรุปเลขที่ออเดอร์
- ถ้ายกเลิกกลางทางให้กลับมาที่หน้าตะกร้าโดยสินค้ายังอยู่ครบ
- บันทึกออเดอร์ลงฐานข้อมูลเมื่อจ่ายเงินสำเร็จเท่านั้น

ลำดับการทำงานคือ เปิดระบบ → สร้างสินค้าและราคา → ต่อปุ่มจ่ายเงิน อย่าข้ามขั้น ระบบจะเริ่มในโหมดทดสอบ (test) ให้ก่อนเสมอ เมื่อทุกอย่างเรียบร้อยค่อยยืนยันตัวตนเพื่อสลับไปโหมดรับเงินจริง (live)

หน้าจอเปิดใช้งานระบบชำระเงิน Stripe ใน Lovable
ขั้นที่ 3 — เปิดใช้งานระบบรับชำระเงินจากในโปรเจกต์ Lovable
แบบฟอร์มกรอกอีเมล ชื่อธุรกิจ และประเทศ ก่อนกดปุ่ม Enable
กรอกอีเมล ชื่อธุรกิจ และประเทศ แล้วกด Enable เพื่อเริ่มในโหมดทดสอบ

⚠️ ทดสอบให้ครบก่อนเปิดขายจริง

ไล่ทดสอบอย่างน้อย 4 เคส: จ่ายสำเร็จ, กดยกเลิกกลางทาง, บัตรถูกปฏิเสธ, และซื้อหลายชิ้นพร้อมกัน แล้วเช็กว่าออเดอร์ถูกบันทึกครบทุกครั้ง

4ขั้นที่ 4 — พร้อมท์สร้างระบบหลังบ้าน

เมื่อออเดอร์เริ่มเข้า คุณจะไม่อยากมานั่งสั่ง AI แก้ราคาสินค้าทีละครั้ง สิ่งที่ต้องมีคือหน้าหลังบ้านที่คุณล็อกอินเข้าไปจัดการเองได้

พร้อมท์ที่ 3 — ระบบจัดการสินค้าและออเดอร์
สร้างระบบหลังบ้านสำหรับเจ้าของร้านที่ /admin

ระบบล็อกอิน:
- ใช้อีเมล + รหัสผ่านในการเข้าสู่ระบบ
- เก็บสิทธิ์ผู้ใช้แยกเป็นตารางบทบาท (role) ต่างหาก ห้ามเก็บไว้ในโปรไฟล์
- เฉพาะผู้ใช้ที่มีบทบาท admin เท่านั้นที่เข้าหน้า /admin ได้ คนอื่นให้เด้งออก

หน้าแดชบอร์ด:
- การ์ดสรุป: ยอดขายวันนี้, ยอดขายเดือนนี้, จำนวนออเดอร์รอจัดส่ง, สินค้าที่ใกล้หมดสต็อก
- กราฟยอดขายย้อนหลัง 30 วัน

จัดการสินค้า:
- ตารางรายการสินค้า ค้นหาและกรองตามหมวดหมู่ได้
- เพิ่ม / แก้ไข / ลบสินค้า พร้อมอัปโหลดรูปได้หลายรูป
- ฟิลด์: ชื่อ, รายละเอียด, ราคา, หมวดหมู่, จำนวนสต็อก, สถานะเปิด-ปิดการขาย
- ตัดสต็อกอัตโนมัติเมื่อมีออเดอร์ที่จ่ายเงินสำเร็จ

จัดการออเดอร์:
- ตารางออเดอร์ทั้งหมด เรียงจากใหม่ไปเก่า กรองตามสถานะได้
- กดดูรายละเอียดออเดอร์: สินค้าที่สั่ง, ยอดรวม, ข้อมูลลูกค้า, ที่อยู่จัดส่ง
- เปลี่ยนสถานะได้: รอชำระเงิน / ชำระแล้ว / กำลังจัดส่ง / จัดส่งแล้ว / ยกเลิก
- ใส่เลขพัสดุและชื่อขนส่งได้
- ส่งอีเมลแจ้งลูกค้าอัตโนมัติเมื่อสถานะเปลี่ยนเป็น "จัดส่งแล้ว"

ทุกข้อความเป็นภาษาไทย และใช้งานบนมือถือได้
หน้าล็อกอินระบบหลังร้านสำหรับเจ้าของร้านเท่านั้น
ขั้นที่ 4 — หน้าล็อกอินระบบหลังร้าน เข้าได้เฉพาะผู้ที่มีสิทธิ์ admin
แดชบอร์ดหลังร้านแสดงยอดขายวันนี้ ยอดขายเดือนนี้ ออเดอร์รอจัดส่ง และกราฟยอดขาย 30 วัน
แดชบอร์ดสรุปยอดขายและออเดอร์รอจัดส่งในหน้าเดียว
หน้าจัดการสินค้าในระบบหลังร้าน แสดงรายการสินค้า ราคา สต็อก พร้อมปุ่มแก้ไขและลบ
หน้าจัดการสินค้า เพิ่ม แก้ไข ลบ และคุมสต็อกได้เอง

⚠️ เรื่องสิทธิ์ห้ามมักง่าย

อย่าให้ระบบเช็กว่าใครเป็นแอดมินจากฝั่งหน้าเว็บอย่างเดียว ต้องตรวจที่ฝั่งเซิร์ฟเวอร์และตั้งกฎการเข้าถึงข้อมูลด้วยเสมอ

5ขั้นที่ 5 — ดึงสินค้าจาก Shopee มาลงเว็บด้วย Apify

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

พร้อมท์ที่ 4 — นำเข้าสินค้าจาก Shopee
เชื่อมต่อ Apify connector ให้หน่อย

จากนั้นสร้างหน้าใน /admin ชื่อ "นำเข้าสินค้า" ที่ทำงานแบบนี้:
1. ให้ผมวางลิงก์ร้านหรือลิงก์สินค้าจาก Shopee ลงในช่องกรอก
2. เรียก Apify actor สำหรับดึงข้อมูลสินค้า Shopee ผ่านฝั่งเซิร์ฟเวอร์เท่านั้น (ห้ามเรียกจากเบราว์เซอร์)
3. แสดงผลลัพธ์เป็นตารางให้ผมเลือกติ๊กว่าจะนำเข้าสินค้าชิ้นไหนบ้าง
4. ดึงข้อมูล: ชื่อสินค้า, ราคา, รูปภาพ, รายละเอียด, หมวดหมู่, จำนวนที่ขายได้
5. ให้ผมแก้ชื่อและราคาได้ก่อนกดบันทึก แล้วค่อยบันทึกลงตารางสินค้าของเรา
6. ถ้าสินค้าชื่อซ้ำกับที่มีอยู่แล้ว ให้ถามว่าจะทับของเดิมหรือข้าม
7. แสดงสถานะกำลังดึงข้อมูล และถ้า Apify ตอบกลับเป็นข้อผิดพลาด ให้แสดงข้อความจริงที่ได้รับ ไม่ต้องซ่อน
หน้าจอ Connectors ใน Lovable แสดง Apify ที่เปิดใช้งานแล้วพร้อมรายการ connection
ขั้นที่ 5 — เปิดใช้งาน Apify connector ในเวิร์กสเปซ
หน้าจอ Lovable ให้เลือก connection ของ Apify เพื่อเชื่อมกับโปรเจกต์
เลือก connection ของ Apify แล้วลิงก์เข้ากับโปรเจกต์
หน้านำเข้าสินค้าใน /admin สำหรับวางลิงก์ Shopee แล้วกดดึงข้อมูล
หน้านำเข้าสินค้า วางลิงก์ร้าน Shopee แล้วเลือกสินค้าที่จะย้ายมา

⚠️ ระวังเรื่องรูปและลิขสิทธิ์

ดึงข้อมูลสินค้าของร้านคุณเองเพื่อย้ายมาเว็บตัวเองไม่มีปัญหา แต่อย่าคัดลอกรูปหรือคำอธิบายของร้านคนอื่นมาใช้

6ขั้นที่ 6 — เริ่มทำการตลาดขายเองด้วย “เมฆ”

มีเว็บแล้วแต่ไม่มีคนเข้า ก็เหมือนเปิดร้านในซอยตัน พอมาทำเว็บเอง คุณต้องสร้างทราฟฟิกด้วยตัวเอง — และนี่คือส่วนที่สนุก เพราะทุกคนที่เข้ามาจะเป็นลูกค้าของคุณจริง ๆ เครื่องมือที่ช่วยย่นเวลาตรงนี้ได้เยอะคือ เมฆ (mek-ai.com)

คอนเทนต์ขายของ

สร้างแคปชันและโพสต์สำหรับ Facebook, Instagram, TikTok จากข้อมูลสินค้าที่คุณมีอยู่แล้ว

ข้อความโฆษณา

ทำหลายเวอร์ชันไว้ทดสอบว่าอันไหนคนคลิกดีกว่า

ปฏิทินคอนเทนต์

วางแผนโพสต์ล่วงหน้าทั้งเดือน จะได้ไม่หายไปเป็นอาทิตย์แล้วค่อยกลับมาโพสต์รัว ๆ

ข้อความหาลูกค้าเก่า

เขียนข้อความแจ้งโปรโมชันส่งหาคนที่เคยซื้อ ซึ่งทำไม่ได้เลยตอนอยู่บนมาร์เก็ตเพลส

หน้าแรกของเมฆ (mek-ai.com) ให้อัปโหลดรูปสินค้าแล้วสร้างชุดขายให้ทันที
ขั้นที่ 6 — หน้าแรกของ “เมฆ” อัปโหลดรูปสินค้าแล้วสร้างชุดขายได้ทันที
หน้าจอเมฆกำลังวิเคราะห์รูปสินค้า ตั้งชื่อ จุดเด่น และกลุ่มเป้าหมาย
เมฆวิเคราะห์รูปสินค้า ตั้งชื่อ จุดเด่น และกลุ่มเป้าหมายให้
ตัวอย่าง Sales Kit จากเมฆ ประกอบด้วยภาพโพสต์ขายและแคปชันพร้อมใช้
ตัวอย่าง Sales Kit ภาพโพสต์ขายพร้อมแคปชันที่ใช้ได้เลย

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

สรุป + เช็กลิสต์ก่อนเปิดร้าน

  • สมัคร Lovable และสร้างโปรเจกต์ด้วยชื่อแบรนด์แล้ว
  • หน้าร้าน หน้าสินค้า ตะกร้า และ checkout ใช้งานได้บนมือถือ
  • เชื่อม Stripe และทดสอบซื้อจนผ่านครบทุกเคสแล้ว
  • มีหน้า /admin ที่ล็อกอินได้ และคนนอกเข้าไม่ได้
  • จัดการสินค้า สต็อก และสถานะออเดอร์ได้จากหลังบ้าน
  • นำเข้าสินค้าจาก Shopee ผ่าน Apify และเกลาคำอธิบายใหม่แล้ว
  • มีแผนคอนเทนต์อย่างน้อย 2 สัปดาห์แรกจาก mek-ai.com
  • ใส่ช่องทางติดต่อ นโยบายคืนสินค้า และวิธีจัดส่งให้ชัดเจน

มาร์เก็ตเพลสจะยังมีที่ทางของมันในฐานะช่องทางเสริม แต่บ้านหลักของแบรนด์คุณควรเป็นเว็บที่คุณเป็นเจ้าของเอง วันนี้ต้นทุนในการมีมันต่ำที่สุดเท่าที่เคยเป็นมา

ลองใช้ “เมฆ” เริ่มทำการตลาดได้ที่ mek-ai.com

หมวดหมู่อื่น