How to Customize Your Spa Website Theme and Branding in SpaSphere
Upload your logo, set brand colors, and style your booking site's header, hero, and footer.
9 min read
Your booking website's visual identity sets the tone before a client ever reads a word. SpaSphere's theme editor gives you full control over colors, logo, favicon, and hero image styling so your booking site reflects the same professionalism and aesthetic that clients experience in person at your spa.
Why This Matters for Your Spa
First impressions on the web happen in under 50 milliseconds. A cohesive, branded website signals professionalism and trustworthiness, which directly impacts whether a new visitor books or bounces. Studies show that consistent brand presentation across all platforms increases revenue by up to 23%. For spas, where the experience is everything, a website that matches your in-person aesthetic creates a seamless brand journey from discovery to doorstep. Spas with professional, on-brand websites report 30-50% higher first-visit booking rates compared to those using generic templates with default colors.
Key Capabilities
- Set primary, secondary, and accent colors for your entire site
- Upload and resize your business logo with live preview
- Upload a custom favicon (browser tab icon)
- Configure header and footer colors independently
- Control hero image opacity, height, and background color
- Set page background, page title, and product card colors
- Adjust hero text and footer text colors for readability
- All changes preview in real time on the right side of the editor
Customizing Your Theme
Open the Theme tab
Navigate to Website in the sidebar. In the split-screen editor, click the Theme tab. The theme editor is organized into three expandable sections: Appearance Colors, Text Colors, and Branding.
Set your primary and secondary colors
Expand the Appearance Colors section. Use the color pickers to set:
- Primary Color: Your main brand color used for buttons, links, and accents across the site. This should be a color that stands out and drives action.
- Secondary Light Color: A softer, lighter color used for backgrounds and subtle highlights.
- Hero Section Opacity Color: The overlay color applied on top of your hero image to ensure text readability.
- Page Title Color: The color used for section headings throughout your site.
As you pick colors, the live preview on the right updates immediately.
Configure header and page backgrounds
Still in the Appearance Colors section, scroll down to set:
- Header Background Color: The background of your navigation bar.
- Header Text Color: The color of menu items and the site name in the header.
- Background Color: The main page background color.
- Product Background Color: The background behind product cards (especially noticeable with PNG product images with transparency).
- Hero Background Color: The fallback color shown behind the hero section before or if the hero image fails to load.
Adjust hero image settings
Configure the Hero Image Opacity slider (0-100%) to control how much the overlay color darkens or tints your hero image. A higher opacity means more of the overlay color shows through, which improves text readability. Adjust the Height slider (480-2000px) to set how tall the hero section appears on the page.
Set text colors
Expand the Text Colors section. Configure:
- Hero Text Color: The color of the headline and subtitle text overlaid on your hero image. Choose a color with strong contrast against your hero image and opacity overlay.
- Footer Text Color: The text color used in your website footer, which typically sits on a darker background.
Upload your logo
Expand the Branding section. Under Site Logo, click the upload area to select your logo image. SpaSphere recommends a PNG with a transparent background, 200-400px wide. After uploading, use the Logo Size slider (20-80) to adjust how large the logo appears in your header. The live preview shows the result immediately.
Upload your favicon
Below the logo settings, upload your Favicon Image. This is the small icon that appears in browser tabs and bookmarks. SpaSphere recommends a square image, 32x32px or 64x64px. A favicon is a small detail that adds professional polish and helps clients identify your site in their browser tabs.
Save your changes
Click Save changes in the sticky bar at the bottom. Your updated theme is applied immediately to your public booking site.
Match your primary color to your in-spa branding
Your primary color should be the same color you use on business cards, signage, and in-spa decor. This consistency creates instant brand recognition when a client moves from your website to your physical location. If your brand color is dark, pair it with a light secondary color for contrast. If your brand color is vibrant, use a neutral page background so the color pops without overwhelming the design.
Color Settings Reference
| Setting | What It Controls | Default | Recommendation |
|---|---|---|---|
| Primary Color | Buttons, links, accents | #2E5C42 | Your main brand color |
| Secondary Light Color | Light backgrounds, highlights | #F5F5F5 | A neutral off-white or light tint |
| Hero Opacity Color | Overlay on hero image | #E3EBD9 | Dark for light text, light for dark text |
| Header Background | Navigation bar background | #FFFFFF | White or your brand color |
| Header Text | Menu items, site name | #000000 | High contrast with header background |
| Page Background | Main content area | #FFFFFF | White or near-white for readability |
| Product Card Background | Behind product images | #FFFFFF | Match page background or light accent |
| Hero Background | Fallback behind hero | #E3EBD9 | Match your brand palette |
| Hero Text | Headline overlay text | #FFFFFF | White for dark overlays, dark for light |
| Footer Text | Footer links and text | #FFFFFF | White on dark footers |
| Page Title | Section headings | #000000 | Dark for readability |
Hero Image Best Practices
The hero image is the first visual element clients see when they visit your site. Follow these guidelines for the best result:
- Aspect ratio: Upload a 16:9 widescreen image (e.g., 1920x1080px) for the best fit
- Image quality: Use a high-resolution photo that represents your spa's atmosphere
- Opacity overlay: Set opacity between 40-70% for readable text over busy images
- Height: 500-700px works well for most layouts; taller heroes create a more dramatic first impression
- Text contrast: Ensure your hero text color has strong contrast against the combination of your image and opacity overlay
Images are automatically optimized
When you upload a logo, favicon, or hero image, SpaSphere automatically compresses and converts it to WebP format for fast loading. Large images are resized to appropriate dimensions without visible quality loss. This means your site stays fast even with high-resolution photos, which matters because page load speed directly affects search engine rankings and client bounce rates.
Frequently Asked Questions
Related Documentation
Ready to try this in your spa?
$1 for 30 days. No contracts. We migrate everything for you.