Skip to main content
All Systems Operational
Deutsch Español

Branding Styles

Permanently deleted user
  • Updated

Context

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:

Picture1.png

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:

  • Colors
  • Typography
  • Buttons
  • Border and shadows
  • Assets
  • Others

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:

Picture2.png

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:

Picture3.png

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:

Picture4.png

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:

Picture7.png

Properties

Here's a breakdown of properties and their configurations on a Global level:

Colors

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.

Picture5.pngPicture6.png

Typography

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:

Picture8.png

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:

Picture9.png

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':

Picture10.png

Buttons

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.

Picture11.png

Assets

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:

Picture12.png

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:

Picture13.png

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:

  • GDPR
  • Privacy Policy
  • Terms of Service
  • Others

Picture14.png

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:

Picture15.png

Related articles

Comments

0 comments

Please sign in to leave a comment.