How to Update Website Content

Simple instructions for non-programmers to keep the website fresh and current

📝 Adding New Products

Step 1: Access Admin Panel

  1. Go to the website and log in as admin
  2. Click "Admin Panel" in the navigation
  3. Select "Manage Products" from the sidebar

Step 2: Add Product Information

  1. Fill in the product form with:
    • Name: Product name (e.g., "Intel Core i7-12700K")
    • Description: Brief product description
    • Price: Product price in dollars
    • Category: Select from dropdown (CPU, GPU, etc.)
    • Brand: Manufacturer name
    • Image: Product image filename
  2. Click "Add Product" to save

Step 3: Add Product Image

  1. Find or create a product image (400x400 pixels recommended)
  2. Save the image with a descriptive name (e.g., "cpu_i7_12700k.jpg")
  3. Upload the image to: assets/images/products/
  4. Update the product in admin panel with the correct image filename

🖼️ Updating Images

Product Images

  • Location: assets/images/products/
  • Size: 400x400 pixels recommended
  • Format: JPG or PNG
  • Naming: Use descriptive names (e.g., "gpu_rtx_4080.jpg")

Site Images

  • Logo: assets/images/logo.png (200x80px)
  • Backgrounds: assets/images/hero-bg.jpg (1920x1080px)
  • Favicon: assets/images/favicon.ico (16x16px)

Image Sources

🎥 Adding Videos

Video Requirements

  • Location: assets/videos/
  • Format: MP4, WebM, or OGV
  • Size: Keep under 50MB per video
  • Duration: 1-5 minutes recommended

Recommended Videos

  • PC Building Guide: Step-by-step tutorial
  • Product Reviews: Component demonstrations
  • Company Overview: About the business

Video Sources

📄 Updating Content

Text Content

  • About Page: Edit about.php for company information
  • Contact Info: Update email and phone in contact.php
  • FAQ: Add new questions in wiki/faq.php
  • Product Descriptions: Use admin panel to update

Pricing Updates

  1. Log into admin panel
  2. Go to "Manage Products"
  3. Click "Edit" on any product
  4. Update the price field
  5. Click "Update Product"

Theme Customization

  • Colors: Edit CSS files in templates/
  • Fonts: Change font-family in CSS
  • Layout: Modify assets/css/custom.css

🔧 Technical Maintenance

Regular Tasks

  • Backup Database: Export MySQL data monthly
  • Check Links: Ensure all navigation works
  • Test Forms: Verify contact form and calculator work
  • Update Prices: Keep product prices current

File Management

  • Organize Images: Keep product images in assets/images/products/
  • Naming Convention: Use descriptive, lowercase filenames
  • File Sizes: Optimize images for web (compress if needed)
  • Backup Files: Keep copies of important files

Troubleshooting

  • Images Not Showing: Check file path and permissions
  • Forms Not Working: Verify database connection
  • Layout Broken: Check for missing CSS files
  • Admin Access: Ensure admin account is active

📱 Mobile Considerations

Mobile-Friendly Updates

  • Image Sizes: Ensure images work on small screens
  • Text Length: Keep product descriptions concise
  • Navigation: Test mobile menu functionality
  • Forms: Verify forms work on mobile devices

Testing Checklist

  • ✅ Test website on desktop computer
  • ✅ Test website on mobile phone
  • ✅ Test website on tablet
  • ✅ Verify all links work
  • ✅ Check that forms submit properly
  • ✅ Test theme switching
  • ✅ Verify admin panel access

🚀 Quick Tips

Best Practices

  • Backup First: Always backup before making changes
  • Test Changes: Preview changes before going live
  • Keep Organized: Use consistent naming conventions
  • Document Changes: Keep notes of what you've updated

Common Mistakes to Avoid

  • ❌ Don't use spaces in filenames
  • ❌ Don't upload files that are too large
  • ❌ Don't delete files without backing up
  • ❌ Don't forget to test on different devices

Need Help?

  • Check the FAQ page for common questions
  • Review the PC building guide for product knowledge
  • Contact support if you encounter technical issues