Documentation

Customization

Learn how to customize your SaaS branding, landing page, and content using the centralized config files.

First thing to do after installation! ShipSecure makes it super easy to personalize your SaaS without touching complex code.

All customization happens in the src/config/ directory. These centralized configuration files let you update your entire app's branding, content, and marketing materials in one place.

Overview

ShipSecure uses two main configuration files:

  • src/config/site.ts - Branding, SEO, and site metadata
  • src/config/marketing.ts - Landing page content, features, and pricing

Branding & SEO (src/config/site.ts)

This file controls your app's identity across the entire application. Update it to change your app name, description, URL, social links, and SEO settings.

Configuration Options

export const siteConfig = {
  // App Identity
  name: "MySaaS", // Your app name (appears in headers, footers, titles)
  title: "MySaaS - Your Tagline", // Full page title
  description: "My awesome SaaS built with ShipSecure", // SEO description

  // URLs
  url: "https://myapp.com", // Your production domain
  ogImage: "https://myapp.com/og.png", // Social media preview image

  // Social Links
  links: {
    twitter: "https://twitter.com/yourhandle",
    github: "https://github.com/yourusername",
    mail: "mailto:hello@myapp.com",
  },

  // Author Information
  author: {
    name: "Your Name",
    web: "https://yourwebsite.com",
  },

  // SEO Keywords
  keywords: ["SaaS", "Your Keywords", "More Keywords"],
};

What This Affects

When you update site.ts, these changes appear across your entire application:

  • App Name: Headers, footers, page titles, metadata
  • SEO: Meta descriptions, Open Graph tags, Twitter cards
  • Social Sharing: Preview images and descriptions when shared
  • Links: Footer links, contact information
  • Sitemap: Automatically generated from your URL

Example: Changing Your App Name

// Before
name: "ShipSecure",

// After
name: "MyAwesomeSaaS",

This single change updates your app name in:

  • Navigation header
  • Footer copyright
  • Page titles
  • Meta tags
  • Sitemap

Landing Page & Marketing (src/config/marketing.ts)

This file controls your landing page content - hero section, features list, and pricing plans.

Hero Section

export const marketingConfig = {
  hero: {
    badge: "Your Tagline", // Small badge above title
    title: {
      first: "Build", // First part of hero title
      second: "Fast", // Second part (highlighted)
    },
    description: "Your product description here. Use <br /> for line breaks.",
    cta: "Get Started", // Call-to-action button text
  },
  // ...
};

Features List

Customize the features displayed on your landing page:

features: [
  {
    icon: "lock",                    // Lucide icon name
    title: "Bank-Grade Security",
    description: "Pre-configured security headers to prevent attacks.",
  },
  {
    icon: "zap",
    title: "Lightning Fast",
    description: "Built on Next.js 16 for optimal performance.",
  },
  // Add more features...
],

Available Icons: Use any Lucide React icon name (e.g., lock, zap, shield, key, database, flask).

Pricing Configuration

Configure your pricing (single plan or multiple tiers):

// Single plan with launch discount (recommended)
pricing: {
  badge: "🚀 Product Hunt Special",
  name: "ShipSecure",
  price: "$49",
  originalPrice: "$149",
  savings: "Save $50",
  description: "Everything you need to ship securely",
  features: [
    "Private GitHub repository access",
    "Full source code (TypeScript)",
    "Lifetime updates & security patches",
    "Commercial license (unlimited projects)",
    "Email support",
  ],
  href: "https://your-purchase-link.com",
  cta: "Get Instant Access",
},

What This Affects

When you update marketing.ts, these changes appear on:

  • Landing Page Hero: Title, description, CTA button
  • Features Grid: All feature cards
  • Pricing Table: All pricing plans and features

Quick Start: 5-Minute Customization

  1. Open src/config/site.ts

    • Change name to your app name
    • Update url to your domain
    • Add your social links

  2. Open src/config/marketing.ts

    • Update hero.title with your value proposition
    • Modify features array with your features
    • Update pricing array with your plans

  3. Save and refresh

    • Your changes appear immediately!

Advanced Customization

Adding Custom Colors

To change your app's color scheme, edit src/app/globals.css:

:root {
  --primary: 142 71% 45%; /* Your primary color (HSL) */
  --secondary: 217 33% 17%; /* Your secondary color */
  /* ... more color variables */
}

Customizing Components

While the config files handle most customization, you can also:

  • Components: Edit files in src/components/ for UI changes
  • Pages: Modify src/app/page.tsx for landing page layout changes
  • Styles: Update Tailwind classes in component files

Best Practices

  1. Update config files first - Before building features, customize your brand
  2. Keep it simple - Use config files for content, code for functionality
  3. Test changes - Refresh your browser after config changes
  4. Version control - Commit your config changes to track your branding evolution

Troubleshooting

Changes not appearing?

  • Clear cache: Hard refresh (Cmd+Shift+R / Ctrl+Shift+R)
  • Restart dev server: Stop and restart npm run dev
  • Check file path: Ensure you're editing files in src/config/

TypeScript errors?

  • Check types: Ensure your config matches the TypeScript types
  • Restart TypeScript server: In VS Code, Cmd+Shift+P → "TypeScript: Restart TS Server"

Next Steps

After customizing your brand:

That's it! Your SaaS is now personalized and ready for development. Happy building!