Skip to content
ShipSaaSShipSaaS Docs

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

Section titled “UI”

Controls the appearance of your website.

Mode

Section titled “Mode”

Controls light/dark mode settings:

Property Type Description
defaultMode 'light' | 'dark' | 'system' Sets the default display mode
enableSwitch boolean When true, allows users to switch between light and dark modes

Example:

src/config/website.ts

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

Metadata

Section titled “Metadata”

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

Basic Information

Section titled “Basic Information”

Defines basic metadata information for the website:

Property Type Description
name string Website name, used for brand display
title string Website title, used for browser tabs and SEO
description string Website description, used for search engine and social media previews

Example:

src/config/website.ts

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

Images

Section titled “Images”

Defines images used for branding and social sharing:

Property Type Description
ogImage string Open Graph image URL used for social media previews
logoLight string Logo image URL in light mode
logoDark string Logo image URL in dark mode

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

Section titled “Social Media”

Configure social media profile links:

Property Type Description
github string GitHub profile or repository URL
twitter string Twitter/X profile URL
blueSky string Bluesky profile URL
discord string Discord server URL
mastodon string Mastodon profile URL
linkedin string LinkedIn profile URL
youtube string YouTube channel URL
facebook string Facebook page URL
instagram string Instagram profile URL
tiktok string TikTok profile URL
telegram string Telegram group or channel URL

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

Section titled “Authentication”

Configure authentication options for the website:

Property Type Description
enable boolean Enables authentication when set to true
enableGoogleLogin boolean Enables Google login when set to true
enableCredentialLogin boolean Enables email/password login when set to true
enableDeleteAccount boolean Allows users to delete their account when set to true

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

Section titled “Blog”

Configure the blog feature:

Property Type Description
enable boolean Whether to enable the blog; defaults to true
paginationSize number Number of articles displayed per page

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

Section titled “Email”

Configure email services:

Property Type Description
enable boolean Whether to enable email features; defaults to true
provider 'cloudflare' Email service provider
fromEmail string Contact email used to send emails
supportEmail string Contact email used to receive support emails

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)

Section titled “Email Subscription (Newsletter)”

Configure email subscription services:

Property Type Description
enable boolean Whether to enable email subscriptions; defaults to true
provider 'beehiiv' Email subscription service provider
autoSubscribeAfterSignUp boolean Whether to automatically subscribe users after registration

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

Section titled “Storage”

Configure file storage:

Property Type Description
enable boolean Whether to enable storage; defaults to true
provider 'r2' Storage provider (currently only supports R2)
maxFileSize number Maximum file size in bytes
allowedTypes string[] Allowed file MIME types
userFilesFolder string Folder name for user uploaded files

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

Section titled “Notification”

Configure notification services:

Property Type Description
enable boolean Whether to enable notification features; defaults to true
provider 'discord' Notification provider (currently only supports Discord)

Example:

src/config/website.ts

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

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

Affiliate Marketing

Section titled “Affiliate Marketing”

Configure affiliate marketing settings:

Property Type Description
enable boolean Whether to enable affiliate marketing; defaults to false
provider 'affonso' | 'promotekit' Affiliate marketing provider to use

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

Section titled “Payment”

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

Property Type Description
enable boolean Whether to enable payment; defaults to true
provider 'stripe' Payment processor (currently only supports Stripe)
price object Pricing plan configurations (see below)

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:

Property Type Description
id string Unique identifier of the pricing plan
name string? Display name of the pricing plan
description string? Description of the pricing plan
features string[]? List of features included in the pricing plan
limits string[]? List of limits included in the pricing plan
prices Price[] List of price options (monthly, yearly, one-time, etc.)
isFree boolean Whether it is a free pricing plan
isLifetime boolean Whether it is a lifetime (one-time payment) pricing plan
popular boolean? Whether to highlight the plan as recommended
disabled boolean? Whether to disable the pricing plan in the UI

The prices array contains objects with the following structure:

Property Type Description
type 'subscription' | 'one_time' Payment type (subscription or one-time)
priceId string Stripe Price ID (not Product ID)
amount number Price amount in currency units (in cents, e.g., 990 for $9.90)
currency string Currency code (currently only USD is supported)
interval 'month' | 'year'? Billing interval for recurring payments
trialPeriodDays number? Number of free trial days
allowPromotionCode boolean? Whether to allow promotion codes
disabled boolean? Whether to disable the price in the UI

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

Section titled “Next Steps”

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