107 lines
2.8 KiB
Markdown
107 lines
2.8 KiB
Markdown
# NoShop Configuration Guide
|
|
|
|
This guide covers common customizations after forking.
|
|
|
|
---
|
|
|
|
## 1. Store name & branding
|
|
|
|
**`client/src/index.css`** — change the CSS custom properties to match your brand colors:
|
|
|
|
```css
|
|
:root {
|
|
--primary: 222 47% 20%; /* main button / link color (HSL format) */
|
|
--background: 0 0% 100%; /* page background */
|
|
/* ... */
|
|
}
|
|
```
|
|
|
|
**`.env` / Replit Secrets**:
|
|
```
|
|
STORE_NAME=Acme Supplements
|
|
STORE_EMAIL_FROM=orders@acmesupplements.com
|
|
```
|
|
|
|
**`client/src/components/layout/Footer.tsx`** — update footer links, tagline.
|
|
|
|
---
|
|
|
|
## 2. Payment gateways
|
|
|
|
### Authorize.net (default)
|
|
|
|
NoShop uses Authorize.net Accept.js for PCI-compliant checkout — card data never touches your server.
|
|
|
|
1. Create a sandbox account at [developer.authorize.net](https://developer.authorize.net)
|
|
2. Get your API Login ID, Transaction Key, and Public Client Key from the sandbox dashboard
|
|
3. Set secrets: `AUTHORIZE_NET_API_LOGIN_ID`, `AUTHORIZE_NET_TRANSACTION_KEY`, `AUTHORIZE_NET_PUBLIC_CLIENT_KEY`
|
|
4. Set `AUTHORIZE_NET_SANDBOX=true` while testing, `false` for live
|
|
|
|
### Stripe (optional)
|
|
|
|
Set `STRIPE_SECRET_KEY` and `STRIPE_PUBLISHABLE_KEY` in secrets. When both are present, customers see a "Stripe" tab at checkout. Leave them empty to disable Stripe entirely.
|
|
|
|
---
|
|
|
|
## 3. Email
|
|
|
|
NoShop uses [Resend](https://resend.com) for transactional email (magic-link login, order confirmations).
|
|
|
|
1. Create a free Resend account
|
|
2. Verify your sending domain
|
|
3. Set `RESEND_API_KEY` and `STORE_EMAIL_FROM`
|
|
|
|
Edit `server/email.ts` to customize email templates.
|
|
|
|
---
|
|
|
|
## 4. Adding products
|
|
|
|
Products can be added via:
|
|
|
|
- **Admin panel** — visit `/admin/products`, click "New product"
|
|
- **Bulk import** — write a migration script that INSERTs into the `products` table with Drizzle, or use `psql` / pgAdmin directly
|
|
|
|
The product schema lives in `shared/schema.ts`. Key fields:
|
|
- `handle` — URL slug (e.g. `omega-3-fish-oil` → `/products/omega-3-fish-oil`)
|
|
- `images` — array of image URLs (text[])
|
|
- `status` — `active` | `draft` | `archived`
|
|
- `hsaFsa` — boolean, shows HSA/FSA badge
|
|
|
|
---
|
|
|
|
## 5. Custom domain on Replit
|
|
|
|
1. In your Replit project, go to **Settings → Custom domain**
|
|
2. Add your domain and follow the DNS instructions
|
|
3. Replit handles TLS automatically
|
|
|
|
---
|
|
|
|
## 6. Database migrations
|
|
|
|
After editing `shared/schema.ts`, run:
|
|
|
|
```bash
|
|
npm run db:push
|
|
```
|
|
|
|
For a new Replit project with no existing data:
|
|
|
|
```bash
|
|
npm run db:push # applies schema to a fresh DB
|
|
npm run db:seed # creates your first admin user
|
|
```
|
|
|
|
---
|
|
|
|
## 7. Admin credentials
|
|
|
|
The first admin is created by `npm run db:seed`. Set these secrets before running:
|
|
|
|
```
|
|
ADMIN_EMAIL=you@yourdomain.com
|
|
ADMIN_PASSWORD=your-secure-password
|
|
```
|
|
|
|
Additional admin users can be added directly to the `admin_users` table, or you can add an "invite admin" route in `server/routes.ts`.
|