Yönetim Panelli Lüks AI Moda Mağazası Kurun

Claude Desktop

Mağazanızı kurmak ve özelleştirmek için masaüstü uygulamasında Claude Code'u kullanın.

Claude Desktop'ı İndirin

https://claude.ai/download

GitHub hesabı

Ücretsiz. STILLFORM'un size ait kopyası burada durur ve Hostinger onu buradan yayına alır.

GitHub Hesabı Oluşturun

https://github.com/signup

Node.js

Güncel LTS sürümünü indirin. Mağazayı bilgisayarınızda çalıştırır.

Node.js'i İndirin

https://nodejs.org/en/download

Supabase hesabı

Ücretsiz paket yeterlidir. Ürünleriniz, fotoğraflarınız, siparişleriniz ve sahip girişiniz burada tutulur.

Supabase Hesabı Oluşturun

https://supabase.link/r4gdwhi

Cloudflare hesabı

Ücretsiz. Turnstile kontrolü botları ödeme sayfanızdan uzak tutar.

Cloudflare Hesabı Oluşturun

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

Hostinger barındırma

STILLFORM ücretsizdir; canlı mağazanız burada çalışır.

Bir Hostinger Paketi Seçin

Unlimited paketini ya da bir Cloud paketini kullanın — STILLFORM bir Node.js Web App olarak yayına alınır.

Kendi Kopyanızı Oluşturun

Önce bitmiş mağazayı canlı demoda deneyin: kıyafet askılığının üzerine gelin, sürükleyin ve bir parçayı açın. Orada ödeme ve Studio kapalıdır.

STILLFORM'u GitHub'da Açın

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

Use this template'e, ardından Create a new repository'ye tıklayın Bir ad verin ve Public ya da Private seçin Create repository'ye tıklayın ve adresini kopyalayın

Bilgisayarınıza Getirin

Claude Desktop Code Local

Documents gibi bir klasörde bir Local oturumu başlatın, deponuzun adresini aşağıya ekleyin ve gönderin:

Kopyanızı Klonlayın

Size ait STILLFORM deposunu yeni bir alt klasöre indirir.

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.

Yeni deponuzun adresi

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

STILLFORM Klasörünüzü Açın

Yeni bir Local oturumu başlatın Claude'un az önce oluşturduğu klasörü açın — içinde README.md olanı Claude Desktop sorarsa klasöre güvenin

Mağazayı Yerelde Başlatın

STILLFORM oturumunuzda şunu gönderin:

STILLFORM'u Hazırlayın ve Başlatın

Projeyi kurar ve mağazayı bilgisayarınızda demo modunda başlatır.

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.

Claude'un verdiği adresi açın, genellikle http://localhost:5173. Supabase olmadan mağaza yerleşik koleksiyonuyla demo modunda çalışır: askılık, ürün sayfaları ve sepet çalışır, ödeme ise Adım 3'e kadar kapalı kalır.

Bir Supabase Projesi Oluşturun

Supabase Dashboard'u Açın

https://supabase.com/dashboard

New project'e tıklayın — herhangi bir bölge ve Free paketi uygundur Data API'yi açık bırakın Veritabanı şifresini güvenli bir yere kaydedin — Claude'un buna hiç ihtiyacı olmaz Proje hazır olduğunda Project ID'sini kopyalayın

Supabase Project Settings General

Project ID, Claude'un ihtiyaç duyduğu tek proje bilgisidir. Project URL ve Publishable key'inizi Claude, Supabase CLI üzerinden kendisi okur.

Supabase CLI'a Giriş Yapın

Bu adım tarayıcınızı açar, bu yüzden bir kez kendiniz çalıştırırsınız:

STILLFORM oturumunuzun üstündeki Terminal düğmesine tıklayın Aşağıdaki komutu çalıştırın Açılan tarayıcı penceresinde girişi onaylayın

npx supabase login

Bir Turnstile Widget'ı Oluşturun

Cloudflare Dashboard'u Açın

https://dash.cloudflare.com/

Cloudflare Turnstile Add widget

Widget'a mağazanızın adını verin Hostname'ler bölümüne localhost ekleyin Biliyorsanız mağazanızın alan adını da ekleyin — bilmiyorsanız Adım 5'te eklersiniz Managed modunu seçin ve widget'ı oluşturun Sayfayı açık tutun: Adım 3'te site key ve secret key gerekir

Claude'dan Mağazanızı Bağlamasını İsteyin

STILLFORM oturumunuzda Project ID'nizi aşağıya ekleyin ve gönderin:

STILLFORM'u Supabase'e Bağlayın

Claude projenizi bağlar, veritabanını ve başlangıç koleksiyonunu kurar, ardından ödeme fonksiyonunu yayına alır.

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.

Supabase Project ID'niz

abcdefghijklmnopqrst

Claude her komuttan önce sorar — Allow'a tıklayın. Sıra size geldiğinde durur.

Gizli Bilgilerinizi Terminal'e Girin

Claude istediğinde mağazanın kendi kurulumunu Terminal'de çalıştırın. Claude'un zaten yaptığı her şeyi atlar ve size yalnızca gizli olanları sorar:

npm run setup

Ödeme korumasında 1'i seçin, ardından Turnstile site key ve secret key'inizi yapıştırın place-order fonksiyonunu yeniden dağıtmayı önerirse n yazın — Claude onu zaten dağıttı Sahip hesabınız için e-postanızı ve en az 12 karakterlik bir şifre girin Sorulduğunda Supabase Dashboard'unuzda Allow new users to sign up'ı kapatın, ardından Enter'a basın — kurulum kapalı olduğunu kontrol eder Claude'a işin bittiğini söyleyin

Supabase Authentication Sign In / Providers

Bunları gizli tutun

Turnstile secret key'inizi ve şifrenizi yalnızca Terminal'in gizli girişlerine yazın. Bunları asla sohbete yapıştırmayın.

Kurulumu Kontrol Edin ve Giriş Yapın

Claude mağazanın kontrollerini çalıştırır ve mağazayı yeniden başlatır. Her şeyin geçtiğini söylediğinde:

Yerel mağazanızı yeniden yükleyin — artık koleksiyonunu veritabanınızdan yükler /admin'i açın ve sahip e-postanız ile şifrenizle giriş yapın

Artık mağazanızın paneli Studio'dasınız. Onu yalnızca mağazanın yönetici listesindeki hesaplar açabilir ve kimse kaydolamaz.

Bir Ürün Ekleyin

Studio'da kaydettiğiniz her şey doğrudan veritabanınıza gider — kod değişikliği gerekmez.

Studio Products Add a product

Name, Category ve One-line summary alanlarını doldurun Photos bölümüne bir ön fotoğraf ekleyin Price, sizes and stock bölümünde Price'ı belirleyin ve Sizes'ı seçin İlk renge bir ad verin, renk örneğini seçin ve her beden için stoğunu girin Diğer her renk seçeneği için Add a colour'a tıklayın Publish'e tıklayın

İsteğe bağlı: kendi parçalarınızı ekledikten sonra sekiz demo ürünü Products'tan arşivleyin ya da silin.

Fotoğrafı Askılığa Yerleştirin

Bir ön fotoğraf eklemek askılık düzenleyicisini açar. Üstte askı kancası olan şeffaf bir PNG kesim en iyi görünür; düz, açık renkli bir duvar önünde çekilmiş fotoğraf da olur.

Fotoğraf kesim değilse Remove the plain background'u açın Size'ı ve konumu ayarlayın ya da fotoğrafı önizlemede sürükleyin Fotoğrafı ekran okuyucular için açıklayın Use this photo'ya tıklayın

Preview on the rail'e bakın: parçayı döndürmek için üzerine gelin, yakın görünümü açmak için tıklayın. Arka ve yan fotoğraflar tam dönmesini sağlar.

Askılığı Düzenleyin

Studio Rail

Add a piece altında yeni ürününüzü ve rengini seçin Parçaları sürükleyerek sıralayın ya da okları kullanın Ana sayfada istemediğiniz parçaları kaldırın Save rail'e tıklayın

Masaüstü ekranına altı ila on parça uyar. Telefonlarda askılık kaydırılabilir bir karusele dönüşür.

Koleksiyonları ve Lookbook'u Şekillendirin

Studio Collections

Homepage selection bölümünde ana sayfanın başında yer alacak parçaları seçin ve Save'e tıklayın New collection'a tıklayın ya da bir koleksiyonu düzenleyin ve parçalarını ekleyin

Studio Lookbook

Başlığı ve girişi düzenleyin Her sayfa düzeni için kendi fotoğraflarınızı ve açıklamalarınızı yükleyin Sayfa düzenlerini gizleyin ya da yeniden sıralayın, ardından Save lookbook'a tıklayın

Ayarları Güncelleyin ve Ödemeyi Açın

Studio Settings

Store bölümünde mağaza adınızı ve para biriminizi belirleyin Contact, Shipping ve Policies bölümlerine kendi bilgilerinizi ekleyin Homepage bölümünde askılığın çevresindeki metinleri değiştirin Checkout bölümünde Cash on delivery, Bank transfer ya da Pay at studio pickup'ı açın ve talimatlarını düzenleyin Open checkout'u açın Save settings'e tıklayın

STILLFORM kart bilgisi almaz: alışveriş yapanlar yöntemlerinizden birini seçer ve para geldiğinde her siparişi ödendi olarak işaretlersiniz.

Bir Test Siparişi Verin

Yerel mağazanızı açın, sepete bir parça ekleyin ve ödemeye geçin Onay sayfasındaki sipariş numarasını not edin Studio'da Orders'ı açın ve test siparişinize tıklayın Cancel order'a tıklayın — stoğu yeniden satışa çıkar

Web App'inizi Oluşturun

Henüz hosting'iniz yok mu? Gereksinimler bölümünden bir paket edinin.

Hostinger Websites Create website Web App

Kendi alan adınızı ya da başlamak için geçici bir alan adı seçin Import your Git repository seçeneğini seçin Continue with GitHub ile devam edin ve Hostinger'a STILLFORM deponuz için erişim verin Depoyu ve main dalını seçin

Yapılandırın ve Dağıtın

Hostinger'ın algıladığı Vite framework ön ayarını koruyun Node.js 22'yi seçin Build komutunu npm run build olarak ayarlayın — asla build:demo değil Çıktı dizinini dist olarak ayarlayın ve giriş dosyasını boş bırakın

İlk build'den önce bu üç ortam değişkenini ekleyin — değerler .env.local dosyanızdakilerle aynıdır, Claude size gösterebilir. Değerler mağazaya build sırasında eklenir, bu yüzden sonradan birini değiştirmek yeniden dağıtım gerektirir.

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 değerleri Connect'te bulunur. Site key, Turnstile widget'ınızdadır.

Connect'i açın

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

Yalnızca herkese açık değerler

Turnstile secret key'ini, Supabase Secret key'ini ya da service_role key'ini asla Hostinger'a eklemeyin. VITE_ ile başlayan her şey tarayıcıda görünür.

Claude'dan mağazanın yayın kontrolü olan npm run preflight'ı çalıştırmasını isteyin — yalnızca geçerse dağıtın Deploy'a tıklayın ve build'in bitmesini bekleyin Canlı adresinizi açın

Canlı Alan Adınızı Bağlayın

Supabase Authentication URL Configuration

Site URL'yi https:// ile başlayan canlı adresiniz olarak ayarlayın Aynı adresi Redirect URLs'e ekleyin Save'e tıklayın

Cloudflare Turnstile

STILLFORM widget'ınızı açın Canlı alan adınızı hostname'lerine ekleyin ve kaydedin

Allow new users to sign up, Supabase'de kapalı kalır.

Canlı Mağazanızı Test Edin

Ürün sayfalarınızdan birini doğrudan adresiyle açın, ardından sayfayı yenileyin Canlı adresinizde /admin'den giriş yapın Sepete bir parça ekleyin ve ödemeyi tamamlayın — Turnstile kontrolü görünmez ya da tek bir onay kutusudur Test siparişinizi Orders'ta bulun, ardından iptal edin

Hostinger'ın bu mağaza için doğrudan bağlantıları nasıl işlediği henüz doğrulanmadı. Bir ürün sayfası açtığınızda ya da yenilediğinizde 404 gösterirse Claude'dan docs/DEPLOY.md içindeki Hostinger bölümünü sizinle birlikte incelemesini isteyin.

Mağazanızı Daha Sonra Güncelleyin

Ürünler, fotoğraflar, stok, siparişler ve ayarlar: bunları Studio'da değiştirin — hemen yayına girer

Tasarım ya da kod değişiklikleri: Claude'dan bunları yapmasını ve main'e push etmesini isteyin — Hostinger her push'ta mağazanızı yeniden build eder