Website Configuration

The main configuration file containing core controls for the website.

ShipSaaS has set default core configurations for you, which you can customize in src/config/website.ts.

src/config/website.ts

export const websiteConfig: WebsiteConfig = {
  ui: {
    // UI Settings
  },
  metadata: {
    // Metadata Settings
  },
  social: {
    // Social Media Settings
  },
  auth: {
    // Authentication Settings
  },
  blog: {
    // Blog Settings
  },
  affiliates: {
    // Affiliate Marketing Settings
  },
  mail: {
    // Email Settings
  },
  newsletter: {
    // Email Subscription Settings
  },
  notification: {
    // Notification Settings
  },
  storage: {
    // Storage Settings
  },
  payment: {
    // Payment Settings
  },
};

UI

Controls the appearance of your website.

Mode

Controls light/dark mode settings:

Example:

src/config/website.ts

ui: {
  mode: {
    defaultMode: 'system', // Options: 'light', 'dark', 'system'
    enableSwitch: true,    // Allow users to switch light/dark modes
  },
}

Metadata

Controls the metadata of your website. The metadata configuration consists of several subsections:

Basic Information

Defines basic metadata information for the website:

Example:

src/config/website.ts

metadata: {
  name: messages.site.name,
  title: messages.site.title,
  description: messages.site.description,
  // ...
}

Images

Defines images used for branding and social sharing:

Example:

src/config/website.ts

metadata: {
  images: {
    ogImage: '/og.png',      // Open Graph image for social sharing
    logoLight: '/logo.webp',  // Logo displayed in light mode
    logoDark: '/logo-dark.png', // Logo displayed in dark mode
  },
  // ...
}

You can learn more about custom images in the Images documentation.

Social Media

Configure social media profile links:

Example:

src/config/website.ts

social: {
  github: 'https://github.com/YourOrganization',
  twitter: 'https://x.com/YourHandle',
  youtube: 'https://youtube.com/@YourChannel',
}

These social media links are used by Social Configuration to generate appropriate links in the right places throughout the website.

Authentication

Configure authentication options for the website:

Example:

src/config/website.ts

auth: {
  enable: true,
  enableGoogleLogin: true,
  enableCredentialLogin: true,
  enableDeleteAccount: true,
}

ShipSaaS supports Google OAuth and email/password authentication. You can use these configuration options to selectively disable specific authentication services:

• Set enableGoogleLogin to false to remove the Google login option.
• Set enableCredentialLogin to false to remove the email/password login option.

Note: Ensure that at least one login method is enabled, otherwise users will not be able to log in.

You can learn more about authentication options in the Authentication documentation.

Blog

Configure the blog feature:

Example:

src/config/website.ts

blog: {
  enable: true,
  paginationSize: 6,
}

If the blog feature is not needed, you can set enable to false. If disabled, the blog menu will not be displayed in the navbar and footer, blog-related pages will not be included in the sitemap, and access to the /blog route will redirect to the homepage.

You can learn more about blog configurations in the Blog documentation.

Email

Configure email services:

Example:

mail: {
  enable: true,
  provider: 'cloudflare',
  fromEmail: 'contact@example.com',
  supportEmail: 'support@example.com',
}

You can learn more about email configurations in the Email documentation.

Email Subscription (Newsletter)

Configure email subscription services:

Example:

src/config/website.ts

newsletter: {
  enable: true,
  provider: 'beehiiv',
  autoSubscribeAfterSignUp: true,
}

If you do not need the email subscription feature, you can set enable to false. If disabled, the subscription form will not be shown on the homepage and blog pages, and the subscription status will not be displayed in the background notification settings page.

You can learn more about email subscription configurations in the Newsletter documentation.

Storage

Configure file storage:

Example:

src/config/website.ts

storage: {
  enable: true,
  provider: 'r2',
  maxFileSize: DEFAULT_MAX_FILE_SIZE,
  allowedTypes: DEFAULT_ALLOWED_TYPES,
  userFilesFolder: DEFAULT_USER_FILES_FOLDER,
}

If the storage feature is not needed, you can set enable to false. If disabled, the update user avatar function in the dashboard settings interface will be unavailable.

You can learn more about storage configurations in the Storage documentation.

Notification

Configure notification services:

Example:

src/config/website.ts

notification: {
  enable: true,
  provider: 'discord',
}

You can learn more about notification configurations in the Notification documentation.

Affiliate Marketing

Configure affiliate marketing settings:

Example:

src/config/website.ts

affiliates: {
  enable: true,
  provider: 'affonso', // Or 'promotekit'
}

You can learn more about affiliate marketing configurations in the Affiliate Marketing documentation.

Payment

Configure payment processing services. The payment section contains payment provider settings and pricing plan configurations:

Example:

src/config/website.ts

payment: {
  enable: true,
  provider: 'stripe',
  price: {
    plans: {
      // ... Pricing plans
    },
  },
}

Each pricing plan within the payment.price.plans object can have the following properties:

The prices array contains objects with the following structure:

ShipSaaS uses three pricing plans by default: a free plan, a pro subscription plan (monthly/yearly), and a lifetime plan (one-time payment):

src/config/website.ts

price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: 'month',
          trialPeriodDays: 7,
        },
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: 'year',
          trialPeriodDays: 7,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: 'one_time',
          priceId: clientEnv.VITE_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
    },
  },
},

When to set a pricing plan or price to disabled?

• Set a pricing plan to disabled: true when it is no longer available to new customers but you need to retain it for existing users who already purchased it.
• Set a specific price to disabled: true when it is no longer available but existing subscribers of that price should still see it on their billing page.

You can learn more about pricing configurations in the Payment documentation.

Next Steps

Now that you understand website configurations, explore these related topics:

• Navbar Configuration - Configure the header navigation menu

• Footer Configuration - Configure links in the website footer

• Payment Integration - Configure payment features for the website

• Sidebar Configuration - Configure the dashboard navigation menu

• Configuration

• Navbar Menu