How to use Global Styles to customize styles to use for all PageFly pages
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
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:
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”.
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
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.
| 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
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"
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
In version 4.11.0, the Properties element was changed from Color and Font Family systems to Color Scheme and Typography systems.
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.
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:
Blog post content
Blog post excerpt
Blog post meta
Contact form field
Countdown timer
Customer form field
List items
Paragraphs
Product price
Product variant option value
Product variant option name
3. Can I add a gradient color overlay using the Global Style feature?
No, you cannot set a background gradient color overlay in the Global Style Container and apply it across different background images.
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 check more information about the Styling tab .
You can check more information about the Styling tab .
You can check more information about the Styling tab .
You can check more information about the Styling tab .
You can check more information about the Styling tab .
