Product Upload Guide (Amazon + TikTok Method)

1. Folder Setup on Hosting (do once)

In cPanel > File Manager, make sure these folders exist:

• /public_html/nasluxe-units/ – shortlet photos (Luxe 1–6, Prime 1–7).
• /public_html/commodities-images/ – all product photos (rice, oil, chairs, electronics etc.).

Anything you upload into commodities-images/ can be used inside admin-products.php and will show on commodities.html.

2. Download Product Photos from Amazon (Laptop – Chrome)

This is Method A – Auto Import. It lets you grab all images from an Amazon product page in a few seconds.

1. Open Chrome on your laptop.
2. Go to the Chrome Web Store and search for “Amazon Product Image Downloader” (or similar).
3. Install the extension.
4. Open any Amazon product page (e.g. rice, blender, chair).
5. Click the new extension icon or button like “Download all images”.
6. All the images will be saved to your Downloads folder.

After download, move them into a named folder on your laptop, for example:

• rice-50kg/
• garri-ijebu/
• compressed-chair-3plus2/

3. Clean & Prepare Photos (Phone – CapCut / Remini)

This is Method B – Phone Fast Upload. It makes the pictures look TikTok / Amazon standard.

1. Send the downloaded images from your laptop to your phone (AirDrop, WhatsApp, Google Drive, etc.).
2. On your phone, open CapCut.
3. Create a new project and import all the product images.
4. Use AI Background Remove or simple cropping so the product is clear.
5. Export the images back to your phone gallery.
6. Optional: Use Remini to sharpen / HD-upscale if needed.

4. Upload Photos to Server (cPanel)

1. Log into cPanel → File Manager.
2. Open public_html/commodities-images/.
3. Click Upload and select the cleaned images from your laptop or from a synced folder.

Example filenames after upload:

• commodities-images/rice-50kg-main.jpg
• commodities-images/rice-50kg-2.jpg
• commodities-images/rice-50kg-3.jpg

Copy these full paths – you will paste them inside admin-products.php.

5. Add Product in Admin Panel (admin-products.php)

Open in your browser:

https://budget-friendly.ng/admin-products.php

5.1 Fill main product details

• Product ID – leave blank for new product.
• Name – e.g. Premium Long Grain Rice.
• Unit / Size – e.g. 50kg bag.
• Price (₦) – e.g. 85000.
• Category – food, household, clothing etc.
• Availability – e.g. In stock.
• Notes – e.g. Discount for 5 bags and above.

5.2 Add images (connect A+B → website)

• Main image URL commodities-images/rice-50kg-main.jpg
• Extra image URLs (comma-separated)
  commodities-images/rice-50kg-main.jpg, commodities-images/rice-50kg-2.jpg, commodities-images/rice-50kg-3.jpg
• Video URL (optional) – if you have a hosted MP4 or link, e.g. commodities-images/rice-50kg-video.mp4

Click Save product. This updates products.json automatically.

6. How it shows on the website

On commodities.html (Budget Shop – Commodities):

• Main card image uses mainImage.
• Small thumbnail row uses the images[] array (up to 4 thumbnails shown).
• When you click a thumbnail, the big image on the card changes (like Amazon gallery).
• If you set videoUrl, a “Watch product video” link appears.

You also get:

• Search bar (search by name, unit, category).
• Category filter (food / clothing / household).
• Basket on the right (cart) + Paystack checkout.

7. Fast Workflow – 50 Products in One Session

Once you get used to it, you can comfortably upload 50+ products in less than an hour.

8. Shortlets (index.html) – Photo Updates

For your apartments (Prime 1–7, Luxe 1–6):

• Upload new apartment images into /nasluxe-units/.
• Update the src="nasluxe-units/..." paths in index.html where each unit’s gallery is defined.
• The lightbox gallery on the homepage is already wired – it just needs correct image paths.

This keeps the shortlet side looking like Booking.com / Airbnb quality.