⚙️ N&N Clothify Admin
← View Store
🛍️ Products
🖼️ Banners
🏷️ Categories
⚙️ Settings
📤 Export & Deploy
📖 How to Add Images

All Products (0)

Image Name Price Category Badge Actions

Homepage Carousel Banners ()

These banners appear as a sliding carousel on your homepage, right below the hero section. Upload a wide photo (landscape, 1200×500px works best) for a full-image banner, or leave the image blank for a styled text banner. Drag order with the ↑ / ↓ buttons.
Image Title Links To Order Actions
Manage Categories
Categories appear as tabs on your store. Each product is assigned to one category.
Store Settings
These details appear on your website and WhatsApp messages.
Country code + number, no spaces or + sign. India: 91XXXXXXXXXX
Full profile link shown as a "Follow us on Instagram" button in the footer.
Change this from the default! Then re-export config.js and commit it.
☁️ Cloudinary Image Upload
Upload clothing photos directly from admin panel — no Google Drive needed. Free account at cloudinary.com gives 25 GB storage.
Setup (one time):
1. Sign up free at cloudinary.com
2. Copy your Cloud Name from the dashboard
3. Go to Settings → Upload → Add upload preset → set to Unsigned → Save
4. Copy the preset name and paste both below
Found on your Cloudinary dashboard (top-left)
Settings → Upload → Upload presets → must be Unsigned. Default: ml_default
🌐 Cloud Sync — JSONBin.io
Sync products across all devices automatically. Free at jsonbin.io — no server needed.
One-time setup:
1. Go to jsonbin.io → Sign up free
2. Click Create Bin → paste {"products":[]} → Create
3. Copy the Bin ID from the URL bar (24-character code)
4. Go to Account → API Keys → copy your Master Key
5. Paste both below → Save Settings → click Sync Now
6. Export config.js → commit → push to GitHub (one last push needed)
Found in the bin URL: jsonbin.io/v3/b/THIS_PART
Account → API Keys → Master Key.

📤 Export & Deploy to GitHub

Download your updated product and config files, then commit them to your GitHub repository. GitHub Pages will automatically update your live website within 1–2 minutes.

How to commit to GitHub
After downloading, follow these steps to update your live website.
1

Go to your GitHub repository

Open github.com and navigate to your clothing-store repository.

2

Open products-data.js

Click on js/ folder → click products-data.js → click the ✏️ pencil icon to edit.

3

Replace the file content

Select all text (Ctrl+A), then paste the content from the downloaded file (Ctrl+V).

4

Commit changes

Scroll down, click "Commit changes". Your store updates in ~1 minute. Repeat for config.js if changed.

📸 How to Add Clothing Images from Google Drive
Follow these steps to get your clothing photos onto the website.
Important: Google Drive images work only if the file is set to "Anyone with the link can view". Photos that are private will not show.
1

Take or arrange your clothing photo

Best results: hang the clothes or use a white/clean background. Portrait orientation (tall, not wide) looks best on the website.

2

Upload to Google Drive

Go to drive.google.com → click + New → File upload → select your photo.

3

Make it public

Right-click the uploaded image → Share → click "Restricted" → change to "Anyone with the link" → set role to Viewer → click Done.

4

Copy the sharing link

Right-click the file → Share → click "Copy link". The link looks like:
https://drive.google.com/file/d/1ABC.../view?usp=sharing

5

Paste the link in Admin → Add Product

Go to the Products tab → click + Add Product → paste the Google Drive link in the "Google Drive Image Link" field. A preview will appear automatically.

6

Fill in product details and Save

Enter name, price, category, sizes, etc. Click Save Product.

7

Export and commit to GitHub

Go to Export & Deploy tab → download products-data.js → commit to GitHub. Done!

Add New Product

Fill in the details. Paste a Google Drive link to show your clothing photo.
Optional — shows strikethrough & discount %
Optional label shown on product card
Upload via Cloudinary or paste any image URL. First image is shown on product card.
Separate with commas. For one size: "Free Size"