# Global styles

{% embed url="<https://youtu.be/5x-42UZWFJ4>" %}

{% hint style="success" %}
From new update, Global styles section is moved to **Foxify dashboard > Settings**.

![](/files/xPR9H5vroQne24VdJ2Ny)
{% 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.&#x20;

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.&#x20;

**Foxify Global Styles** preset settings include **Colors**, **Typography**, and **Buttons**.&#x20;

<figure><img src="/files/tuGubXZkulDNsyvzkdlW" alt=""><figcaption></figcaption></figure>

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:&#x20;
  * From the **Foxify Dashboard** > navigate to the left menu > click **Global styles.**&#x20;
* Option 2:

1. In your **Page editor**, select any element > [General settings tab](/foxify-app/legacy-editor/page-editor/general-settings.md) > locate **global styles settings** of that selected element.&#x20;
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.&#x20;

There will be 10 default preset colors. You can edit (change color and rename) or add new colors to your list.

<figure><img src="/files/1Oi9zxjaKY3SpyPfSSI4" alt=""><figcaption></figcaption></figure>

{% 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.&#x20;

<figure><img src="/files/qPCWx0sMDEs2gpZB6dHm" alt=""><figcaption></figcaption></figure>

### Buttons

**Foxify Global styles** **buttons** provide merchants with 4 default preset buttons, namely:&#x20;

* Primary button
* Outline button
* White button
* Link button

<figure><img src="/files/k7c4IREwdf207DEQ21e0" alt=""><figcaption></figcaption></figure>

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.&#x20;

In the popup, each button settings include advanced settings for that button.&#x20;

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**.

<figure><img src="/files/NUEaohfGt8CibGkbXiIR" alt=""><figcaption></figcaption></figure>

#### Use a button style

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

<figure><img src="/files/3WeZjR45AMZdmMOtDTiD" alt=""><figcaption></figcaption></figure>

### Typography

**Foxify** provides a useful pre-made set of text styles that you can apply to your page with just one click.&#x20;

There are 11 default preset text styles, namely:&#x20;

* 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**.&#x20;

Then, you can see a settings pop up.&#x20;

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**.

<figure><img src="/files/Osvsro1diRD5LNv4AfA4" alt=""><figcaption></figcaption></figure>

#### Use a text style

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

<figure><img src="/files/v1EaKPo4WHaelCebEGNP" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/osE0TqmEK0BTYKBoIrie" alt=""><figcaption><p><a href="https://www.figma.com/community/plugin/1415136291103675876/figma-to-shopify-with-foxify-shopify-smart-visual-page-builder?utm_source=foxecom&#x26;utm_medium=help_center_foxify_global_styles&#x26;utm_campaign=anchor-text&#x26;utm_term=use_free_now">Use free now </a><span data-gb-custom-inline data-tag="emoji" data-code="26a1">⚡</span></p></figcaption></figure>

<figure><img src="/files/w4KcZVGhV8kMjivsnpdR" alt=""><figcaption><p><a href="https://chromewebstore.google.com/detail/foxtransfer-html-to-shopi/babcinhpofjfhjjbcnjhoikcjbgebimb?utm_source=foxecom&#x26;utm_medium=help_center_foxify_global_styles&#x26;utm_campaign=anchor-text&#x26;utm_term=install_foxtransfer_chrome_extension_free">Install FoxTransfer Chrome Extension FREE</a></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/page-management/global-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.