Theme Builder Setup (Part 1b): If you already have existing users, customers, or custom CSS/theme installed

1. Copy the Javascript from the Theme Builder > Getting Started menu. This will allow you to preview your Theme Builder customizations before publishing live for everyone to see.

IMPORTANT: Leave the CSS code alone for now.

2. Open a new browser tab and access your HighLevel account.
   
   Paste the Theme Builder Custom Javascript you just copied into the Custom JS field found in your HighLevel Agency View > Settings > Company menu > and scroll down until you see "Custom Javascript".
   
   Once you've pasted the code, be sure to click the blue "Update Company" button at the bottom of the screen.

IMPORTANT: While on this screen, be sure to copy any pre-existing Custom CSS code you might have in your HighLevel Agency View > Settings > Company > Custom CSS field. Paste your pre-existing Custom CSS into a Notepad or other text editor app and save the file to use as a 'backup' in case you need to use it later.

3. Switch back to the browser tab for the Theme Builder.
   
   Add your HighLevel domain URL in the Theme Builder > Settings (found on the left-side menu).
   
   You can use the default https://app.gohighlevel.com or your own custom white-label domain URL here. (Ensure you include the https:// part of the domain.)
   
   Then click the "Update" text on the right.

4. Click the "Open draft realtime preview" link (orange text) to open a new browser tab with your HighLevel account in it.
   
   You’re now connected to the Theme Builder "Preview Mode".
   
   Any customization you make within the Theme Builder tab will be immediately updated on "Preview Mode" tab you just opened.

Note: This "Preview Mode" tab should only be used to preview/test your Theme Builder customizations, and nothing else. When you are done previewing/testing, you can close the tab.

5. At the bottom-right of the "Preview Mode" tab, click on the phrase "Click Here" as shown in the screenshot below.
   
   This allows you to see what your HighLevel interface looks like in real time (without any pre-existing custom CSS) as you use the Theme Builder to customize your HighLevel platform.

6. Switch back over to the Theme Builder tab and start experimenting with Presets and Customizations until you like what you've created.
   
   Remember to switch between the Theme Builder and "Preview Mode" tabs (or you can set up a side-by side view on your monitor(s)) to observe your edits in real time.

7. When you're ready to launch your new 'theme' to all users/customers on your platform, you can close the "Preview Mode" HighLevel tab and switch to the browser tab with your normal HighLevel account.
   
   You will need to delete your pre-existing Custom CSS from your HighLevel.

   

8. Copy the Custom CSS from the Theme Builder's "Getting Started" menu and paste into your HighLevel Custom CSS field, then click the "Update Company" button.

   

9. Click Publish in the Theme Builder.

NOTE: You may have to click on one of the "Main Themes" menu options to see the "Publish" button.

10. Refresh your normal HighLevel browser tab and see your changes take place.

Related Help Docs:

Backing Up & Restoring Your Custom Themes: https://help.themarketerstoolkit.com/article/38/backing-up-restoring-your-custom-theme-builder-themes

"Inspect Mode" For Theme Builder: https://help.themarketerstoolkit.com/article/39/inspect-mode-for-theme-builder