Global styles
Things you need to know about Foxify Global styles
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:
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.
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.
You can always change these colors, or make custom changes to any elements that you don't want to follow the Global styles colors.
Use a predefined color
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.
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 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.
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 > visit the General settings tab.
Then, below Global style, click Change.
There are 3 options for you: Change style, Remove style, or Edit style.
You can edit Foxify default global styles but cannot delete them.
Last updated
