Customization Guide

This comprehensive guide will walk you through customizing your NextSaaS template to meet your specific requirements. Whether you're modifying production files or development components, this documentation provides step-by-step instructions for all customization scenarios.

Production File #

Customizing NextSaaS production files is straightforward and involves modifying HTML, CSS, and JavaScript code within the production folder. Since we use Vite for production builds, you'll find the compiled production files in the dist folder.

To customize production files:

Open the dist folder using your preferred code editor
Locate the specific files you want to modify
Make your desired changes to the HTML, CSS, or JavaScript code
Save your changes

Note: Production file modifications will be overwritten when you rebuild the project. For persistent changes, modify the source files in development mode.

Development File #

Component Structure

All page content is managed through a modular component system. Components are organized in the src/components folder with the following structure:

src/components/pages - Contains page-specific components organized by page name
src/components/shared - Contains reusable components used throughout the project

Example: To customize the hero section of crypto marketing, navigate to src/components/pages/crypto-marketing/hero.htm. You can also access specific component files through their respective page imports.

CSS Architecture

NextSaaS is built using Tailwind CSS v4 with custom utility classes. All CSS files are located in the src/styles folder and imported into src/styles/main.css.

CSS File Organization

header.css - Header and navigation utility classes
badge.css - Badge utilities (badge-green, badge-blur, badge-primary, etc.)
button.css - Button styling and variants
base.css - Typography and base styles
custom-swiper.css - Customized Swiper component styles
common.css - Common utility styles
variable.css - CSS custom properties and Inter Tight font configuration

Font Configuration: The project uses Inter Tight font, which can be customized in the variable.css file.

Asset Management

Images

All images are stored in the public/images folder. To replace any image:

Navigate to public/images
Replace the existing image with your new file
Ensure the new file has the same name and format, or update all references

Icons

Custom icons are stored in the public/icons folder. Follow the same process as images to replace icons.

Modifying Styles

Tailwind CSS: Modify src/styles/ files for custom styles
Component Styles: Edit individual component CSS files
Variables: Update src/styles/variables.css for theme customization

JavaScript Customization

All custom JavaScript code is organized in the src/js/main.js file. The code is modularized across different files for better maintainability. To customize any JavaScript functionality:

Navigate to the specific JavaScript file
Locate the function you want to modify
Make your changes while maintaining the existing function signatures

Adding Animations

Create new animation files in src/js/animation/
Import and initialize in src/main.js

Creating New Pages #

Follow this systematic approach to create new pages in your NextSaaS project:

Step 1: Create the HTML File

Create a new HTML file in the root folder with your desired page name. The filename will serve as the route name.

Example: Creating new-page.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <Component src="src/components/shared/head-links.htm" />
    <title>New Page - NextSaaS</title>
  </head>
  <body>
    <Component src="src/components/shared/header-one.htm" />
    <main>
      <!-- Page content will be added here -->
    </main>
    <Component src="src/components/shared/footer-one.htm" />
  </body>
</html>

Step 2: Create Component Directory

Create a new folder in src/components/pages named after your page (e.g., new-page)
This folder will contain all components specific to your new page

Step 3: Create Page Components

Create individual component files for each section of your page.

Example: Creating hero.htm for the hero section:

<section>
  <div>
    <h1>New Page Hero</h1>
  </div>
</section>

Step 4: Import Components

Import your component into the main HTML file using Vite's component system:

<main>
  <Component src="src/components/pages/new-page/hero.htm" />
  <!-- Add additional components as needed -->
</main>

Step 5: Add Additional Sections

Continue creating components for additional sections (features, testimonials, pricing, etc.) and import them into your main page file.

Step 6: Render your page

Open this http://localhost:5173 in your favorite browser. Enter your recently created page name after the port. Like http://localhost:5173/new-page.html.

SEO and Head Meta #

All global SEO tags live in src/components/shared/head-links.htm. Edit that file to change site-wide metadata:

Meta title: Update the content of the meta[name="title"] tag.

<meta name="title" content="Your Page or Site Title" />

Meta description: Update the content of the meta[name="description"] tag.

<meta name="description" content="A short description for search engines and link previews." />

Open Graph (Facebook/LinkedIn) image: Change the content URL of meta[property="og:image"]. Optional: adjust width/height/alt.

<meta property="og:image" content="/images/og/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive image alt text" />

Twitter image: Keep in sync with OG image or set a different one.

<meta name="twitter:image" content="/images/og/og-image.jpg" />

Favicons and app icons: Replace files in public/ and ensure the links point to them.

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Put the icon files in public/ (already set up).

Canonical URL: Update the href on the canonical link.

<link rel="canonical" href="https://your-domain.com/" />

Social title/description: Keep og:title, og:description, twitter:title, and twitter:description aligned with meta title/description if desired.

Per-page overrides: If a specific page needs different metadata, add or override the relevant tags in that page’s <head> section. Tags in the page will take precedence over the shared component when placed after it.

Best Practices #

Component Organization

Keep components modular and focused on single responsibilities
Use descriptive names for component files
Maintain consistent file structure across pages

CSS Customization

Leverage Tailwind's utility classes whenever possible
Use CSS custom properties for theme values
Keep custom CSS minimal and well-documented

Asset Management

Optimize images for web performance
Use consistent naming conventions
Maintain organized folder structures

Support #

For additional assistance with customization:

Email: hello@pixels71.com

Our team is available to help with any customization questions or complex implementation requirements.