Customization Guide

Make the template your own! This guide covers the essential customizations you'll want to make right away.

🎨 Updating Your Logo

Replace Logo Files

Navigate to the logo directory and replace the existing logo files:

public/assets/images/logo/
├── logo.png          # Main logo
├── logo-dark.png     # Dark mode logo (if applicable)
└── favicon.ico       # Browser tab icon

Update Logo in Components

Open the Navbar component and update the logo path:

// src/components/Navbar/Navbar.jsx
import Image from "next/image";

<Image
  src="/assets/images/logo/logo.png"
  alt="Your Company Name"
  width={150}
  height={50}
/>;

💡 Tip: Use the Next.js Image component for automatic optimization!

Update Favicon

Replace public/favicon.ico with your favicon file.

📝 Updating Content

Homepage Content

Edit your homepage content in app/page.jsx:

// app/page.jsx
export default function Home() {
  return (
    <>
      <Hero
        title="Your Custom Title"
        subtitle="Your custom subtitle or tagline"
        buttonText="Get Started"
      />
      <Features />
      <About />
      {/* Add or remove sections as needed */}
    </>
  );
}

Update Site Metadata

Modify site-wide information in app/layout.jsx:

// app/layout.jsx
export const metadata = {
  title: "Your Website Name",
  description: "Your website description for SEO",
  keywords: ["keyword1", "keyword2", "keyword3"],
  authors: [{ name: "Your Name" }],
  openGraph: {
    title: "Your Website Name",
    description: "Your description",
    url: "https://yourwebsite.com",
    siteName: "Your Website Name",
  },
};

Edit Component Content

Most content lives in component files. Example:

// src/components/Home/Hero.jsx
export default function Hero() {
  return (
    <section>
      <h1>Your Headline Here</h1>
      <p>Your compelling description goes here...</p>
      <button>Your CTA Button</button>
    </section>
  );
}

Quick Find: Use your editor's search (Ctrl/Cmd + Shift + F) to find and replace placeholder text across all files.

🖼️ Replacing Images

Organize Your Images

Place your images in the appropriate directories:

public/assets/images/
├── hero/           # Hero section images
├── features/       # Feature section images
├── team/           # Team member photos
├── portfolio/      # Project screenshots
└── blog/          # Blog post images

Update Image References

Replace image paths in your components:

// Before
<Image
  src="/assets/images/hero/placeholder.jpg"
  alt="Hero"
/>

// After - with your image
<Image
  src="/assets/images/hero/my-hero-image.jpg"
  alt="Descriptive alt text for SEO"
  width={1200}
  height={600}
  priority  // Add for above-the-fold images
/>

Image Best Practices

✅ Use WebP format for better compression
✅ Optimize before uploading (max 200-300KB per image)
✅ Use descriptive alt text for accessibility and SEO
✅ Use appropriate dimensions to avoid quality loss
✅ Add priority prop to above-the-fold images

🎨 Customizing Colors

Using Tailwind CSS

Most templates use Tailwind CSS for styling. Colors are defined in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Primary brand color
        primary: {
          50: "#e6f1fe",
          100: "#cce3fd",
          200: "#99c7fb",
          300: "#66aaf9",
          400: "#338ef7",
          500: "#0072f5", // Main primary color
          600: "#005bc4",
          700: "#004493",
          800: "#002e62",
          900: "#001731",
        },
        // Secondary color
        secondary: {
          500: "#7828c8", // Main secondary color
        },
        // Add custom colors
        accent: "#f31260",
        success: "#17c964",
        warning: "#f5a524",
        danger: "#f31260",
      },
    },
  },
};

Using CSS Variables

If your template uses SCSS/CSS, edit app/globals.scss:

// app/globals.scss
:root {
  /* Primary Colors */
  --primary-color: #0072f5;
  --primary-dark: #005bc4;
  --primary-light: #338ef7;

  /* Secondary Colors */
  --secondary-color: #7828c8;

  /* Accent Colors */
  --accent-color: #f31260;
  --success-color: #17c964;
  --warning-color: #f5a524;

  /* Text Colors */
  --text-primary: #000000;
  --text-secondary: #666666;

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f5;
}

/* Dark mode colors */
[data-theme="dark"] {
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --bg-primary: #18181b;
  --bg-secondary: #27272a;
}

Apply Your Colors

Once defined, use them in your components:

With Tailwind:

<button className="bg-primary-500 hover:bg-primary-600 text-white">
  Click Me
</button>

<div className="text-secondary-500 border-accent">
  Colored Content
</div>

With CSS Variables:

<button style={{ backgroundColor: 'var(--primary-color)' }}>
  Click Me
</button>

// Or in your CSS/SCSS
.custom-button {
  background-color: var(--primary-color);
  color: var(--text-primary);
}

🔤 Customizing Fonts

Using Google Fonts (Next.js 14)

Update fonts in app/layout.jsx:

// app/layout.jsx
import { Inter, Poppins } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

const poppins = Poppins({
  weight: ["400", "600", "700"],
  subsets: ["latin"],
  variable: "--font-poppins",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${poppins.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Then update your Tailwind config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", "sans-serif"],
        heading: ["var(--font-poppins)", "sans-serif"],
      },
    },
  },
};

⚡ Quick Customization Checklist

After installing your template, complete these tasks:

[ ] Replace logo files in public/assets/images/logo/
[ ] Update favicon in public/favicon.ico
[ ] Edit site metadata in app/layout.jsx
[ ] Customize colors in tailwind.config.js or globals.scss
[ ] Replace placeholder images in public/assets/images/
[ ] Update hero section content
[ ] Modify navigation menu items
[ ] Edit footer content and links
[ ] Update contact information
[ ] Test all pages for consistency

🎯 Pro Tips

1. Use Search & Replace
Use your editor's global search (Ctrl/Cmd + Shift + F) to quickly find and replace placeholder text, company names, or email addresses across all files.

2. Keep Original Files
Before deleting placeholder images, keep them as reference for dimensions and aspect ratios.

3. Test Responsively
After each customization, test on mobile, tablet, and desktop views using browser dev tools (F12).

4. Version Control
Commit changes frequently with Git so you can revert if needed:

git add .
git commit -m "Updated logo and brand colors"

5. Build Locally
Before deploying, run a production build to catch any errors:

npm run build

📚 Next Steps

Once you've customized the basics:

Deployment - Launch your site
Troubleshooting Guide - Fix error if stuck