← Back to Blog
TUTORIAL

How to Upload & Customize Your Website Template

Complete step-by-step guide for beginners

📅 January 10, 2025 ⏱️ 12 min read 👤 SBWSK Team

Congratulations on purchasing your website template! This guide will walk you through every step of uploading your template to a web host and customizing it to match your business.

📋 What You'll Need

  • Your purchased template files (HTML, CSS, JavaScript)
  • A web hosting account (Bluehost, SiteGround, or similar)
  • FTP client (FileZilla - free download)
  • Text editor (VS Code, Sublime Text, or Notepad++)
  • Your domain name

🚀 Step 1: Extract Your Template Files

After purchasing, you'll receive a ZIP file. Extract it to reveal your template files:

Typical folder structure:
📁 my-template/
  ├── index.html
  ├── about.html
  ├── contact.html
  ├── 📁 css/
  ├── 📁 js/
  ├── 📁 images/
  └── README.md

🌐 Step 2: Set Up Your Web Hosting

Option A: Using cPanel (Most Common)

  1. Log into cPanel - Your hosting provider will send you cPanel login credentials
  2. Find File Manager - Look for the "File Manager" icon in cPanel
  3. Navigate to public_html - This is your website's root folder
  4. Upload files - Click "Upload" and select all your template files
  5. Extract ZIP - If you uploaded a ZIP, right-click and select "Extract"

Option B: Using FTP (FileZilla)

  1. Download FileZilla - Free from filezilla-project.org
  2. Get FTP credentials - Check your hosting welcome email for:
    • FTP Host (ftp.yourdomain.com)
    • Username
    • Password
    • Port (usually 21)
  3. Connect to your server - Enter credentials in FileZilla and click "Quickconnect"
  4. Navigate to public_html - In the right pane (Remote Site)
  5. Upload files - Drag and drop your template files from left pane to right pane
⚠️ Important: Make sure your main homepage file is named index.html - this is what loads when someone visits your domain.

🎨 Step 3: Customize Your Template

Changing Text Content

  1. Open HTML files - Use a text editor (VS Code recommended)
  2. Find placeholder text - Look for text like "Your Business Name", "About Us", etc.
  3. Replace with your content - Keep HTML tags intact, only change the text inside
  4. Save and re-upload - Save file and upload via FTP or cPanel
Example:

❌ Wrong:
Your Business Name

✅ Correct:
<h1>Your Business Name</h1>
↓
<h1>Acme Plumbing Services</h1>

Changing Colors

  1. Open CSS file - Usually in /css/main.css or /css/style.css
  2. Find color variables - Look at the top for :root or color definitions
  3. Change hex codes - Replace with your brand colors
    --primary-color: #0ea5e9; /* Change this */
  4. Use a color picker - Tools like colorpicker.com help find hex codes

Replacing Images

  1. Prepare your images - Resize to similar dimensions as placeholders
  2. Optimize images - Use TinyPNG.com to compress without quality loss
  3. Upload to /images folder - Via FTP or cPanel File Manager
  4. Update HTML references - Change image src paths in HTML files
    <img src="images/logo.png">

🔧 Step 4: Configure Contact Forms

Most templates include contact forms. Here's how to make them work:

  1. Use FormSpree (easiest, free option)
    • Sign up at formspree.io
    • Get your form endpoint
    • Update form action in HTML
  2. Or use your host's PHP mail
    • Check if template includes contact.php
    • Update email address in PHP file
    • Test form submission

✅ Step 5: Testing Your Website

Before announcing your site, test everything:

  • ✓ All pages load correctly
  • ✓ Links work (no 404 errors)
  • ✓ Images display properly
  • ✓ Contact form sends emails
  • ✓ Mobile responsiveness (test on phone)
  • ✓ Browser compatibility (Chrome, Firefox, Safari)
  • ✓ Check spelling and grammar

🚨 Common Issues & Solutions

❓ Images not showing?

Check image paths are correct and files are in the right folder. Paths are case-sensitive on Linux servers.

❓ CSS not loading?

Clear your browser cache (Ctrl+Shift+R). Check CSS file path in HTML <link> tags.

❓ Domain shows old content?

DNS changes can take 24-48 hours to propagate. Be patient or clear your DNS cache.

❓ Site shows directory listing?

Make sure your homepage is named index.html (lowercase) and is in the public_html root.

📚 Additional Resources

  • FileZilla Documentation: filezilla-project.org/documentation
  • HTML Tutorial: w3schools.com/html
  • CSS Basics: w3schools.com/css
  • Image Optimization: tinypng.com
  • Color Picker: colorpicker.com

Need Help?

All our templates include email support. If you get stuck, we're here to help!

Contact Support