Global styles

What is Global styles?

Global styles is a system of reusable design variables and presets. Instead of styling each element individually, you set your brand's colors, font sizes, and button styles in one place — then apply them across your store with a single click.

Any change you make to Global styles is automatically applied everywhere that style is used, keeping your store visually consistent without manual rework.

What's inside

The Global styles panel has three tabs:

Variables

Reusable values — colors, font sizes, borders, spacing, and custom variables.

Text

Predefined text styles — Mega title, headings, body text, captions, and more.

Buttons

Predefined button styles — Primary, Outline, White, and Link.

How to open Global styles

Open any page in FoxStudio.

Click the paintbrush icon () in the left sidebar

The Global styles panel opens with Variables, Text, and Buttons tabs.

Variables

Variables are reusable values you define once and apply across your pages. The Variables tab has 5 categories, each with default presets you can edit or extend.

Category	What it controls
Color	Brand colors: Accent 1 & 2, Background 1 & 2, Body text, Heading text, Border, Light grey, Dark grey, Hot color, and more
Font size	Reusable size variables used across text elements
Border	Border width and radius presets for consistent edge styling
Space	Spacing variables for padding and gap — keeps layout rhythm consistent
Custom	Any additional variables your store needs beyond the defaults. Learn more

Custom variables

Custom variables let you define your own reusable values for design properties that don't fit the default categories.

To add a custom variable:

Create

In the Variables tab, expand Custom → click + → fill name and value > Save.

Name: How you'll reference the variable. Becomes a CSS variable automatically.
Value type:
- Number — a numeric value with a unit (px, %, em, etc.)
- String — any text value

Apply

In the Inspector panel's Design tab, click the variable icon next to any compatible field → search for your custom variable → select it.

How to apply a variable

In the Inspector panel's Design tab, click the variable icon next to any Color, Space, or Border field to select from your saved variables.

Text styles

Text styles are predefined typographic presets you can apply to any text element with one click.

Customize a text style

Click any style to open its settings panel. Each text style lets you configure:

Setting	What it controls
Style name	The label shown in the text styles list
Color	Text color — can be linked to a Color variable
Font family	Typeface for this style
Font size	Size in px — can be linked to a Font size variable
Line height	Vertical spacing between lines in px
Font weight	Thickness of the text (Regular, Medium, Bold, etc.)
Letter spacing	Horizontal spacing between characters in px
Text transform	AA (uppercase), Aa (capitalize), aa (lowercase)
Text decoration	Underline, strikethrough, or none

Click Update when done.

You can edit Foxify's default text styles but cannot delete them. You can add your own custom styles in addition to the defaults.

Apply a text style

In the page editor, select a text element → click Select style in the toolbar to choose a predefined text style.

Button styles

Foxify includes 4 default button presets:

Primary button : Your main CTA. Solid fill. Used for the most important action on a page.
Outline button: Transparent background with border. Used for secondary actions alongside a primary button.
White button: White fill. Good for use over dark or image backgrounds.
Link button: Text only, no border or fill. Used for low-emphasis actions.

Similar to Variables and Text, you can add and customize your new button styles for later use.

Customize a button style

Click on any button style to open its settings. Each button has two states — Normal and Hover — and you can configure: Color, Background color, Font family, Font size, Font weight, and more.

You can edit Foxify's default button styles but cannot delete them. You can add your own custom button styles in addition to the defaults.

Apply a button style

In the page editor, select a button element → click Select style in the toolbar to apply a preset.

Last updated 12 days ago

#What is Global styles?

#What's inside

#How to open Global styles

#Variables

#Custom variables

#How to apply a variable

#Text styles

#Customize a text style

#Apply a text style

#Button styles

#Customize a button style

#Apply a button style

ON THIS PAGE

What is Global styles?

What's inside

How to open Global styles

Variables

Custom variables

How to apply a variable

Text styles

Customize a text style

Apply a text style

Button styles

Customize a button style

Apply a button style