# Editing Guide (no coding needed)

This guide is written for someone who isn't a developer. Every file
mentioned below is plain text, open it, change the part in quotes, save it.

For most of these, the easiest way to make the change is:
1. Open the file on GitHub (or in a code editor like VS Code).
2. Edit the text.
3. Save / commit, if you're on Vercel, it will automatically redeploy in
   about a minute.

For products, prices and stock, you can also skip all of this and use the
**Admin dashboard** at `yoursite.com/admin`, see the bottom of this guide.

---

## Change the logo

Replace the file at `/public/images/brand/logo-horizontal.png` with your new
logo (keep the same file name, roughly the same shape, wide and short).
It's used in the header and the admin login screen automatically.

## Change the phone number

Open `lib/siteConfig.ts`. There are two phone numbers:
```
phone: "+2348157587456",
phoneDisplay: "0815 758 7456",
```
This pair shows **only in the top announcement bar**.
```
contactPhone: "+2348161154532",
contactPhoneDisplay: "0816 115 4532",
```
This pair shows **everywhere else** (footer, mobile menu, About page). Change
whichever one(s) you need, each has a dialable version (with `+`, no
spaces) and a display version (however you want customers to read it).

## Change the WhatsApp number

Same file, `lib/siteConfig.ts`:
```
whatsapp: "2348161154532", // digits only, no +, used for wa.me links
whatsappDisplay: "0816 115 4532",
```

## Change the store address

Same file:
```
address: "Shop 22, Line Shop, Back of Asaba Specialist Hospital",
city: "Asaba",
state: "Delta State",
```

## Change the delivery fee

Same file:
```
deliveryFee: 1500,
```
Just change the number (it's in naira, no comma).

## Add a product

**Easiest way:** go to `yoursite.com/admin`, sign in, click **Products →
Add product**, fill in the form, save. Done.

**Adding several at once:** click **Products → Import CSV** instead. Download
the template, fill in a row per product in Excel or Google Sheets, and
upload it. See "Using the Admin dashboard" at the bottom of this guide.

**Manual way:** open `lib/products-seed.ts` and copy one of the existing
product blocks (between `{` and `},`), then edit each line:
```
{
  id: "p17",                          // must be unique
  slug: "my-new-product",             // must be unique, no spaces
  name: "My New Product",
  brand: "Shopp Gadgets",
  category: "phone-accessories",      // must match a category slug, see below
  price: 15000,
  images: ["/images/products/my-new-product.webp"],
  sku: "SG-AC-010",
  shortDescription: "One line shown on the product card.",
  description: "The longer description shown on the product page.",
  stock: 10,
  createdAt: "2026-09-18",
},
```
Note: once you've saved a product through the Admin dashboard at least once,
the live catalog moves to `data/products.json`, after that, edit products
there instead (same format) or just keep using the Admin dashboard.

## Remove a product

**Admin dashboard:** Products → find it → Delete.
**Manual way:** delete its whole `{ ... },` block from `lib/products-seed.ts`
(or `data/products.json` if you've used the admin dashboard before).

## Change a product's price

**Admin dashboard:** Products → Edit → change Price → Save.
**Manual way:** find the product in `lib/products-seed.ts` /
`data/products.json` and change the `price:` number. To show a discount (a
struck-through original price), add or change `compareAtPrice:` to a number
higher than `price`.

## Change a product's image

**Easiest way:** in the Admin dashboard, edit the product and use the
**Product photo** upload button, choose the file from your computer or
phone, and it's saved and filled in automatically. No file manager needed.

**Manual way:** save your new photo as a `.webp` file (or `.jpg`/`.png`)
into `/public/images/products/`, then paste the path into the **Image
path** field, e.g. `/images/products/my-photo.webp`, or edit the
`images: [...]` line directly in `lib/products-seed.ts` /
`data/products.json`.

## Change a category image

Replace the file in `/public/images/categories/` (keep the same file name),
or edit the `image:` path in `lib/categories.ts` to point at a new file.

## Change the homepage banner

Open `lib/banners.ts`:
```
export const heroBanner = {
  eyebrow: "Now delivering across Delta State",
  headline: "Original gadgets, delivered to your door in Asaba",
  subhead: "Phones, laptops, accessories and content creator gear...",
  ctaLabel: "Shop phones",
  ctaHref: "/category/phones",
  ...
};
```
Change any of the text in quotes. `ctaHref` is which page the button links
to, keep it in the form `/category/<category-slug>`.

## Change other promotional text

Also in `lib/banners.ts`, the `trustPoints` list is the four short lines
near the bottom of the homepage ("Delta State delivery", "Secure Paystack
checkout", etc.), edit the `title` and `description` of any entry.

## Add a new category

Open `lib/categories.ts` and add a new block to the list:
```
{
  slug: "smart-home",             // must be unique, no spaces
  name: "Smart Home",
  image: "/images/categories/smart-home.webp",
  description: "Smart plugs, bulbs and home gadgets",
},
```
Then add a matching image to `/public/images/categories/`. The new category
will automatically appear in the header, homepage, and footer.

---

## Using the Admin dashboard

Go to `yoursite.com/admin` and sign in with the `ADMIN_PASSWORD` you set in
your environment variables (see README.md).

- **Dashboard**, quick counts (products, orders, pending orders, revenue)
  and a low-stock warning list.
- **Products**, add, edit, delete products; mark items Featured or Popular
  so they show up in the homepage sections. Each product's edit page has a
  **photo upload button**, no file manager needed.
- **Products → Import CSV**, add many products at once. Download the
  template, fill in a row per product (name, category, price, stock, etc.),
  and upload the file. Rows with a problem (missing price, unknown
  category, duplicate name) are skipped and listed so you can fix and
  re-upload just those.
- **Orders**, see every order and update its status (Pending → Paid →
  Processing → Out for delivery → Delivered) as you fulfil it. Customers see
  this same status when they use "Track my order" on the site.

**Important:** if this site is hosted on **Vercel**, changes made in the
Admin dashboard will not be saved permanently (Vercel's filesystem resets).
This works fully on cPanel/Node hosting. See the "Data storage & hosting"
section of README.md for how to fix this on Vercel.