OpenPik User Guide

Everything you need to run your store day-to-day — no coding required. This covers the Admin Panel as it works right now, while OpenPik is still running offline in your browser, plus what changes once you go live.

01Getting Started

Your store currently lives entirely inside your browser — there's no live website yet, and that's intentional at this stage. Everything you do in the Admin Panel (adding products, taking test orders, managing stock) is saved locally on your computer using your browser's storage.

Important: Your data is tied to one browser on one computer. If you open the store in a different browser (or a different computer), you won't see the same products or orders. Use the same browser consistently until you go live, and take regular backups (see the Backup & Restore section).

To open your Admin Panel, open admin.html from your project folder. Everything — Dashboard, Products, Inventory, Orders, Customers, Reports, Settings — is accessible from the sidebar on the left.

02Adding Products

This is the most important task you'll do regularly. Here's exactly how:

Step 1

In the Admin Panel sidebar, click Products.

Step 2

Click the + Add Product button (top right).

Step 3

Fill in the form:

Product Name — required. Be descriptive (e.g. "Acrylic Keepsake Box", not just "Box 1").
Category — choose from the dropdown. This powers your Shop Page filters automatically.
Colors Available — type every color this product comes in, separated by commas (e.g. Black, White, Pink). Use standard English color names — the system converts each name into a real color circle on the product page automatically. If a name isn't recognized, it shows as a plain grey circle, so double-check spelling if a swatch looks wrong.
Price (PKR) and Stock Quantity — both required.
Sizes Available — type every size you stock, separated by commas (e.g. Small, Medium, Large). Only sizes typed here will appear on the product page — if you forget "Large", customers won't see it as an option even if you have it in stock.
Box Dimensions Per Size — as soon as you type sizes above, a row appears for each one. Enter the real Length / Width / Height in inches for that exact size — CM is calculated automatically. This is what shows in the Size Guide on the product page, so it's the actual size of this specific product, not a shared chart. Every product's boxes can be different, even within the same category, so fill this in per product for accurate results. For Baby Born Box products only, an extra "Sweets Capacity" field appears per size (e.g. "15–20 pieces") — this also shows as a column in the Size Guide, automatically, only for that category.
Theme — Boy / Girl (Baby Born Box only) — every product in this category automatically shows a "Boy" / "Girl" selector on the product page, next to Size. This is required — customers can't add the item to their cart until they pick one, so an order is never placed without confirming which version to pack. The chosen theme is saved with the cart item and carries through to the order, the order confirmation page, order tracking, the WhatsApp message, the confirmation email, and the order details in Admin → Orders (shown in gold, in brackets, next to the item).
Minimum Order Quantity (Baby Born Box only) — every product in the "Baby Born Box" category automatically requires a minimum order of 10 per box (e.g. 10 sweets). This is built into the code itself (not an Admin field) since it applies to the whole category. The product page starts the quantity at 10 and won't let customers add fewer to the cart; the cart page also won't let it drop below 10 with the − button. If you need to change this number or add it to another category later, this lives in the MIN_QTY_BY_CATEGORY setting in both product.html and cart.html.
Description — a sentence or two about material, build, and finish.
Product Image — click the upload box and choose a photo from your computer. Recommended size is roughly 1000×1333px (a 3:4 ratio) so it looks crisp when zoomed on the product page.

Step 4

Check the Auto-Generated SEO box near the bottom — it updates live as you type. You don't need to do anything here; it's there so you can see what search engines and social shares will show once you're live.

Step 5

Click Save Product. It will immediately appear on your Shop Page and Home Page (refresh those pages if they were already open).

Editing or deleting a product

In the Products table, click Edit next to any product to change its details, or Delete to remove it permanently. Deleting cannot be undone — if you're unsure, take a backup first (see below).

03Updating Stock

You can update stock two ways:

Quick way: Go to Inventory in the sidebar. Every product is listed with its current stock and a number field — change the number and click Update.
Full edit: Go to Products, click Edit on the product, and change the Stock Quantity field there.

Stock automatically goes down by itself whenever a customer places an order — you don't need to manually subtract sold units. You only need to update stock when you restock or correct a count.

Products with 5 or fewer units left are flagged as Low Stock on the Dashboard and in the Products table, so you can restock before running out.

04Managing Orders

When a customer completes checkout, the order appears automatically in Orders in the sidebar — no action needed to receive it.

Status	What it means
Processing	Order placed, not yet prepared. This is the default for every new order.
Ready	Packed and ready to hand over to a courier.
Dispatched	You've handed it to a courier / it's on the way.
Delivered	Customer has received it.

To update an order's status, find it in the Orders table and use the dropdown in the Update column. The customer will immediately see the new status if they check order-tracking.html with their order number, or in their Account page if they were logged in.

Note: No courier or shipping company is connected yet — updating status here is manual, based on what's actually happening with the package. This is fine for now and can be automated later with a courier API once you're live.

05Customers & Reports

Customers

The Customers tab builds itself automatically from order data — anyone who has checked out shows up here with their order count and total spend. There's nothing to set up manually.

Reports & Analytics

The Reports tab shows real numbers calculated from your actual orders: total revenue, order count, average order value, best-selling products, payment method breakdown, and a simple revenue-by-day view. This updates automatically as new orders come in — there's nothing to configure.

06Backup & Restore

Because all your data lives in one browser right now, it's important to back it up regularly — especially before clearing your browser data, switching computers, or making big catalog changes.

To back up

Go to Settings in the sidebar.
Scroll to Data Backup.
Click Download Backup (JSON). A file will download to your computer — keep it somewhere safe (cloud storage, email it to yourself, etc).

To restore

Go to Settings → Data Backup.
Click Restore From Backup and choose a previously downloaded backup file.
Your products will be restored from that file. This adds/updates products — it won't delete anything not in the backup.

The backup currently saves your product catalog. It does not yet include orders, customers, or cart contents — keep that in mind if you need a full data snapshot before a big change.

07Settings Overview

The Settings tab is your control center for everything that connects OpenPik to the outside world later. Right now, most of these fields are safe to fill in and save, but won't have any real effect until you're live on a real domain:

Currency & Region — set your default currency and manual USD/PKR conversion rate.
Sitemap & Search Console — generates a sitemap.xml file from your real catalog. Useful to download right before going live.
Marketing Pixels & Analytics — Meta Pixel, TikTok Pixel, GA4, and GTM ID fields. Save your real IDs here once you have them; they'll activate automatically once the site is live on a public domain.
Payment Gateways — Easypaisa, JazzCash, Stripe, and PayPal key fields. Same as above — these are placeholders until you go live with real merchant accounts.
Manual Advance Payment Details — this one is active right now (not a placeholder). Fill in your bank account and Easypaisa/JazzCash numbers here so the "Pay in Advance" checkout option shows real details to customers.

Order confirmation emails work a little differently — they're set up by editing a file directly rather than through the Settings tab. See EMAIL-SETUP.md in your project folder for a 10-minute, one-time setup using a free email service (EmailJS). Until that's done, checkout still works fine — customers just won't receive an automatic email.

08Going Live

"Going live" means moving OpenPik from your browser to a real, public website that anyone can visit. This is a bigger step that typically needs a developer or hosting service, but here's the order of operations:

Want a checklist you can actually tick off as you go? Open the Go-Live Checklist — it's printable and saves your progress.

1. Get a domain & hosting

Buy a domain (e.g. openpik.com or openpik.pk) and a hosting plan, or use a hosting service that supports static + backend sites.

2. Move to a real database

Your product/order/customer data needs to move from browser storage to a real online database so it's the same for every visitor — not just your one browser.

3. Connect real payment gateways

Get real merchant accounts for Easypaisa, JazzCash, Stripe, and/or PayPal, and add the real keys in Settings.

4. Add real tracking IDs

Create real Meta Pixel, TikTok Pixel, GA4, and GTM accounts, then paste those IDs into Settings.

5. Download & upload your sitemap

From Settings, download sitemap.xml with your live domain entered, and upload it to your server's root folder. Also update the domain inside your robots.txt file.

6. Submit to Google Search Console

Verify your site and submit your sitemap so Google starts indexing your pages.

This step needs technical help. Steps 1–2 in particular usually require a developer, since they involve setting up real server infrastructure — this guide tells you what needs to happen, not how to write that part yourself.

09Troubleshooting

Problem	Likely Fix
Product I added isn't showing on the Shop Page	Make sure you saved it in the Admin Panel, then refresh the Shop Page. Also confirm you're using the same browser you added it in.
A size isn't showing on the product page	Check the product's "Sizes Available" field in Admin → Products — only sizes typed there will appear.
Size Guide isn't showing on the product page	The Size Guide only appears once at least one size has Length/Width/Height filled in under "Box Dimensions Per Size" in Admin → Products.
Lost all my products after clearing browser data	Restore from your most recent backup (Settings → Data Backup). If you don't have one, you'll need to re-add products manually — this is why regular backups matter.
Customer says their tracking page shows nothing	Double check the order number matches exactly what's in Admin → Orders.