Customization — ปรับเป็นแบรนด์คุณ

เปลี่ยน LUMORA → ชื่อร้านคุณ + สี + ฟอนต์ + ข้อความ

1. เปลี่ยนชื่อแบรนด์

Search & Replace ใน editor (VSCode)

⌘⇧F (Mac) หรือ Ctrl+Shift+F (Win):

ค้น	แทน
LUMORA	YOURSHOP
lumora.shop	yourshop.com
Elevate Everyday Style	tagline ของคุณ

ไฟล์ที่เกี่ยวข้อง

• ecommerce-web/nuxt.config.ts — title + meta
• ecommerce-web/app/layouts/default.vue — header + footer
• ecommerce-web/i18n/locales/th.json + en.json — ข้อความ
• ecommerce-web/.env → NUXT_PUBLIC_APP_NAME
• ecommerce-mobile/app.json — name + slug
• ecommerce-api/.env → email from / store name

2. เปลี่ยน Logo + รูป

Logo

แทนที่ไฟล์ใน ecommerce-web/public/:

• logo.png (400×100)
• logo-icon.png (512×512)
• favicon.png (≤100KB)

ไม่ต้องแก้โค้ด — แค่ refresh

Hero + Category + Promo

มี design-brief แยกเป็น batch ใน /Users/patchara/ecommerce/design-brief/:

Batch	รูปอะไร	จำนวน
01-design-assets.txt	logo + hero + category + promo + og	9-11
02-design-assets.txt	auth bg, category hero, story, promo-3	10
03-design-assets.txt	lookbook, brand-detail, mobile-app	10
04-design-assets.txt	empty states, email, OG per page	10

ทุก batch มี:

• STYLE PREFIX สำหรับใส่ก่อน prompt ChatGPT
• Prompt ของทุกรูป
• ขนาด + อัตราส่วน + ตำแหน่งใช้

วางรูปใน /Users/patchara/ecommerce/seed-design/0X-*/ ตามชื่อ → บอก deploy → ระบบ copy + แก้โค้ดให้

3. เปลี่ยนสี (Theme)

Tailwind palette

ecommerce-web/tailwind.config.ts:

colors: {
  primary: {
    50:  '#fff7ed',
    100: '#ffedd5',
    200: '#fed7aa',
    300: '#fdba74',
    400: '#fb923c',
    500: '#f97316',
    600: '#ea580c',  // ← สีหลักของแบรนด์
    700: '#c2410c',
    800: '#9a3412',
    900: '#7c2d12',
  },
  ink: {
    900: '#1c1b18',  // ← สีดำของ text/button
  },
}

ใช้เครื่องมือ generate palette:

• https://uicolors.app/create — paste สีหลัก → ได้ 50-900 ครบ
• https://tailwindcss.com/docs/customizing-colors

Naive UI

หลังเปลี่ยน Tailwind → แก้ ecommerce-web/app/app.vue:

common: {
  primaryColor: '#1c1b18',        // ปุ่มหลัก default
  primaryColorHover: '#ea580c',   // hover
  primaryColorPressed: '#c2410c',
}

ต้องแก้ทั้ง 2 ที่ — Tailwind ใช้ใน custom class, Naive ใช้ใน NSelect/NInput/NPagination

4. เปลี่ยนฟอนต์

Display (headlines)

ecommerce-web/nuxt.config.ts:

link: [
  {
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css2?family=<NEW_FONT>:wght@400;500;700&display=swap',
  },
]

แก้ tailwind.config.ts:

fontFamily: {
  display: ['<NEW_FONT>', 'Georgia', 'serif'],
}

Body — เปลี่ยน sans family แทน

5. เปลี่ยนข้อความ (i18n)

ecommerce-web/i18n/locales/
├── th.json
└── en.json

แก้ key ที่ต้องการ:

{
  "home": {
    "heroTitle1": "Elevate",
    "heroTitle2": "everyday",
    "heroTitle3": "style.",
    "heroLead": "คอลเลกชันคัดสรร..."
  }
}

ใน template: {{ $t('home.heroTitle1') }} — เปลี่ยนแล้วผ่าน HMR เห็นทันที

เพิ่มภาษาใหม่ (เช่น ญี่ปุ่น)

nuxt.config.ts:

i18n: {
  locales: [
    { code: 'th', name: 'ไทย', file: 'th.json' },
    { code: 'en', name: 'English', file: 'en.json' },
    { code: 'ja', name: '日本語', file: 'ja.json' },  // ← เพิ่ม
  ],
}

สร้าง i18n/locales/ja.json → copy key จาก th.json → แปลทั้งหมด

6. เปลี่ยนสกุลเงิน

ecommerce-web/app/utils/format.ts:

return new Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB',           // ← เปลี่ยน เช่น 'USD', 'JPY'
  maximumFractionDigits: 0,
}).format(n)

ฝั่ง API: prisma/schema.prisma field price เป็น Decimal — ใส่เลขดิบ (ไม่มีหน่วย)

7. ปรับ section หน้าแรก

ecommerce-web/app/pages/index.vue — มี section:

• Hero
• Marquee strip
• Categories
• Featured products
• Promo banners
• From the studio
• Style Edit (lookbook)
• Made with care
• Get the app
• Latest products
• Value props

ลบ / เพิ่ม / ย้ายลำดับได้ตามต้องการ — ทุก section เป็น <section> แยกอิสระ

8. ปรับ Motion

แก้ object motion ใน script:

const sectionReveal = {
  initial: { opacity: 0, y: 32 },
  visibleOnce: { opacity: 1, y: 0, transition: { duration: 700 } },
}

• duration ลด = เร็วขึ้น
• y ลด = เคลื่อนน้อยลง
• เปลี่ยน visibleOnce → visible = animate ทุกครั้งที่ scroll เข้ามา (ไม่ใช่แค่ครั้งแรก)

9. ปิด/เปิดฟีเจอร์

ผ่าน feature-flags ใน ecommerce-api/.env:

FEATURE_REVIEWS=true
FEATURE_COUPONS=true
FEATURE_WISHLIST=true
FEATURE_PUSH_NOTIFICATION=false
FEATURE_MULTI_LANG=true

หรือ admin toggle ใน database

ขั้นต่อไป

• Deploy → 08 — Deployment
• Maintenance → 09 — Maintenance