Build a Luxury AI Fashion Store with Admin Dashboard
Launch a fashion store with an interactive clothing rail, real checkout, and easy product management. View live demo (opens in a new tab)
Roadmap & resources
Requirements
Claude Desktop
Use Claude Code in the desktop app to set up and customize your store.
Download Claude Desktop
https://claude.ai/download
GitHub account
Free. Your own copy of STILLFORM lives here, and Hostinger deploys from it.
Create GitHub Account
https://github.com/signup
Node.js
Download the current LTS release. It runs the store on your computer.
Download Node.js
https://nodejs.org/en/download
Supabase account
The free plan is enough. It holds your products, photos, orders and owner sign-in.
Create Supabase Account
https://supabase.link/r4gdwhi
Cloudflare account
Free. Its Turnstile check keeps bots out of your checkout.
Create Cloudflare Account
https://dash.cloudflare.com/sign-up
Hostinger hosting
STILLFORM is free; your live store runs here.
Choose a Hostinger Plan
Use the Unlimited plan or a Cloud plan — STILLFORM deploys as a Node.js Web App.
Get the STILLFORM Starter
Create Your Own Copy
Try the finished store first in the live demo: hover the clothing rail, drag it, and open a piece. Checkout and Studio are switched off there.
Open STILLFORM on GitHub
https://github.com/salhiworks/stillform-fashion-store
Click Use this template, then Create a new repository Name it and choose Public or Private Click Create repository and copy its address
Bring It to Your Computer
Claude Desktop Code Local
Start a Local session in a folder such as Documents, add your repository's address below, and send:
Clone Your Copy
Downloads your own STILLFORM repository into a new subfolder.
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.
Your new repository's address
https://github.com/your-name/my-fashion-store
Open Your STILLFORM Folder
Start a new Local session Open the folder Claude just created — the one with README.md inside If Claude Desktop asks, trust the folder
Launch the Store Locally
In your STILLFORM session, send:
Prepare and Launch STILLFORM
Installs the project and starts the store on your computer, in demo mode.
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.
Open the address Claude gives you, usually http://localhost:5173. Without Supabase the store runs in demo mode on its built-in collection: the rail, product pages and bag work, and checkout stays off until Step 3.
Set Up Supabase & Turnstile
Create a Supabase Project
Open Supabase Dashboard
https://supabase.com/dashboard
Click New project — any region and the Free plan are fine Leave the Data API turned on Save the database password somewhere safe — Claude never needs it When the project is ready, copy its Project ID
Supabase Project Settings General
The Project ID is the only project detail Claude needs. It reads your Project URL and Publishable key itself through the Supabase CLI.
Sign In to the Supabase CLI
This opens your browser, so you run it yourself, once:
Click the Terminal button at the top of your STILLFORM session Run the command below Approve the sign-in in the browser window that opens
npx supabase login
Create a Turnstile Widget
Open Cloudflare Dashboard
https://dash.cloudflare.com/
Cloudflare Turnstile Add widget
Name the widget after your store Under hostnames, add localhost Also add your shop's domain if you already know it — otherwise you add it in Step 5 Choose Managed mode and create the widget Keep the page open: Step 3 needs its site key and secret key
Connect Your Store with Claude Desktop
Ask Claude to Connect Your Store
In your STILLFORM session, add your Project ID below and send:
Connect STILLFORM to Supabase
Claude links your project, sets up the database and the starter collection, and deploys the checkout function.
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.
Your Supabase Project ID
abcdefghijklmnopqrst
Claude asks before each command — click Allow. It stops when it's your turn.
Enter Your Secrets in the Terminal
When Claude asks, run the store's own setup in the Terminal. It skips everything Claude already did and asks you only for what's private:
npm run setup
At checkout protection, choose 1, then paste your Turnstile site key and secret key If it offers to redeploy the place-order function, type n — Claude already deployed it Enter your email and a password of at least 12 characters for your owner account When it asks, turn off Allow new users to sign up in your Supabase Dashboard, then press Enter — the setup checks that it's off Tell Claude it's done
Supabase Authentication Sign In / Providers
Keep these private
Type your Turnstile secret key and your password only into the Terminal's hidden prompts. Never paste them into the chat.
Check the Setup and Sign In
Claude runs the store's checks and restarts it. When it says everything passed:
Reload your local store — it now loads its collection from your database Open /admin and sign in with your owner email and password
You're in Studio, your store's dashboard. Only accounts on the store's administrator list can open it, and nobody can sign up.
Customize Your Store in Studio
Add a Product
Everything you save in Studio goes straight to your database — no code changes.
Studio Products Add a product
Fill in the Name, Category and One-line summary Under Photos, add a front photo In Price, sizes and stock, set the Price and choose the Sizes Name the first colour, pick its swatch and enter its stock for each size Click Add a colour for every other colourway Click Publish
Optional: once your own pieces are in, archive or delete the eight demo products in Products.
Fit the Photo on the Rail
Adding a front photo opens the rail editor. A transparent PNG cut-out with the hanger hook at the top looks best; a photo against a plain, light wall works too.
Turn on Remove the plain background if the photo isn't a cut-out Adjust the Size and position, or drag the photo in the preview Describe the photo for screen readers Click Use this photo
Check Preview on the rail: hover to turn the piece and click it to open the close-up. Back and side photos let it turn fully.
Arrange the Rail
Studio Rail
Under Add a piece, choose your new product and colour Drag the pieces into order, or use the arrows Remove any piece you don't want on the homepage Click Save rail
Six to ten pieces suit a desktop screen. On phones the rail becomes a swipeable carousel.
Shape Collections and the Lookbook
Studio Collections
In Homepage selection, choose the pieces that lead the homepage and click Save Click New collection, or edit one, and add its pieces
Studio Lookbook
Edit the title and introduction Upload your own photos and captions for each spread Hide or reorder spreads, then click Save lookbook
Update Settings and Open Checkout
Studio Settings
In Store, set your store name and currency In Contact, Shipping and Policies, add your own details In Homepage, change the words around the rail In Checkout, turn on Cash on delivery, Bank transfer or Pay at studio pickup, and edit its instructions Turn on Open checkout Click Save settings
STILLFORM takes no card details: shoppers choose one of your methods, and you mark each order paid when the money arrives.
Place a Test Order
Open your local store, put a piece in the bag and check out Note the order reference on the confirmation page In Studio, open Orders and click your test order Click Cancel order — its stock goes back on sale
Deploy on Hostinger
Create Your Web App
No hosting yet? Get a plan in Requirements.
Hostinger Websites Create website Web App
Choose your own domain, or a temporary domain to start Choose Import your Git repository Continue with GitHub and give Hostinger access to your STILLFORM repository Select the repository and the main branch
Configure & Deploy
Keep the Vite framework preset Hostinger detects Choose Node.js 22 Set the build command to npm run build — never build:demo Set the output directory to dist and leave the entry file empty
Before the first build, add these three environment variables — the same values as your .env.local, which Claude can show you. They're built into the store, so changing one later needs a redeploy.
VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY
VITE_SUPABASE_URL
Supabase Project URL
VITE_SUPABASE_ANON_KEY
Supabase Publishable key
VITE_TURNSTILE_SITE_KEY
Turnstile site key
Supabase values are in Connect. The site key is on your Turnstile widget.
Open Connect
https://supabase.com/dashboard/project/_?showConnect=true
Public values only
Never add the Turnstile secret key, the Supabase Secret key or the service_role key to Hostinger. Anything starting with VITE_ is visible in the browser.
Ask Claude to run npm run preflight, the store's launch check — deploy only when it passes Click Deploy and wait for the build to finish Open your live address
Connect Your Live Domain
Supabase Authentication URL Configuration
Set the Site URL to your live address, starting with https:// Add the same address to the Redirect URLs Click Save
Cloudflare Turnstile
Open your STILLFORM widget Add your live domain to its hostnames and save
Allow new users to sign up stays off in Supabase.
Test Your Live Store
Open one of your product pages directly by its address, then refresh it Sign in at /admin on your live address Put a piece in the bag and check out — the Turnstile check is invisible or a single tick box Find your test order in Orders, then cancel it
Hostinger's handling of direct links hasn't been confirmed for this store yet. If a product page shows a 404 when you open or refresh it, ask Claude to go through the Hostinger section of docs/DEPLOY.md with you.
Update Your Store Later
Products, photos, stock, orders and settings: change them in Studio — they're live straight away
Design or code changes: ask Claude to make them and push them to main — Hostinger rebuilds your store on every push