You can give the booking form your own look and content: the colors come from a pre-filled style field you adjust, each property gets a photo and a marketing title in your guests' languages, and amenity icons show the property's features at a glance. Colors, photos and titles live in the Booking Engine settings; the amenities behind the icons are ticked in the Website Builder.
Before you start
Have these ready before you style the booking form:
- Your Booking Engine set up and showing your properties. See .
- One photo per property; a square shape works best, and keep the file size at most 500 kB.
The booking form and your website are styled in different places
The settings in this article change only the Booking Engine: the booking form guests use, whether it's embedded in your site or on your Smoobu booking page. Everything else about your website (pages, layout, fonts, page colors, text sections) is edited in the Website Builder editor instead. For that, see How do I edit my website?.
Steps
- Open Configuration > Booking Engine. On the Accommodation settings tab, pick a property.
- Upload the Accommodation Photo: a square shape works best; keep it at most 500 kB. Guests see it as the property's thumbnail in the booking form's search results.
- Enter a Marketing title for each language you welcome guests in. This text is the headline on the property's card and the one place for a written description next to the amenity icons, so use it to describe the property in words. The icons themselves come from the amenities you tick for the property under Configuration > Website Builder > Accommodations > Details & Photos.
- Click Save and repeat steps 1 to 3 for your other properties.
- Switch to the Booking System Settings tab and open the Custom style section.
- The Custom CSS field comes pre-filled with a list of color settings (font color, button and brand colors, and more). Change the color values in that list to your brand's colors and leave the rest of the structure as it is. Going beyond these color values is web-developer work; Smoobu Support doesn't write custom CSS for you.
- Click Save.
Check it worked
Click Preview at the top right of the Booking Engine page. Each property shows its photo as the thumbnail and its marketing title next to the amenity icons, and the form uses your colors. If the form is embedded in your website, reload that page too.
Common problems
I changed the colors but my website still looks the same
That's expected: the Custom CSS field styles only the booking form, not the pages around it. Your website's own colors, fonts and layout are edited in the Website Builder editor; see How do I edit my website?.
The buttons on my Property Details or Book Now page don't match my site's colors
Those two pages are built by Smoobu, and their buttons keep Smoobu's own color instead of following the button color in your Website Builder Theme. You can't change that in the editor, but Smoobu Support can adjust the button styling for you on request, and the English default text on the Property Details page too. See How do I edit my website? for what's fixed on those pages. This is separate from the Custom CSS above, which styles the booking form itself.
The same icon appears several times next to my property
Smoobu offers 44 amenities but 41 icons, so a few amenities share one icon. The TV options all show the same TV icon, for example, and balcony and terrace share one icon. Ticking several of them puts identical icons side by side on your card; untick the near-duplicates you don't need, and the card updates by itself.
My texts only show in one language
The marketing title has a separate field per language, so fill each language you need. The form's buttons and labels are different: they follow each guest's browser language automatically, while texts you write yourself appear exactly as you entered them. How languages work across the booking form is explained in What language do guests see on the booking form?.
Related articles
Still stuck?
If these steps didn't fix it, contact the Smoobu team: open the Help menu to open a ticket or book a call slot, or use the chat bubble in the bottom-right corner. To get the fastest answer, please include:
- Your Smoobu User ID (in the profile-icon menu, top right).
- The property name or ID, if it's about one property.
- The Booking ID, if it's about one booking (Bookings, then View more).
- The channel name, if it's about channel sync (Booking.com, Airbnb, Vrbo, and so on).
- A short step-by-step: what you did, what you expected, and what happened.
- Screenshots or a short screen recording of the problem.
- Your browser and operating system, if something looks wrong on screen.
Comments
8 comments
Seam to be a very cool feature.
I dont know the syntax to change colors and other objects, where can I find it ?
For example to match my logo green and yellow instead of the black trasparent and blu in the property selector?
Best regards
Maurizio Sabbatini
maurizio@webspider.ch
Hi
Can support give us clear instruction which part to change to make changes, full css with comments etc..
I ask the same. I have try the example code but nothing change
No docs are available...
Hi guys,
I am sure we can help you. But please note that this is a developer pro feature and we will not be able to do a lot of customization. You may want to check with a developer. But will let you know once we receive your details. Which item should be adapted in which way.
You can also already find this standard css in your settings.
:root {
/* font colors */
--font-color-default: #9a9a9a;
--font-color-label: #9a9a9a;
--font-color-input: #9a9a9a;
--font-color-icons: #9a9a9a;
--font-color-input-icons: #9a9a9a;
--font-color-headlines: #9a9a9a;
--font-color-error: #F45B69;
--font-color-black: #424242;
/* borders */
--border-radius: 5px;
--border-width: 1px;
--border-color-default: #ced4da;
--border-color-container: #ced4da;
--border-color-input: #ced4da;
--border-color-image: #ced4da;
--border-color-error-shaddow: rgba(244, 91, 105, 0.25);
/* button */
--button-color-primary: #3b4aff;
--button-color-secondary: white;
}
Thanks
Philipp
Okay, a few hours and I did it. Philipp, you're cool, thanks :))
Hi, does anyone know how to change the default value to "2" in the Adults dropdown menu?
Hey,
Is it possible to change decrease the size of the whole thing, so that it is more mobile user friendly?
Hi to all our lovely Smoobu users!
For quick support, we recommend you to open a ticket from your Smoobu session "Help" as this comments section doesn't alert us of your question.
Best to always submit a ticket! This way we can get back to you ASAP :)
Best wishes from Berlin,
Erika form Smoobu
Please sign in to leave a comment.