Where do I find it?
Go to Sales channels > Webshop > Edit Webshop > Advanced > Layout and Color.
What does it mean?
The Layout and Color settings control how your webshop looks to customers. You can use them to adjust colours, font styles, button colours, borders and calendar behaviour.
These settings are especially useful if you embed the Webshop on your own website, because they help the Webshop match your brand and create a consistent customer experience.
Before changing colours, we recommend checking your brand guidelines and choosing colours with enough contrast so that text and buttons remain easy to read.
What should I do?
Layout and Color
In the Layout and Color section, update the attributes you want to customise. The item numbers in the table match the numbered visual reference in the screenshots below.
| #Item | Attribute | Description |
|---|---|---|
1 | Main background page | Sets the background colour of the full page around your webshop. |
2 | Main background shop | Sets the main background colour inside the webshop, including the offer area. |
3 | Select and cart colour | Sets the colour used for the selected date, the Add to cart button and the cart item counter. |
4 | Calendar and action colour | Sets the colour for available, non-selected calendar dates and action buttons. |
5 | Hover action colour | Sets the colour shown when a customer hovers over calendar dates or key action buttons, such as Order with obligation to pay. |
6 | Primary font colour | Sets the colour of the main text in the webshop. |
7 | Secondary font colour | Sets the text colour used on secondary elements, including some calendar dates, departure times, navigation buttons and the Order with obligation to pay button text. |
8 | Tertiary font colour | Sets the text colour for links and call-to-action elements, such as Book, More details, Add to cart, My order, Your cart, Checkout and Change. |
9 | Disabled button colour | Sets the background colour of disabled buttons, for example the Next button before a customer selects a departure date. |
10 | Font size main title | Sets the size of the main title in the widget. The maximum value is 50. |
11 | Border radius main (px) | Controls how rounded the widget corners are. Use a low value, such as 1, for sharper corners, or a higher value, such as 80, for more rounded corners. |
12 | Disable menu mobile view | Hides the navigation menu in the top-right corner on mobile devices. |
13 | Calendar with tiles | Displays the selected calendar date inside an oval tile instead of a square. |
Good to know
Changes to layout and colour settings affect the customer-facing webshop. After saving your changes, open the webshop as a customer and check the full booking journey, including offer selection, calendar dates, cart, checkout and mobile view.
For the best customer experience, use colours that are consistent with your brand and keep enough contrast between text, buttons and backgrounds. This makes the webshop easier to read and helps customers identify the next action.
FAQs
Do these settings change the content of my offers? ▼
No. These settings only change the appearance of the webshop, such as colours, fonts, buttons and calendar styling. They do not change offer names, prices, availability or checkout rules.