Global styles
Things you need to know about Foxify Global styles
Last updated
Was this helpful?
Things you need to know about Foxify Global styles
Last updated
Was this helpful?
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.
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:
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.
In the Color section, click the 4-dot icon and you will see the list of Global styles colors here.
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 element and click Select style.
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 and click Select style.
In your Page editor, select any element > > locate global styles settings of that selected element.
