{ L }lexrianoView on TemplateMonster
tutorial

First Steps After Purchasing Your Template

January 5, 20267 min read
First Steps After Purchasing Your Template

First Steps After Purchasing Your Template

Congratulations on your purchase! You now have a professional foundation for your website. Let's turn those files into a live site. Follow these steps in order.

Step 1: Download and Organize

Download the template from your purchase confirmation email or account dashboard.

Create a dedicated folder on your computer. Something like Documents/my-website/ works well.

Extract the ZIP file into that folder. You should see a structure like:

my-website/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
├── images/
└── documentation.html

Pro tip: Before making any changes, copy the entire folder and name it my-website-backup/. If anything goes wrong, you can start fresh.

Step 2: Set Up Your Code Editor

You need a text editor to modify the files. Visual Studio Code (VS Code) is free and excellent for beginners.

Download VS Code from code.visualstudio.com

Open your template folder:

  1. Launch VS Code
  2. File → Open Folder
  3. Select your template folder
  4. You'll see all files in the left sidebar

Helpful VS Code extensions:

  • Live Server (preview changes instantly)
  • Prettier (auto-format code)
  • HTML CSS Support (better autocomplete)

Step 3: Preview Locally

Before changing anything, see the template working on your computer.

Option A: Simple double-click
Double-click index.html. It opens in your browser. Simple, but some features might not work.

Option B: Live Server (recommended)
If you installed the Live Server extension:

  1. Right-click index.html in VS Code
  2. Select "Open with Live Server"
  3. Browser opens automatically
  4. Changes you make will refresh instantly

Spend a few minutes clicking around. Open every page. See how it looks on mobile (browser DevTools → toggle device toolbar).

Step 4: Read the Documentation

I know, reading docs isn't exciting. But 10 minutes here saves hours later.

Open documentation.html in your browser. Look for:

  • File structure explanation
  • How to change colors
  • How to set up the contact form
  • Any special instructions

Take notes on things you'll need to customize.

Step 5: Start with Global Changes

Begin with changes that affect the entire site:

Colors: Find the CSS file (usually css/styles.css). Look for :root at the top with CSS variables. Change the color values to match your brand.

Fonts: If you want different fonts, update the Google Fonts link in the HTML <head> and the font-family in CSS.

Logo: Replace the logo image in the images/ folder. Keep the same filename, or update the <img> tag in HTML.

Step 6: Replace Content Page by Page

Now tackle each page systematically:

index.html (Homepage)

  • Update the headline and tagline
  • Replace hero image
  • Edit feature descriptions
  • Update testimonials (or remove if you don't have any yet)
  • Change call-to-action buttons

About page

  • Write your story
  • Add your photo or team photos
  • Update company information

Contact page

  • Update address, phone, email
  • Set up the contact form (see documentation)
  • Update map location if included

Other pages

  • Services/Products: Your actual offerings
  • Portfolio: Your work samples
  • Blog: Your articles (or remove if not needed)

Step 7: Handle Images

Prepare your images:

  • Resize to appropriate dimensions (check what sizes the template uses)
  • Compress for web (use tinypng.com or squoosh.app)
  • Use descriptive filenames (team-photo.jpg not IMG_4532.jpg)

Replace placeholder images:

  • Either use the same filenames as the originals
  • Or update the src attributes in HTML

Don't forget:

  • Favicon (the small icon in browser tabs)
  • Open Graph image (for social media sharing)

Step 8: Test Everything

Before going live, thorough testing:

Functionality:

  • All links work (no broken links)
  • Contact form submits correctly
  • Mobile menu opens/closes
  • All images load

Responsiveness:

  • Looks good on phone
  • Looks good on tablet
  • Looks good on desktop
  • No horizontal scrolling

Content:

  • No placeholder text remaining
  • No "Lorem ipsum" anywhere
  • Spelling and grammar checked
  • Contact info is correct

Step 9: Go Live

Time to put your site on the internet.

Choose hosting:

  • Free options: Netlify, Vercel, GitHub Pages
  • Paid options: Any web hosting ($3-10/month)

For Netlify (easiest):

  1. Create account at netlify.com
  2. Drag your template folder onto the dashboard
  3. Done! You get a URL like random-name.netlify.app

Connect your domain (optional):
If you have a domain name (yourbusiness.com), follow your hosting provider's instructions to connect it.

Step 10: Post-Launch

Immediate:

  • Test the live site on multiple devices
  • Send the link to a friend for feedback
  • Submit to Google Search Console

Ongoing:

  • Keep a backup of your customized files
  • Update content as your business evolves
  • Monitor contact form submissions

Common First-Timer Mistakes

Editing the wrong file — Make sure you're editing files in your working folder, not the backup.

Forgetting to save — Press Ctrl+S (Cmd+S on Mac) after every change.

Not testing mobile — Always check mobile view before going live.

Leaving placeholder content — Search for "Lorem" and "example" before launch.

Skipping the backup — Always keep an untouched copy of the original template.

You've got this. Take it step by step, and you'll have a professional website live within a day or two.

Share this article: