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