Comment on page
Global styles
Things you need to know about 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.
.gif?alt=media&token=455efaef-e112-4baa-9a32-8b188c370969)
This article shows you how to access this feature and how to use it.
Merchants can access the Global styles settings in two ways, which are:
- From the Foxify Dashboard, click on Global styles.
- In your Page editor, select any element > General settings tab > locate global styles settings of that selected element.
- Then, click Edit styles (for Typography and Buttons) or Update colors (for Color) to be directed to the Global styles tab.
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.
You can always change these colors, or make custom changes to any elements that you don't want to follow the Global styles colors.
To use these colors in the Page editor, first select the element you want to change color > go to the Styles settings tab.
Under the color section, click on the dropdown and you will see the list of Global styles colors here.
.gif?alt=media&token=fd263100-1628-4438-8f91-49c393c4a2e0)
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.
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.
To use these predefined button styles in the Page editor, select the button block you want to adjust > go to the General tab configuration.
Then, below Global style button settings, click Change.
There are 3 options for you to choose from: Change style, Remove style, or Edit styles.
.gif?alt=media&token=43a09c55-7fc3-4c0f-9c49-587914c7586c)
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.
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.
To use the predefined button styles in the Page editor, select the text element > visit the General settings tab.
Then, below Global style, click Change.
There are 3 options for you: Change style, Remove style, or Edit style.
.gif?alt=media&token=fd0db4a4-bfba-4f18-8e46-2a7026813b70)
You can edit Foxify default global styles but cannot delete them.
Last modified 6mo ago