How to set up the global style of your shop

Hello and welcome to your GoodBarber back office. Today we'll cover a powerful tool for the design of your app: the global style menu. The global style allows you to manage the general design of your app from a single menu. Colors, fonts and effects selected in this menu are applied to each section of your app. But be careful, each modification made from this menu will be applied to all the sections of your app. In the menu Content and Design > Design > General design, click on Global Style.

First thing is to select a color theme. A color theme is a combination of colors that harmonize perfectly. The global style offers a library of color themes. To browse the library, click on edit. As you can see, I have lots of choices. If I prefer to change my actual theme, click on edit, scroll to the bottom of the page and click on create a color theme, then select your colors.

Now let's move on to the phones.  There's a hierarchy for displaying text in the app. 8 levels are used to display titles, subtitles, paragraphs and text. I define the font size, the font for each level. Depending on the font chosen, I can also choose the option. Now the buttons. For the sections of your app that invite users to perform action, I will select the shape of the button that I want to apply.

I can preview the result by clicking here. There are several levels of hierachy regarding the buttons on your app. The design of the button depend on the color theme of your app. In order to respect harmony, several variations are available for each theme. Here are the three different types of design for each level of hierarchy:
Level 1 => colored background of the button no outline
Level 2 => transparent background of the button outline and text in color
Level 3 => transparent background of the button no outline

Now the hover effects on images. This is only available on PWA. Finally the additional elements such as the back icon that appears in the header, while navigating your shop. I save the modification. Don't forget all these modifications will override the actual design of your shop including any unhooked sections.

Let's have a look yeah I really like the look of my shop.

See you for another tutorial!