Custom CSS
Custom CSS lets you change the look and feel of your booking page beyond the brand color setting. Override fonts, button styles, card layouts, and more.
How do I add custom CSS?
1
Go to Custom CSS in the sidebar
2
Type or paste your CSS in the editor
3
Click 💾 Save & Apply CSS
4
Click 👁 Preview to see the result
⚠️ Important: Always test your CSS in a private/incognito browser after saving. Bad CSS can break your booking page layout.
How do I change button colors?
The main booking button uses the class .btn-primary. To change its color:
.btn-primary {
background: #your-color !important;
}Replace #your-color with any hex color code (e.g., #1a73e8 for blue).
Can I change the font?
Yes. First add your Google Font link, then apply it:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif !important;
}What else can I customize?
- Hide reviews section:
#bpReviewsSection { display: none !important; } - Round all buttons:
.btn-primary { border-radius: 50px !important; } - Dark nav bar:
.nav { background: #1a1a2e !important; } - Larger service names:
.service-card-name { font-size: 1.1rem !important; }
Pro tip: Use your browser's Inspect tool (right-click → Inspect) on your booking page to find the exact CSS class names to target.
How do I reset / remove custom CSS?
Clear all the CSS in the editor and click Save & Apply CSS. Your booking page returns to its default appearance instantly.