Manage Products Loading...
Khetan Admin Panel
đī¸ Products
đŧī¸ Hero Slider
đˇ Image Hosting
đ How To Use
Hero Slider Images
âšī¸ How the slider works
These are the background images shown in the sliding hero section at the top of your homepage. You can add up to 6 slides. Use direct image URLs (see "Image Hosting" tab for how to get free image links).
đˇ Where to Get Free Image Links
You need a direct image URL (ending in .jpg or .png) to use images on the website.
Here are the best free options to upload your own photos and get a direct link:
FREE
EASIEST
ImgBB
imgbb.com
Upload any photo â get a direct link instantly. No account required for basic uploads. Perfect for product photos and slider images.
Steps:
1. Go to imgbb.com
2. Click "Start uploading"
3. Upload your photo
4. Right-click the image â "Copy image address"
5. Paste URL in the admin panel above
Steps:
1. Go to imgbb.com
2. Click "Start uploading"
3. Upload your photo
4. Right-click the image â "Copy image address"
5. Paste URL in the admin panel above
FREE
Postimages
postimages.org
Very simple image hosting. Upload and get "Direct link" immediately. No registration needed.
Steps:
1. Go to postimages.org
2. Click "Choose images"
3. Upload your photo
4. Copy the "Direct link" shown
5. Paste URL in admin panel
Steps:
1. Go to postimages.org
2. Click "Choose images"
3. Upload your photo
4. Copy the "Direct link" shown
5. Paste URL in admin panel
FREE
Google Drive
drive.google.com
If you use Google Drive, you can host images there. Share the file publicly and convert the share link.
Steps:
1. Upload photo to Drive
2. Right-click â "Share" â "Anyone with link"
3. Copy the link, note the file ID
4. URL format: https://drive.google.com/uc?id=FILE_ID
Steps:
1. Upload photo to Drive
2. Right-click â "Share" â "Anyone with link"
3. Copy the link, note the file ID
4. URL format: https://drive.google.com/uc?id=FILE_ID
FREE
GitHub (When Deployed)
github.com
Once your site is on GitHub Pages, put images in an "images" folder in your repo. Then use a relative path like: images/product1.jpg
This is the best long-term solution â images load fast and are free forever on GitHub Pages.
This is the best long-term solution â images load fast and are free forever on GitHub Pages.
Test Your Image URL
đ How To Use This Admin Panel
đ Login & Security
Default password is khetan2025. Change it in the code by searching for ADMIN_PASSWORD.
đī¸ Managing Products
- Go to the Products tab
- Click "+ Add New Product" to add a product
- Fill in the name, description, tag (optional), and image URL
- Click the âī¸ Edit button on any product to modify it
- Click the đī¸ Delete button to remove a product
- Click "Save Changes to Website" to apply all edits
đŧī¸ Changing Hero Slider Images
- Go to the Hero Slider tab
- Click "+ Add New Slide" or âī¸ Edit an existing slide
- Paste a direct image URL (use the Image Hosting tab to learn how)
- Click Save to apply
â ī¸ Important: How Changes Work
This admin panel stores data in your browser's local storage. To make changes visible on the live website, you have two options:
Option A: Export & Upload
Use the "Export HTML" button to download an updated index.html, then upload it to your GitHub repo.
Option B: Edit GitHub Directly
Edit the data.json file directly in your GitHub repository for real-time updates.
đĄ Pro Tip: GitHub Pages + data.json
The most powerful setup: host your website on GitHub Pages, keep all product data in a data.json file in your repo, and edit it directly in GitHub's web editor. Changes go live in 1â2 minutes automatically!