Serene Studio

For the studio owner

Make this website yours.

Nine short steps. No coding experience needed — each step tells you exactly what to change and where. Your visitors never see this page unless you link to it.

Before you start

The site is fully built and launch-ready. Content, pricing, schedule and products are written as neutral starting points, and nothing is connected to a booking, payment or store account yet. Work through the steps below in order — each one points to a single, clearly labelled file — and the site is ready to go live under your brand.

  1. Step 1

    Branding

    Where: src/config/site.ts

    • Studio name and stacked name used in the logo
    • Tagline and hero wording
    • Logo artwork (src/components/site/Logo.tsx) and favicon
    • Brand colours and fonts (src/styles.css)

  2. Step 2

    Business information

    Where: src/config/site.ts

    • Address, phone and email
    • Opening hours
    • Social media links
    • Neighbourhood or service area wording

  3. Step 3

    Instructors

    Where: src/components/site/Instructors.tsx

    • Photos (replace files in src/assets)
    • Names and roles
    • Credentials and certifications
    • Bios and specialties

  4. Step 4

    Classes

    Where: src/config/site.ts and src/config/specialties.ts

    • Class names and descriptions
    • Duration and capacity
    • Specialty programming you actually offer
    • Remove any class you do not teach

  5. Step 5

    Pricing

    Where: src/config/site.ts

    • Introductory offer
    • Drop-in price
    • Class packs and memberships
    • Private session rates and gift cards

  6. Step 6

    Booking

    Where: src/config/integrations.ts

    • Paste your Mindbody (or other provider) booking URL
    • Optional: paste a schedule widget embed URL for live timetables
    • Add memberships, packages, waitlist and client account links
    • Add your new client intake / waiver form link
    • Works with Mindbody, Vagaro, Momence, Acuity or Calendly

  7. Step 6b

    Payments

    Where: src/config/integrations.ts

    • Paste a Stripe Payment Link, Square Checkout or PayPal link
    • Separate links for class packs, memberships and gift cards
    • Leave blank if your booking platform handles checkout
    • No keys or credentials are stored in this website

  8. Step 7

    Merch

    Where: src/config/integrations.ts and src/config/merch.ts

    • Paste your Shopify, Printful, Printify or other store URL
    • Replace each product name, price, description and image
    • Add per-product links if you want cards to open exact products
    • Delete products you do not sell

  9. Step 8

    Content

    Where: src/config/site.ts and src/assets

    • Studio photography
    • Genuine client testimonials, with permission
    • Promotional and offer copy
    • FAQ answers with your own policies

  10. Step 9

    Final test

    Where: Whole site

    • Every navigation link and booking button
    • Booking and contact forms
    • Contact details and map link
    • Merch links, pricing buttons, social links
    • Mobile layout on a real phone

Need a hand?

If you would rather not edit files yourself, send your branding, business details, booking link and store link to whoever manages the site — every item above lives in a single, clearly labelled place.