How to use Global Styles to customize styles to use for all PageFly pages

About Global Styles Feature

Summary: PageFly Global Styles Feature is designed to help you use predefined styling for elements across your store. These predefined styles can be customized based on your store design and brand guidelines.

This feature allows you to build pages with speed and uniformity all across your online store. All values that have been set up in Global Styles will become Computed values on the Editor page.

You can check more details in the video tutorial below:

How To Access Global Styles Feature

From PageFly Dashboard

Step 1: Inside the PageFly app, select “Extra functions” on the bottom left of the navigation bar.
Step 2: In “Extra functions”, click on “Global Styles”.

From PageFly Editor

Step 1: Click on an element that Global Styles supports (Heading, body text, button, image, icon, and divider) then go to Styling tab

Step 2: Click on “Edit Global Styles” under Global Style parameter

How To Configure For Global Styles

In Global Styles setting, we have two main parts:

Properties: Color scheme and Typography.
Elements: Containers, Heading, Body text, Icon, Media, Button, Divider, and Fields.

You can change the name of these element’s styling. This name will show in the dropdown menu when choosing the styling of Global Styles on the editor page.

Properties

| Color Scheme | A color scheme is a collection of harmonizing colors for your section's text, background, buttons, borders, and more. Apply these color schemes to various sections of your store to achieve a cohesive and visually appealing look. In Global Styles Color Scheme Setting, you can customize 6 predefined scheme colors for elements.

Color Scheme

A color scheme is a collection of harmonizing colors for your section's text, background, buttons, borders, and more. Apply these color schemes to various sections of your store to achieve a cohesive and visually appealing look. In Global Styles Color Scheme Setting, you can customize 6 predefined scheme colors for elements.

To customize the color, please select each type and select the color you want for each element on the right-hand side. You can settings for: Background - Background gradient - Text - Button background - Button background gradient - Button text - Border - Shadow - 3 user-define colors:

After all configurations are done, select "Publish"

Typography

In the Global Styles > Typography Settings, you can customize 6 predefined fonts and styling (except for color), then use these predefined settings when building your pages later. To customize the font family, please select each type, go to the Styling tab, and select the font family and other styling settings you need.

You can select the font family from Shopify theme font, Google Fonts, or Uploaded Fonts.

Note: Each theme has a different theme font setting so when you choose the Shopify theme font before switching the theme, it will automatically apply the Shopify theme font of the new theme.

After all configurations are done, select "Publish"

Elements

Containers

In the Global Style containers, there are 6 predefined styles. You can set the style for each container.

You can select each container to update the style for that on the right styling tab.

Note:

Containers only apply to the Flex Section in the Gen 2 Layout.
You can choose “Set as default” to make this style apply to all future containers.

After that, you can use it as the default container in the editor:

Heading

In the Global Styles section, there are 6 predefined styles available. For each of these 6 styles, you can customize the formatting settings for the 6 different heading levels: Heading 1 (H1) through Heading 6 (H6). This allows you to set the desired font, size, color, and other attributes individually for each heading level (H1, H2, H3, H4, H5, H6) within a given predefined style.

Global heading styles will apply to the following elements:

Heading
Blog post title
Collection title
Product title

To customize the styling for each heading level, follow these steps:

Step 1: Select one of the predefined styles.
Step 2: Choose the specific heading level (e.g., Heading 1, Heading 2, etc.) that you want to configure.
Step 3: Navigate to the Styling tab, where you can make the desired formatting changes for that particular heading level within the selected style.

Repeat this process for each heading level and style as needed to achieve your preferred visual configurations.

Note: You can check to Set as default to make this style apply to all future headings

You can check more information about the Styling tab here.

After all configurations are done, select “Publish”.

Body Text

Global body text styles will apply to the following elements:

Blog post content
Blog post excerpt
Blog post meta
Countdown number
Countdown label
Field inputs
List item
Paragraph
Product price
Product vendor

In the Global Styles Body Text Settings, you can customize 6 predefined styles and later use these styles when building your pages.

To customize the styling of each body text element, please select each type, go to the Styling tab, and make the configuration you want.

You can check more information about the Styling tab here.

Note: You can check to Set as default to make this style apply to all future body text

After all configurations are done, select “Publish”.

Button

In the Global Styles Button Settings, you can customize 6 predefined styles and later use these styles when building your pages.

To customize the styling of each button, please select each type, go to the Styling tab, and make the configuration you want.

You can check more information about the Styling tab here.

Note: You can check to Set as default to make this style apply to all future buttons

After all configurations are done, select “Publish”.

Media

Global media styles will apply to the following elements:

Blog post image
Collection image
HTML video
Image
Soundcloud
QR code
Vimeo video
YouTube video

In the Global Styles Image Settings, you can customize 6 predefined styles and later use these styles when building your pages.

To customize the styling of each image, please select each type, go to the Styling tab, and make the configuration you want.

You can check more information about the Styling tab here.

Note: You can check to Set as default to make this style apply to all future media

After all configurations are done, select “Publish”.

Icon

In the Global Styles Icon Settings, you can customize 6 predefined styles and later use these styles when building your pages.

To customize the styling of each icon, please select each type, go to the Styling tab, and make the configuration you want.

Note: You can check to Set as default to make this style apply to all future icons

Divider

In the Global Styles Divider Settings, you can customize 3 predefined styles and later use these styles when building your pages.

To customize the styling of each divider, please select each type, go to the Styling tab, and make the configuration you want.

You can check more information about the Styling tab here.

Note: You can check to Set as default to make this style apply to all future dividers

After all configurations are done, select “Publish”.

Fields

In the Global style fields, you will have 6 predefined styles and you can update the style for that.

Global field styles will apply to field inputs in the following elements:

Contact form field
Customer form field
MailChimp form field
Blog post comment
Search form field

Please note that the styles don’t apply field inputs of the following types:

Checkbox
Dropdown
Single choice

Like the other global styles element, you can select each field to update that style in the right styling tab.

Note: You can check to Set as default to make this style apply to all future fields

Common Cases

Use styling and font family set up in Typography in the Page editor

After finishing setting up styling in Typography, please follow these steps to use these fonts on your PageFly editor:

1. Apply the Typography style for Heading/Body Text/Button in Global Styles.

Go to Heading, Body Text, or Button, in the right settings tab, in the Typography style, choose one of the styles set up in the Typography part above.

2. Choose the style on the PageFly editor

In the PageFly editor, click on the text element you want to apply the Typography style to > go to the Styling tab > In the Global Style parameter, select the style you want.

Select a Color Scheme for a section

After finishing setting up colors for the scheme, go to the PageFly editor page. On the editor page, click on the section for which you want to select the scheme > Go to the Styling tab > Under Color Scheme, select the scheme you want to apply for this section.

Use Global Styles predefined settings for elements on the editor page

After finishing setting up styles for elements in Global Styles, go to the PageFly editor page. In the editor, click on the element you want to apply the styles to > go to the Styling tab, under Global Style, choose the style you want.

Use Preview Elements With Color Scheme

Every element has a "Preview color scheme" dropdown at the top right. This dropdown lets you see how the element looks in the different color schemes you created in the Color Schemes tab. Using this preview helps you adjust the element's style more easily across different color schemes.

Note: When you apply a Global Style to an element and then change one or more parameters that were originally set up in that Global Style, the styling you modified will override the Global Style settings for those specific parameters. However, any other parameters that you did not change will still inherit their styling from the applied Global Style. If you edit a parameter that was defined in the Global Style, a yellow dot will appear next to that parameter, indicating that you have changed it from the original Global Style configuration.

Version Updates

After version 4.18.0

New Containers element apply to Flex Section element
The New Fields element applies to Form Field in Contact Form and Customer Form except for Checkbox and Radio type.
Apply Background gradient color to the elements.
Remove Preset options for the element.
Shopify theme fonts are added in Global Styles.

After version 4.11.0

In version 4.11.0, the Properties element was changed from Color and Font Family systems to Color Scheme and Typography systems.

Before version 4.11.0

If you have used the Color and Font Family Global Styles before version 4.11.0 was released, the old Global Styles system will not be available for editing anymore. Elements using these colors or font families won't be affected, but we highly recommend you use our new Color Scheme and Typography system for a better global editing experience.

Frequently Asked Questions

1. Can I upload fonts and apply them for global styles?

Yes. But remember, the uploaded fonts can only be used in Global Styles. You can apply global styles to elements in the editor to use the custom font.

2. What elements can be used with Body text styles?

The following elements can be styled using the Body Text Styles: