Customizing your branding

The SaaS World starter kit offers the ability to fully customize the source code according to your specific project needs. To make this process seamless, we have included placeholder text throughout the source code that you can easily replace with your own project information. This document will guide you through the steps to identify and replace these placeholders using the Find and Replace feature in VSCode or any other IDE of your choice.

Placeholder Text

The source code includes the following placeholder strings that you will need to replace with your own project information:

##project_name##: The name of your project. For example, 'My SaaS App'.
##project_tagline##: A short tagline for your project. For example, 'The Best SaaS Solution'.
##project_description##: A brief 1-2 sentence description of your project.
##payment_link##: A stripe payment link. For example, https://buy.stripe.com/test_fZebJR2Xy2Azbp6bIN (opens in a new tab).
##contact_name##: The name of the person or department providing support. For example, 'My SaaS App Support'.
##contact_email##: The email of the person or department providing support. For example, support@mysaasapp.com.

Replacing the placeholder text with your project info

The above placeholders appear multiple times throughout the source code, so using the Find & Replace All feature in your IDE will ensure that all instances are updated at once.

Use the Find & Replace All feature

In VSCode:
1. Open the Find & Replace Panel:
  - Press Ctrl + Shift + H (Windows/Linux) or Cmd + Shift + H (Mac) to open the Find and Replace panel.
2. Find and Replace the above mentioned placeholders:
  - In the "Search" field, enter <placeholder>.
  - In the "Replace" field, enter the value to replace.
  - Click on "Replace All" to replace all instances of <placeholder> in the project.

Verify the Replacements

Review Changed Files:
- After performing the replacements, review the changed files to ensure that all placeholder texts have been correctly replaced with your project information.
- Pay special attention to key configuration files and user-facing components to verify the correct display of your customized text.
Start the dev server with the following command:
```
npm run dev
```
Look through all the various pages and components on the starter kit website to confirm that the changes are visible as expected.

Conclusion

By following these steps, you will be able to quickly and efficiently customize the SaaS World source code to align with your project needs. Using the Find & Replace All feature in your IDE ensures that all instances of the placeholder text are updated instantaneously, saving you time, effort and energy.

Step 3 - Set up your development environment Themes