🚀 Make This Yours — Setup Guide

Your website, app, and coaching hub are ready. Follow these steps to brand everything with your name, colors, prices, and links. No coding for branding, but Firebase, domains, payments, and launch QA still need careful setup.

The fastest path:
Open /brand-studio.html → fill it in → export the Universal_Brand_Kit.zip → place the included brand.json in the Website, App, and Hub roots → redeploy all three.

Open Buyer Brand Install Page →

1 Pick your color & brand

Open yoursite.com/brand-studio.html in your browser and fill in:

Color — click one of the 12 themes, or paste your exact brand hex code.
Business name, phone, email, city.
Social handles — Instagram, YouTube, Facebook, TikTok.
Logo — upload yours to preview it.

For a locked buyer brand, set LOCK_THEME and HIDE_SWITCHER inside wlf-theme-init.js. For demos, the picker can stay visible so prospects can preview color schemes.

2 Download & drop in your brand file

Click ⬇ Export Universal Brand Kit in Brand Studio.
Open /BUYER_BRAND_INSTALL.html or the included checklist if you want the step-by-step brand install page.
Place the exact same included brand.json into the top/root folder of the Website package, App package, and Hub package, replacing the existing file in each one.
Save your logo image into each package root as wlf-logo.svg or use the logo path you entered in Brand Studio.

Your name, color, phone, email, socials, and logo now use one shared buyer setup file. Website/App/Hub links also carry the selected ?theme= and optional ?brandColor= forward when users move between properties.

3 Set your prices

Your prices live in the page text so you control them exactly:

Open the site files and search for the dollar amounts (e.g. $199, $97) or a program name.
Change the number to your price. Do this for each plan/program you offer.
Most editors (or even Netlify's editor) let you Find & Replace across all files at once.

Tip: pick the prices you'll charge before launch so you only do this once.

4 Connect your payments

Create your checkout links in Stripe (or your processor).
In the files, replace every #YOUR_CHECKOUT_LINK with your real checkout URL.
You can paste your main checkout link in Brand Studio too, and it fills the buttons for you.

Payments go straight to your account — no middleman, no commission.

5 Swap images & add your guides

Replace wlf-logo.svg, wlf-hero.png, and wlf-avatar.svg with your own (keep the same names).
Drop your PDF guides into the guides folder — they link automatically.

6 Connect Firebase coach access

Create a buyer-owned Firebase project.
Replace the Firebase placeholder values in the app, hub, and website files.
Deploy firestore.rules.
Create the buyer's coach/admin login in Firebase Authentication.
Add a coachAdmins/{uid} Firestore document for that coach account.

This removes the old hardcoded admin email model. The buyer owns their admin access.

7 Test the client workflow

Open the website, app, and hub on desktop and mobile.
Complete one free workout.
Submit one check-in.
Log into the coach hub and confirm the activity appears.
Assign a workout and open it from the client side.

8 Go live

Drag your whole site folder into Netlify (or any web host). No build step.
Add your domain in Netlify → Domain settings. Done — you're live and fully branded.

Need to rebrand again later? Rerun Brand Studio, export a new Universal Brand Kit, and drop the new brand.json into Website/App/Hub. 🎯