🛠️ Installation Guide
Follow the steps below to get your theme live with Supabase, Netlify, and GitHub-backed product editing.
1️⃣ Download & GitHub Setup
- Download the theme
.zip
file and unzip it. - Open the folder in your code editor.
- Create a new GitHub repo.
- Push the files:
git init
git remote add origin https://github.com/yourusername/yourrepo.git
git add .
git commit -m "Initial upload"
git push -u origin master
2️⃣ Create Your Supabase Project
- Go to supabase.com → New Project
- Choose a name and region.
- Once created, open the SQL Editor and paste the contents of:
/database/setup.sql
- Go to Project Settings → API, and copy:
SUPABASE_URL
SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
3️⃣ Optional: Test Locally
Create a .env
file in your root project folder:
PUBLIC_SUPABASE_URL=your-supabase-url
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
GITHUB_TOKEN=your-personal-access-token
GITHUB_REPO=yourusername/yourrepo
Then run:
npm install
npm run dev
4️⃣ Deploy to Netlify
- Go to netlify.com and create a new site.
- Connect your GitHub repo.
- Use these build settings:
Build command: npm run build
Publish directory: dist
5️⃣ Add Environment Variables in Netlify
In Site Settings → Environment Variables, add:
PUBLIC_SUPABASE_URL=
PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
GITHUB_TOKEN=
GITHUB_REPO=
Then redeploy your site.
6️⃣ Generate a GitHub Token (Required for Product Editor)
- Go to GitHub → Settings → Developer Settings → Personal Access Tokens
- Click Generate new token (classic)
- Enable the
repo
scope - Copy the token and use it in your
.env
and Netlify environment variables
This allows the product editor to commit changes back to your repo (e.g. markdown product files).
✅ You’re Done!
You now have a fully working eCommerce site backed by Supabase + GitHub.
Need help? Refer to the video tutorials or visit the support site.