Branding Styles is a feature in Customization Center that enables the management of certain Brand properties related to the different Channels the Brand uses within MENU Ecosystem.
How does it work?
Once the feature is enabled, you will see a subsection shown on the left-hand side menu of the CC related to each one of the Channels. This subsection is called Customizations. There will also be a new element there, Global:
The Global subsection aims to show all properties that are related to more than one Channel. This way you will be able to setup your changes centrally, and then populate them across Channels.
Once you access the Customizations subsection for any of the Channels, you will see that you are able to make changes to different properties on the left side of the screen and you will have a preview of them on the right. This way you can get a good idea of how it will look if you decide to confirm these changes.
Branding Styles overview - Global level
Here's the list of properties you can manage from Global:
- Border and shadows
Please note: any time you make a change on any of these properties you will be required to click Save in order not to lose it and then Publish to make them go live:
Global level of Branding Styles
This level includes all the properties that are related to more than one Channel. Like mentioned, working this way, you will be able to make the change once and see it reflected on every Channel that has the same property.
Please note: it's important to check the icons shown on the right side of each property in this section. They show the different Channels it affects. If the icon isn't crossed out, it means that it is properly connected to the Channel and the value introduced in that particular field will affect that specific Channel:
On the other hand, if the icon is crossed, it means that its actually disconnected and the value in that specific Channel is customized individually:
If you want to change that, so that you may apply changes on Global and affect that certain Channel, you will have to access that specific Channel, search for the right property and click the button that shows an arrow and the logo related to the Global level.
Once clicked and saved, this property will be connected to the setup on the Global level.
All properties are also grouped by categories which have a short explanation of what they are for. The properties that may require more detailed explanation have an icon on the right side (i). Once you hover over them, an extra information will be displayed.
You may also find a green checkmark icon here. This lets you know that the property is connected the Global setup. If you choose to have a custom value for this property for a specific Channel, you will see an icon with an arrow, signifying the option to connect it to the Global level. Once you click on it, it will connect this property to the Global setup level:
Here's a breakdown of properties and their configurations on a Global level:
For each color property you will see the color and the code for it. You are able to enter the code if you want or click the color itself and you will get a color palette which will make it easier to select the color you are looking for.
This section is divided in three: to add fonts for heading, title, and body.
To select the font, you have a dropdown that enables you to add a specific font or to select one of the default fonts shown:
The letter case dropdown will show the options for that specific category.
The eye icon on the right side of the category name will open an image that shows you an example of what will be affected if you proceed with the change:
You will see certain dialog boxes that will display important information and guidance, such as: 'The body font weights should be from the same font family':
In this section you will be able to select the font that should be used for your buttons. You will also be able to customize the color and text that the primary and secondary buttons have as well.
Border and shadows
Here, you will be able to manage the border radius that the cards and dialogs have by adding the pixels to it. You will see how it would look like on the preview on the right side of the screen.
Please note: shadows of the different elements of the Web App and Kiosk can be managed too, however we recommend not to change them unless it's truly necessary.
Here you will be able to add Food Type icons by using the dropdown shown. You can choose between adding an OTF file or using the default one we offer:
Because this particular property is quite specific, you will fine a link on the top of the page, taking you to a Knowledge Base article that explains in detail what needs to be doneto prepare your Asset file before uploading it to the board:
Others - Legal pages
You will be able to add certain links that should be shown in the Channels. You have four categories to select from:
- Terms of Service
For the first three you can only add one link to the category. For Other you have up to three links you can add with it. Like with the other properties on the Global customization level, you will see the icon of the Channel they are connected too: