Buat Toko Fashion Mewah AI dengan Dashboard Admin

Claude Desktop

Gunakan Claude Code di aplikasi desktop untuk menyiapkan dan menyesuaikan toko Anda.

Unduh Claude Desktop

https://claude.ai/download

Akun GitHub

Gratis. Salinan STILLFORM milik Anda disimpan di sini, dan Hostinger men-deploy dari sini.

Buat Akun GitHub

https://github.com/signup

Node.js

Unduh rilis LTS terbaru. Ini menjalankan toko di komputer Anda.

Unduh Node.js

https://nodejs.org/en/download

Akun Supabase

Paket gratis sudah cukup. Di sinilah produk, foto, pesanan, dan login pemilik Anda disimpan.

Buat Akun Supabase

https://supabase.link/r4gdwhi

Akun Cloudflare

Gratis. Pemeriksaan Turnstile-nya menjauhkan bot dari checkout Anda.

Buat Akun Cloudflare

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

Hosting Hostinger

STILLFORM gratis; toko live Anda berjalan di sini.

Pilih Paket Hostinger

Gunakan paket Unlimited atau paket Cloud — STILLFORM di-deploy sebagai Node.js Web App.

Buat Salinan Anda Sendiri

Coba dulu toko jadinya di demo live: arahkan kursor ke rak pakaian, seret, lalu buka salah satu item. Checkout dan Studio dimatikan di sana.

Buka STILLFORM di GitHub

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

Klik Use this template, lalu Create a new repository Beri nama dan pilih Public atau Private Klik Create repository dan salin alamatnya

Bawa ke Komputer Anda

Claude Desktop Code Local

Mulai sesi Local di folder seperti Documents, tambahkan alamat repositori Anda di bawah, lalu kirim:

Clone Salinan Anda

Mengunduh repositori STILLFORM milik Anda ke subfolder baru.

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.

Alamat repositori baru Anda

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

Buka Folder STILLFORM Anda

Mulai sesi Local baru Buka folder yang baru dibuat Claude — yang berisi README.md Jika Claude Desktop bertanya, percayai folder tersebut

Jalankan Toko Secara Lokal

Di sesi STILLFORM Anda, kirim:

Siapkan dan Jalankan STILLFORM

Menginstal proyek dan menjalankan toko di komputer Anda dalam mode 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.

Buka alamat yang diberikan Claude, biasanya http://localhost:5173. Tanpa Supabase, toko berjalan dalam mode demo dengan koleksi bawaannya: rak, halaman produk, dan tas belanja berfungsi, sementara checkout tetap mati sampai Langkah 3.

Buat Proyek Supabase

Buka Dashboard Supabase

https://supabase.com/dashboard

Klik New project — region apa pun dan paket Free sudah cukup Biarkan Data API tetap aktif Simpan kata sandi database di tempat yang aman — Claude tidak pernah membutuhkannya Setelah proyek siap, salin Project ID-nya

Supabase Project Settings General

Project ID adalah satu-satunya detail proyek yang dibutuhkan Claude. Claude membaca Project URL dan Publishable key Anda sendiri melalui Supabase CLI.

Masuk ke Supabase CLI

Ini membuka browser Anda, jadi Anda menjalankannya sendiri, sekali saja:

Klik tombol Terminal di bagian atas sesi STILLFORM Anda Jalankan perintah di bawah Setujui login di jendela browser yang terbuka

npx supabase login

Buat Widget Turnstile

Buka Dashboard Cloudflare

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

Beri nama widget sesuai nama toko Anda Di bagian hostname, tambahkan localhost Tambahkan juga domain toko Anda jika sudah tahu — jika belum, Anda menambahkannya di Langkah 5 Pilih mode Managed dan buat widget-nya Biarkan halaman tetap terbuka: Langkah 3 memerlukan site key dan secret key-nya

Minta Claude Menghubungkan Toko Anda

Di sesi STILLFORM Anda, tambahkan Project ID Anda di bawah, lalu kirim:

Hubungkan STILLFORM ke Supabase

Claude menautkan proyek Anda, menyiapkan database dan koleksi awal, lalu men-deploy fungsi checkout.

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 Anda

abcdefghijklmnopqrst

Claude bertanya sebelum setiap perintah — klik Allow. Claude berhenti saat giliran Anda.

Masukkan Secret Anda di Terminal

Saat Claude meminta, jalankan setup bawaan toko di Terminal. Setup ini melewati semua yang sudah dikerjakan Claude dan hanya menanyakan hal yang bersifat pribadi:

npm run setup

Di bagian perlindungan checkout, pilih 1, lalu tempel site key dan secret key Turnstile Anda Jika ditawarkan untuk men-deploy ulang fungsi place-order, ketik n — Claude sudah men-deploy-nya Masukkan email Anda dan kata sandi minimal 12 karakter untuk akun pemilik Anda Saat diminta, matikan Allow new users to sign up di Dashboard Supabase Anda, lalu tekan Enter — setup memeriksa bahwa opsi itu sudah mati Beri tahu Claude bahwa sudah selesai

Supabase Authentication Sign In / Providers

Jaga kerahasiaannya

Ketik secret key Turnstile dan kata sandi Anda hanya di prompt tersembunyi Terminal. Jangan pernah menempelkannya di chat.

Periksa Setup dan Masuk

Claude menjalankan pemeriksaan toko dan memulainya ulang. Saat Claude bilang semuanya lolos:

Muat ulang toko lokal Anda — sekarang koleksinya dimuat dari database Anda Buka /admin dan masuk dengan email dan kata sandi pemilik Anda

Anda sudah berada di Studio, dashboard toko Anda. Hanya akun di daftar administrator toko yang bisa membukanya, dan tidak ada yang bisa mendaftar.

Tambahkan Produk

Semua yang Anda simpan di Studio langsung masuk ke database Anda — tanpa mengubah kode.

Studio Products Add a product

Isi Name, Category, dan One-line summary Di Photos, tambahkan foto tampak depan Di Price, sizes and stock, atur Price dan pilih Sizes Beri nama warna pertama, pilih swatch-nya, dan masukkan stoknya untuk setiap ukuran Klik Add a colour untuk setiap varian warna lainnya Klik Publish

Opsional: setelah produk Anda sendiri masuk, arsipkan atau hapus delapan produk demo di Products.

Pasang Foto di Rak

Menambahkan foto tampak depan akan membuka editor rak. Potongan PNG transparan dengan kait gantungan di atas terlihat paling bagus; foto dengan latar dinding polos dan terang juga bisa.

Aktifkan Remove the plain background jika fotonya bukan potongan Atur Size dan posisinya, atau seret foto di pratinjau Deskripsikan foto untuk pembaca layar Klik Use this photo

Periksa Preview on the rail: arahkan kursor untuk memutar item, lalu klik untuk membuka tampilan dekatnya. Foto belakang dan samping membuatnya bisa berputar penuh.

Atur Rak

Studio Rail

Di Add a piece, pilih produk baru Anda dan warnanya Seret item untuk mengurutkannya, atau gunakan tanda panah Hapus item yang tidak Anda inginkan di halaman utama Klik Save rail

Enam sampai sepuluh item pas untuk layar desktop. Di ponsel, rak berubah menjadi carousel yang bisa digeser.

Atur Koleksi dan Lookbook

Studio Collections

Di Homepage selection, pilih item yang tampil paling depan di halaman utama, lalu klik Save Klik New collection, atau edit yang sudah ada, lalu tambahkan item-itemnya

Studio Lookbook

Edit judul dan pengantarnya Unggah foto dan keterangan Anda sendiri untuk setiap spread Sembunyikan atau urutkan ulang spread, lalu klik Save lookbook

Perbarui Pengaturan dan Buka Checkout

Studio Settings

Di Store, atur nama toko dan mata uang Anda Di Contact, Shipping, dan Policies, tambahkan detail Anda sendiri Di Homepage, ubah teks di sekitar rak Di Checkout, aktifkan Cash on delivery, Bank transfer, atau Pay at studio pickup, lalu edit instruksinya Aktifkan Open checkout Klik Save settings

STILLFORM tidak menerima data kartu: pembeli memilih salah satu metode Anda, dan Anda menandai setiap pesanan sebagai lunas saat uangnya masuk.

Buat Pesanan Uji Coba

Buka toko lokal Anda, masukkan satu item ke tas belanja, lalu checkout Catat nomor referensi pesanan di halaman konfirmasi Di Studio, buka Orders dan klik pesanan uji coba Anda Klik Cancel order — stoknya kembali tersedia untuk dijual

Buat Web App Anda

Belum punya hosting? Ambil paket di Persyaratan.

Hostinger Websites Create website Web App

Pilih domain Anda sendiri, atau domain sementara untuk memulai Pilih Import your Git repository Lanjutkan dengan Continue with GitHub dan beri Hostinger akses ke repositori STILLFORM Anda Pilih repositori dan branch main

Konfigurasi & Deploy

Biarkan preset framework Vite yang terdeteksi oleh Hostinger Pilih Node.js 22 Atur perintah build ke npm run build — jangan pernah build:demo Atur direktori output ke dist dan biarkan file entri kosong

Sebelum build pertama, tambahkan tiga variabel lingkungan ini — nilainya sama dengan di .env.local Anda, yang bisa ditunjukkan Claude. Nilainya dimasukkan ke dalam toko saat build, jadi mengubahnya nanti memerlukan deploy ulang.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Publishable key Supabase

VITE_TURNSTILE_SITE_KEY

Site key Turnstile

Nilai Supabase ada di Connect. Site key ada di widget Turnstile Anda.

Buka Connect

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

Hanya nilai publik

Jangan pernah menambahkan secret key Turnstile, Secret key Supabase, atau service_role key ke Hostinger. Apa pun yang diawali VITE_ terlihat di browser.

Minta Claude menjalankan npm run preflight, pemeriksaan peluncuran toko — deploy hanya jika lolos Klik Deploy dan tunggu build selesai Buka alamat live Anda

Hubungkan Domain Live Anda

Supabase Authentication URL Configuration

Atur Site URL ke alamat live Anda, diawali https:// Tambahkan alamat yang sama ke Redirect URLs Klik Save

Cloudflare Turnstile

Buka widget STILLFORM Anda Tambahkan domain live Anda ke hostname-nya lalu simpan

Allow new users to sign up tetap mati di Supabase.

Uji Toko Live Anda

Buka salah satu halaman produk Anda langsung lewat alamatnya, lalu muat ulang Masuk di /admin pada alamat live Anda Masukkan satu item ke tas belanja dan selesaikan checkout — pemeriksaan Turnstile tidak terlihat atau berupa satu kotak centang Temukan pesanan uji Anda di Orders, lalu batalkan

Cara Hostinger menangani tautan langsung untuk toko ini belum dikonfirmasi. Jika halaman produk menampilkan 404 saat dibuka atau dimuat ulang, minta Claude membahas bagian Hostinger di docs/DEPLOY.md bersama Anda.

Perbarui Toko Anda Nanti

Produk, foto, stok, pesanan, dan pengaturan: ubah di Studio — langsung live

Perubahan desain atau kode: minta Claude membuatnya dan mem-push-nya ke main — Hostinger mem-build ulang toko Anda di setiap push