Xây dựng cửa hàng thời trang cao cấp AI có trang quản trị

Claude Desktop

Dùng Claude Code trong ứng dụng desktop để thiết lập và tùy chỉnh cửa hàng của bạn.

Tải Claude Desktop

https://claude.ai/download

Tài khoản GitHub

Miễn phí. Bản sao STILLFORM của riêng bạn nằm ở đây, và Hostinger triển khai từ đây.

Tạo tài khoản GitHub

https://github.com/signup

Node.js

Tải bản LTS hiện tại. Nó chạy cửa hàng trên máy tính của bạn.

Tải Node.js

https://nodejs.org/en/download

Tài khoản Supabase

Gói miễn phí là đủ. Nơi này lưu sản phẩm, ảnh, đơn hàng và thông tin đăng nhập chủ cửa hàng của bạn.

Tạo tài khoản Supabase

https://supabase.link/r4gdwhi

Tài khoản Cloudflare

Miễn phí. Bước kiểm tra Turnstile giúp chặn bot khỏi trang thanh toán của bạn.

Tạo tài khoản Cloudflare

https://dash.cloudflare.com/sign-up

Hosting Hostinger

STILLFORM miễn phí; cửa hàng trực tuyến của bạn chạy ở đây.

Chọn gói Hostinger

Dùng gói Unlimited hoặc gói Cloud — STILLFORM được triển khai dưới dạng Node.js Web App.

Tạo bản sao của riêng bạn

Hãy thử cửa hàng hoàn chỉnh trong bản demo trực tiếp trước: rê chuột lên giá treo quần áo, kéo nó và mở một món đồ. Thanh toán và Studio bị tắt ở đó.

Mở STILLFORM trên GitHub

https://github.com/salhiworks/stillform-fashion-store

Nhấn Use this template, rồi Create a new repository Đặt tên và chọn Public hoặc Private Nhấn Create repository và sao chép địa chỉ của nó

Đưa về máy tính của bạn

Claude Desktop Code Local

Bắt đầu một phiên Local trong một thư mục như Documents, thêm địa chỉ repository của bạn bên dưới rồi gửi:

Clone bản sao của bạn

Tải repository STILLFORM của riêng bạn vào một thư mục con mới.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, or GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

Địa chỉ repository mới của bạn

https://github.com/your-name/my-fashion-store

Mở thư mục STILLFORM của bạn

Bắt đầu một phiên Local mới Mở thư mục Claude vừa tạo — thư mục có README.md bên trong Nếu Claude Desktop hỏi, hãy tin cậy thư mục này

Chạy cửa hàng trên máy

Trong phiên STILLFORM của bạn, gửi:

Chuẩn bị và chạy STILLFORM

Cài đặt dự án và chạy cửa hàng trên máy tính của bạn ở chế độ demo.

This folder is my own copy of the STILLFORM fashion store. Read README.md and docs/SETUP.md before you start. 1. Check that Node.js 20 or newer is installed. If it isn't, stop and tell me how to install it. 2. Install the dependencies with npm install. 3. Start the development server with npm run dev and keep it running. 4. Give me the local address to open. Don't change any code, don't create .env.local and don't connect Supabase yet: I want to see the store in demo mode first.

Mở địa chỉ Claude đưa cho bạn, thường là http://localhost:5173. Khi chưa có Supabase, cửa hàng chạy ở chế độ demo với bộ sưu tập có sẵn: giá treo, trang sản phẩm và giỏ hàng đều hoạt động, còn thanh toán vẫn tắt cho đến Bước 3.

Tạo một dự án Supabase

Mở Supabase Dashboard

https://supabase.com/dashboard

Nhấn New project — khu vực nào và gói Free đều được Để Data API ở trạng thái bật Lưu mật khẩu cơ sở dữ liệu ở nơi an toàn — Claude không bao giờ cần đến nó Khi dự án sẵn sàng, sao chép Project ID của nó

Supabase Project Settings General

Project ID là thông tin dự án duy nhất Claude cần. Claude tự đọc Project URL và Publishable key của bạn qua Supabase CLI.

Đăng nhập Supabase CLI

Việc này mở trình duyệt của bạn, nên bạn tự chạy nó một lần:

Nhấn nút Terminal ở phía trên phiên STILLFORM của bạn Chạy lệnh bên dưới Chấp thuận đăng nhập trong cửa sổ trình duyệt vừa mở

npx supabase login

Tạo một widget Turnstile

Mở Cloudflare Dashboard

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

Đặt tên widget theo tên cửa hàng của bạn Trong phần hostname, thêm localhost Thêm cả tên miền cửa hàng nếu bạn đã biết — nếu chưa, bạn sẽ thêm ở Bước 5 Chọn chế độ Managed và tạo widget Giữ trang này mở: Bước 3 cần site key và secret key của nó

Nhờ Claude kết nối cửa hàng của bạn

Trong phiên STILLFORM của bạn, thêm Project ID bên dưới rồi gửi:

Kết nối STILLFORM với Supabase

Claude liên kết dự án của bạn, thiết lập cơ sở dữ liệu và bộ sưu tập khởi đầu, rồi triển khai function thanh toán.

Connect this STILLFORM store to my Supabase project {{PROJECT_REF}}. Read docs/SETUP.md first and follow it exactly. Use only the migrations, seed and scripts this project already has: don't write new SQL, tables or setup steps, and don't change the store's code. I'm already signed in to the Supabase CLI. Do these yourself, and tell me what each one does before you run it: 1. Link this folder to my project. 2. Show me what the database push would apply, then apply the migrations with the starter collection (supabase db push --include-seed). 3. Write my Project URL and Publishable key to .env.local. Never read, use or write the secret or service_role key. 4. Deploy the place-order Edge Function with --no-verify-jwt. If any command needs my password or a secret key, stop and give me the command to run in my own terminal instead. Then tell me to run npm run setup in my own terminal: it asks for my Turnstile keys and my owner email and password in hidden prompts. Never ask me for them in this chat. When I tell you it's done, run npm run setup -- --check and npm run verify:remote, restart npm run dev, and tell me in plain words what passed and what is still left to do.

Project ID Supabase của bạn

abcdefghijklmnopqrst

Claude hỏi trước mỗi lệnh — hãy nhấn Allow. Claude dừng lại khi đến lượt bạn.

Nhập các secret của bạn trong Terminal

Khi Claude yêu cầu, hãy tự chạy bước thiết lập của cửa hàng trong Terminal. Nó bỏ qua mọi thứ Claude đã làm và chỉ hỏi bạn những thông tin riêng tư:

npm run setup

Ở phần bảo vệ thanh toán, chọn 1, rồi dán site key và secret key Turnstile của bạn Nếu được hỏi có triển khai lại hàm place-order không, gõ n — Claude đã triển khai rồi Nhập email và một mật khẩu ít nhất 12 ký tự cho tài khoản chủ cửa hàng Khi được hỏi, tắt Allow new users to sign up trong Supabase Dashboard của bạn, rồi nhấn Enter — setup sẽ kiểm tra rằng nó đã tắt Báo Claude là đã xong

Supabase Authentication Sign In / Providers

Giữ bí mật những thông tin này

Chỉ gõ secret key Turnstile và mật khẩu vào các ô nhập ẩn của Terminal. Không bao giờ dán chúng vào khung chat.

Kiểm tra thiết lập và đăng nhập

Claude chạy các bước kiểm tra của cửa hàng và khởi động lại nó. Khi Claude báo mọi thứ đều đạt:

Tải lại cửa hàng trên máy — giờ nó lấy bộ sưu tập từ cơ sở dữ liệu của bạn Mở /admin và đăng nhập bằng email và mật khẩu chủ cửa hàng

Bạn đang ở Studio, dashboard của cửa hàng. Chỉ những tài khoản trong danh sách quản trị viên của cửa hàng mới mở được, và không ai có thể tự đăng ký.

Thêm một sản phẩm

Mọi thứ bạn lưu trong Studio đi thẳng vào cơ sở dữ liệu — không cần sửa code.

Studio Products Add a product

Điền Name, Category và One-line summary Trong Photos, thêm một ảnh mặt trước Trong Price, sizes and stock, đặt Price và chọn Sizes Đặt tên màu đầu tiên, chọn mẫu màu và nhập tồn kho cho từng size Nhấn Add a colour cho mỗi biến thể màu khác Nhấn Publish

Tùy chọn: khi đã thêm sản phẩm của riêng bạn, hãy lưu trữ hoặc xóa tám sản phẩm demo trong Products.

Căn ảnh trên giá treo

Thêm ảnh mặt trước sẽ mở trình chỉnh sửa giá treo. Ảnh PNG tách nền trong suốt, có móc treo ở trên cùng là đẹp nhất; ảnh chụp trước bức tường trơn, sáng màu cũng được.

Bật Remove the plain background nếu ảnh chưa được tách nền Điều chỉnh Size và vị trí, hoặc kéo ảnh trong bản xem trước Mô tả ảnh cho trình đọc màn hình Nhấn Use this photo

Kiểm tra Preview on the rail: rê chuột để xoay món đồ và nhấn vào để mở cận cảnh. Ảnh mặt sau và mặt bên giúp nó xoay trọn vòng.

Sắp xếp giá treo

Studio Rail

Trong Add a piece, chọn sản phẩm mới và màu của nó Kéo các món đồ để sắp thứ tự, hoặc dùng các mũi tên Gỡ món đồ nào bạn không muốn hiện trên trang chủ Nhấn Save rail

Sáu đến mười món là vừa cho màn hình máy tính. Trên điện thoại, giá treo trở thành carousel vuốt được.

Định hình bộ sưu tập và Lookbook

Studio Collections

Trong Homepage selection, chọn các món đồ dẫn đầu trang chủ rồi nhấn Save Nhấn New collection, hoặc sửa một bộ sưu tập có sẵn, rồi thêm các món đồ của nó

Studio Lookbook

Sửa tiêu đề và phần giới thiệu Tải lên ảnh và chú thích của riêng bạn cho từng trang đôi Ẩn hoặc sắp xếp lại các trang đôi, rồi nhấn Save lookbook

Cập nhật cài đặt và mở thanh toán

Studio Settings

Trong Store, đặt tên cửa hàng và đơn vị tiền tệ Trong Contact, Shipping và Policies, thêm thông tin của riêng bạn Trong Homepage, thay đổi chữ xung quanh giá treo Trong Checkout, bật Cash on delivery, Bank transfer hoặc Pay at studio pickup, rồi sửa hướng dẫn của nó Bật Open checkout Nhấn Save settings

STILLFORM không nhận thông tin thẻ: người mua chọn một trong các phương thức của bạn, và bạn đánh dấu mỗi đơn là đã thanh toán khi nhận được tiền.

Đặt một đơn hàng thử

Mở cửa hàng trên máy, cho một món đồ vào giỏ và thanh toán Ghi lại mã đơn hàng trên trang xác nhận Trong Studio, mở Orders và nhấn vào đơn hàng thử của bạn Nhấn Cancel order — tồn kho của nó được mở bán trở lại

Tạo Web App của bạn

Chưa có hosting? Hãy chọn gói ở phần Yêu cầu.

Hostinger Websites Create website Web App

Chọn tên miền của riêng bạn, hoặc một tên miền tạm thời để bắt đầu Chọn Import your Git repository Tiếp tục bằng Continue with GitHub và cấp cho Hostinger quyền truy cập repository STILLFORM của bạn Chọn repository và nhánh main

Cấu hình và triển khai

Giữ preset framework Vite mà Hostinger tự nhận diện Chọn Node.js 22 Đặt lệnh build là npm run build — không bao giờ dùng build:demo Đặt thư mục output là dist và để trống file entry

Trước lần build đầu tiên, thêm ba biến môi trường này — cùng giá trị như trong .env.local của bạn, Claude có thể cho bạn xem. Chúng được đưa vào cửa hàng khi build, nên thay đổi sau này cần triển khai lại.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Project URL của Supabase

VITE_SUPABASE_ANON_KEY

Publishable key của Supabase

VITE_TURNSTILE_SITE_KEY

Site key của Turnstile

Các giá trị Supabase nằm trong Connect. Site key nằm trên widget Turnstile của bạn.

Mở Connect

https://supabase.com/dashboard/project/_?showConnect=true

Chỉ giá trị công khai

Không bao giờ thêm secret key Turnstile, Secret key Supabase hay service_role key vào Hostinger. Mọi thứ bắt đầu bằng VITE_ đều hiển thị trong trình duyệt.

Nhờ Claude chạy npm run preflight, bước kiểm tra trước khi ra mắt của cửa hàng — chỉ triển khai khi nó đạt Nhấn Deploy và chờ build hoàn tất Mở địa chỉ trực tuyến của bạn

Kết nối tên miền trực tuyến

Supabase Authentication URL Configuration

Đặt Site URL là địa chỉ thật của bạn, bắt đầu bằng https:// Thêm cùng địa chỉ đó vào Redirect URLs Nhấn Save

Cloudflare Turnstile

Mở widget STILLFORM của bạn Thêm tên miền trực tuyến vào danh sách hostname của nó rồi lưu

Allow new users to sign up vẫn tắt trong Supabase.

Kiểm tra cửa hàng trực tuyến

Mở trực tiếp một trang sản phẩm bằng địa chỉ của nó, rồi tải lại trang Đăng nhập tại /admin trên địa chỉ trực tuyến Cho một món đồ vào giỏ và thanh toán — bước kiểm tra Turnstile vô hình hoặc chỉ là một ô đánh dấu Tìm đơn hàng thử trong Orders, rồi hủy nó

Cách Hostinger xử lý liên kết trực tiếp cho cửa hàng này vẫn chưa được xác nhận. Nếu trang sản phẩm hiện lỗi 404 khi bạn mở hoặc tải lại, hãy nhờ Claude cùng bạn xem phần Hostinger trong docs/DEPLOY.md.

Cập nhật cửa hàng sau này

Sản phẩm, ảnh, tồn kho, đơn hàng và cài đặt: thay đổi trong Studio — chúng có hiệu lực ngay

Thay đổi thiết kế hoặc code: nhờ Claude thực hiện và đẩy lên main — Hostinger build lại cửa hàng sau mỗi lần push