# Global styles {% embed url="" %} {% hint style="success" %} From new update, Global styles section is moved to **Foxify dashboard > Settings**. ![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FYokgd0Px5PW6MvNfiaK0%2Fimage.png?alt=media\&token=6fb172fc-3c61-4b58-ae74-e666790d0519) {% endhint %} ## What is Foxify Global styles? **Design consistency** all across the online store is an important factor to give your store a professional look and to fortify the brand's identity. With that in mind, **Foxify Global styles**, a powerful and time-saving feature, is created to help you use predefined styles for any elements of the store. **Foxify Global Styles** preset settings include **Colors**, **Typography**, and **Buttons**.

This article shows you how to access this feature and how to use it. ## How to access the Global Styles Merchants can access the **Global styles** settings with 2 options, which are: * Option 1: * From the **Foxify Dashboard** > navigate to the left menu > click **Global styles.** * Option 2: 1. In your **Page editor**, select any element > [General settings tab](https://docs.foxecom.com/foxify-app/legacy-editor/page-editor/general-settings) > locate **global styles settings** of that selected element. 2. Then, click **Edit styles** (for Typography and Buttons) or **Update colors** (for Color) to be directed to the Global styles tab. ## How to customize the Global styles ### Colors Predefine your colors list (branding colors) by choosing from the color palette or adding color hex codes. There will be 10 default preset colors. You can edit (change color and rename) or add new colors to your list.

{% hint style="info" %} You can always change these colors, or make custom changes to any elements that you don't want to follow the Global styles colors. {% endhint %} #### Use a predefined color In the Color section, click the 4-dot icon and you will see the list of **Global styles** colors here.

### Buttons **Foxify Global styles** **buttons** provide merchants with 4 default preset buttons, namely: * Primary button * Outline button * White button * Link button

Similar to **Colors**, you can add and customize your new button styles for later use. #### Customize a button style To customize a button style, hover over the style you want to adjust > click **Edit**. Then, you can see a settings popup for that button. In the popup, each button settings include advanced settings for that button. You can also change the colors of the button elements (text color and background color) in the Normal state and Hover state respectively. When you're done, hit **Save**.

#### Use a button style To use these predefined button styles in the Page editor, select the button element and click **Select style**.

### Typography **Foxify** provides a useful pre-made set of text styles that you can apply to your page with just one click. There are 11 default preset text styles, namely: * Mega title * Heading 1-6 * Subheading * Caption * Body text * Text link * Cart title Similar to **Colors** and **Buttons**, you can add and customize your new text styles for later use. #### Customize a text style To customize a text style, hover over the style you want to adjust > click **Edit**. Then, you can see a settings pop up. In the pop-up, each text style setting includes various options for you: * Color * Font family * Font size * Line height * Font weight * Text transform * Text decoration * Letter spacing When you're done, hit **Save**.

#### Use a text style To use the predefined button styles in the Page editor, select the text element and click **Select style**.

{% hint style="info" %} You can edit Foxify default global styles but cannot delete them. {% endhint %}