Crea un negozio di moda di lusso con IA e pannello admin

Claude Desktop

Usa Claude Code nell'app desktop per configurare e personalizzare il tuo negozio.

Scarica Claude Desktop

https://claude.ai/download

Account GitHub

Gratuito. Qui vive la tua copia di STILLFORM, e Hostinger la distribuisce da qui.

Crea un account GitHub

https://github.com/signup

Node.js

Scarica la versione LTS attuale. Fa girare il negozio sul tuo computer.

Scarica Node.js

https://nodejs.org/en/download

Account Supabase

Il piano gratuito basta. Contiene i tuoi prodotti, le foto, gli ordini e l'accesso del proprietario.

Crea un account Supabase

https://supabase.link/r4gdwhi

Account Cloudflare

Gratuito. Il controllo Turnstile tiene i bot lontani dal tuo checkout.

Crea un account Cloudflare

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

Hosting Hostinger

STILLFORM è gratuito; il tuo negozio online gira qui.

Scegli un piano Hostinger

Usa il piano Unlimited o un piano Cloud: STILLFORM viene distribuito come Node.js Web App.

Crea la tua copia

Prova prima il negozio finito nella demo dal vivo: passa il mouse sullo stender, trascinalo e apri un capo. Lì il checkout e Studio sono disattivati.

Apri STILLFORM su GitHub

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

Clicca su Use this template, poi su Create a new repository Dagli un nome e scegli Public o Private Clicca su Create repository e copia il suo indirizzo

Portalo sul tuo computer

Claude Desktop Code Local

Avvia una sessione Local in una cartella come Documenti, aggiungi qui sotto l'indirizzo del tuo repository e invia:

Clona la tua copia

Scarica il tuo repository STILLFORM in una nuova sottocartella.

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.

L'indirizzo del tuo nuovo repository

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

Apri la tua cartella STILLFORM

Avvia una nuova sessione Local Apri la cartella che Claude ha appena creato, quella che contiene README.md Se Claude Desktop lo chiede, considera attendibile la cartella

Avvia il negozio in locale

Nella tua sessione STILLFORM, invia:

Prepara e avvia STILLFORM

Installa il progetto e avvia il negozio sul tuo computer, in modalità 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.

Apri l'indirizzo che ti dà Claude, di solito http://localhost:5173. Senza Supabase il negozio gira in modalità demo con la sua collezione integrata: lo stender, le pagine prodotto e la borsa funzionano, e il checkout resta disattivato fino al Passaggio 3.

Creare un progetto Supabase

Apri la dashboard di Supabase

https://supabase.com/dashboard

Clicca su New project: va bene qualsiasi regione e il piano Free Lascia attiva la Data API Conserva la password del database in un posto sicuro: a Claude non serve mai Quando il progetto è pronto, copia il suo Project ID

Supabase Project Settings General

Il Project ID è l'unico dato del progetto che serve a Claude. Legge da solo la tua Project URL e la Publishable key tramite la Supabase CLI.

Accedi alla Supabase CLI

Questo apre il browser, quindi lo esegui tu, una sola volta:

Clicca sul pulsante Terminal in alto nella tua sessione STILLFORM Esegui il comando qui sotto Approva l'accesso nella finestra del browser che si apre

npx supabase login

Crea un widget Turnstile

Apri la dashboard di Cloudflare

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

Dai al widget il nome del tuo negozio In hostnames, aggiungi localhost Aggiungi anche il dominio del negozio se lo conosci già, altrimenti lo aggiungi nel Passaggio 5 Scegli la modalità Managed e crea il widget Tieni la pagina aperta: al Passaggio 3 servono la sua chiave del sito e la chiave segreta

Chiedi a Claude di collegare il tuo negozio

Nella tua sessione STILLFORM, aggiungi qui sotto il tuo Project ID e invia:

Collega STILLFORM a Supabase

Claude collega il tuo progetto, configura il database e la collezione iniziale e distribuisce la funzione di 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.

Il tuo Project ID di Supabase

abcdefghijklmnopqrst

Claude chiede prima di ogni comando: clicca su Allow. Si ferma quando tocca a te.

Inserisci i tuoi segreti nel Terminal

Quando Claude te lo chiede, esegui la configurazione del negozio nel Terminal. Salta tutto ciò che Claude ha già fatto e ti chiede solo i dati privati:

npm run setup

Alla protezione del checkout, scegli 1, poi incolla la chiave del sito e la chiave segreta di Turnstile Se propone di ripetere il deploy della funzione place-order, digita n: Claude l'ha già fatto Inserisci la tua email e una password di almeno 12 caratteri per il tuo account proprietario Quando te lo chiede, disattiva Allow new users to sign up nella dashboard di Supabase, poi premi Invio: il setup verifica che sia disattivato Di' a Claude che hai finito

Supabase Authentication Sign In / Providers

Tieni questi dati privati

Digita la chiave segreta di Turnstile e la password solo nelle richieste nascoste del Terminal. Non incollarle mai nella chat.

Controlla la configurazione e accedi

Claude esegue i controlli del negozio e lo riavvia. Quando dice che è tutto a posto:

Ricarica il negozio in locale: ora carica la collezione dal tuo database Apri /admin e accedi con email e password del proprietario

Sei in Studio, la dashboard del tuo negozio. Possono aprirla solo gli account nell'elenco degli amministratori del negozio, e nessuno può registrarsi.

Aggiungi un prodotto

Tutto ciò che salvi in Studio va direttamente nel tuo database, senza modifiche al codice.

Studio Products Add a product

Compila Name, Category e One-line summary In Photos, aggiungi una foto frontale In Price, sizes and stock, imposta il Price e scegli le Sizes Dai un nome al primo colore, scegli il suo campione e inserisci le scorte per ogni taglia Clicca su Add a colour per ogni altra variante di colore Clicca su Publish

Facoltativo: dopo aver aggiunto i tuoi capi, archivia o elimina gli otto prodotti demo in Products.

Adatta la foto allo stender

Aggiungendo una foto frontale si apre l'editor dello stender. Il risultato migliore si ottiene con un ritaglio PNG trasparente con il gancio della gruccia in alto; va bene anche una foto su una parete chiara e uniforme.

Attiva Remove the plain background se la foto non è un ritaglio Regola Size e la posizione, oppure trascina la foto nell'anteprima Descrivi la foto per gli screen reader Clicca su Use this photo

Controlla Preview on the rail: passa il mouse per far ruotare il capo e cliccaci sopra per aprire il primo piano. Le foto del retro e di lato gli permettono di ruotare del tutto.

Organizza lo stender

Studio Rail

In Add a piece, scegli il tuo nuovo prodotto e il colore Trascina i capi per ordinarli, oppure usa le frecce Rimuovi i capi che non vuoi nella homepage Clicca su Save rail

Da sei a dieci capi stanno bene su uno schermo desktop. Sui telefoni lo stender diventa un carosello da scorrere.

Definisci le collezioni e il lookbook

Studio Collections

In Homepage selection, scegli i capi che aprono la homepage e clicca su Save Clicca su New collection, oppure modificane una, e aggiungi i suoi capi

Studio Lookbook

Modifica il titolo e l'introduzione Carica foto e didascalie tue per ogni doppia pagina Nascondi o riordina le doppie pagine, poi clicca su Save lookbook

Aggiorna le impostazioni e apri il checkout

Studio Settings

In Store, imposta il nome del negozio e la valuta In Contact, Shipping e Policies, aggiungi i tuoi dati In Homepage, cambia i testi intorno allo stender In Checkout, attiva Cash on delivery, Bank transfer o Pay at studio pickup e modifica le sue istruzioni Attiva Open checkout Clicca su Save settings

STILLFORM non chiede dati della carta: chi acquista sceglie uno dei tuoi metodi, e tu segni ogni ordine come pagato quando arriva il denaro.

Fai un ordine di prova

Apri il negozio in locale, metti un capo nella borsa e completa l'acquisto Annota il riferimento dell'ordine nella pagina di conferma In Studio, apri Orders e clicca sul tuo ordine di prova Clicca su Cancel order: le scorte tornano in vendita

Crea la tua Web App

Non hai ancora un hosting? Scegli un piano nei Requisiti.

Hostinger Websites Create website Web App

Scegli il tuo dominio, oppure un dominio temporaneo per iniziare Scegli Import your Git repository Scegli Continue with GitHub e dai a Hostinger accesso al tuo repository STILLFORM Seleziona il repository e il branch main

Configura ed esegui il deploy

Mantieni il preset di framework Vite rilevato da Hostinger Scegli Node.js 22 Imposta il comando di build su npm run build, mai build:demo Imposta la directory di output su dist e lascia vuoto il file di ingresso

Prima della prima build, aggiungi queste tre variabili d'ambiente: gli stessi valori del tuo .env.local, che Claude può mostrarti. Sono integrate nel negozio, quindi se ne cambi una in seguito serve un nuovo deploy.

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY VITE_TURNSTILE_SITE_KEY

VITE_SUPABASE_URL

Supabase Project URL

VITE_SUPABASE_ANON_KEY

Publishable key di Supabase

VITE_TURNSTILE_SITE_KEY

Chiave del sito Turnstile

I valori di Supabase sono in Connect. La chiave del sito è nel tuo widget Turnstile.

Apri Connect

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

Solo valori pubblici

Non aggiungere mai a Hostinger la chiave segreta di Turnstile, la Secret key di Supabase o la chiave service_role. Tutto ciò che inizia con VITE_ è visibile nel browser.

Chiedi a Claude di eseguire npm run preflight, il controllo di lancio del negozio: fai il deploy solo quando lo supera Clicca su Deploy e attendi che la build finisca Apri il tuo indirizzo online

Collega il tuo dominio online

Supabase Authentication URL Configuration

Imposta la Site URL sul tuo indirizzo online, che inizia con https:// Aggiungi lo stesso indirizzo ai Redirect URLs Clicca su Save

Cloudflare Turnstile

Apri il tuo widget STILLFORM Aggiungi il tuo dominio online ai suoi hostnames e salva

Allow new users to sign up resta disattivato in Supabase.

Prova il tuo negozio online

Apri direttamente una delle tue pagine prodotto dal suo indirizzo, poi ricaricala Accedi a /admin sul tuo indirizzo online Metti un capo nella borsa e completa il checkout: il controllo Turnstile è invisibile o una sola casella di spunta Trova il tuo ordine di prova in Orders, poi annullalo

La gestione dei link diretti da parte di Hostinger non è ancora stata confermata per questo negozio. Se una pagina prodotto mostra un errore 404 quando la apri o la ricarichi, chiedi a Claude di esaminare con te la sezione Hostinger di docs/DEPLOY.md.

Aggiorna il negozio in seguito

Prodotti, foto, scorte, ordini e impostazioni: modificali in Studio, sono online subito

Modifiche al design o al codice: chiedi a Claude di farle e di inviarle su main; Hostinger ricompila il negozio a ogni push