About PageFly Editor
Summary:
The PageFly Editor is where you can directly build your Shopify page using a powerful drag-and-drop tool, allowing you to arrange and adjust elements and layouts without any coding skills. This article aims to help you understand the PageFly Editors so you can work with it effectively. We’ll walk you through its features and functions, allowing you to build visually appealing and highly functional pages without needing any coding skills.
How To Access PageFly Editor?
Follow these steps:
- From your Shopify admin dashboard, navigate to the PageFly Page Builder app.
- Click on “Create blank page” or select an existing page/section.
- Select the PageFly editor. There is one editor available now. It’s legacy editor.
- Legacy Editor: Editor that has row-column structure.
- Gen 2 Editor (upcoming): Editor that doesn’t have row-column structure. It allows adding elements directly on PageFly pages and more flexible customized layout by Flex blocks.
- Gen 2 Editor Beta is now closed. Pages and sections created with Gen 2 Editor will remain fully functional. Enhanced version will be coming soon.
- Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).
Legacy Editor – How To Configure PageFly Editor
Header Functions
On the header, there are several options you can adjust:
Discard/Save: These buttons appear when you are working on a new page or have unsaved changes:
Once you save successfully and have no further edits, these buttons will be replaced by the “Publish” button. |
  |
| Publish: Click this button to make your saved changes live on your store. |  |
| Switch Devices View Mode: Easily switch between different device views (All devices, Laptop, Tablet, Mobile) to see how your page will look on various screens.
|
 |
| Configure Canvas Size: Customize the canvas size to preview how your layout looks on different screen sizes of devices.
The minimum and maximum values you can customize vary depending on the device view mode you choose:
|
 |
Page Editor Settings: There are 3 options:
Turn on Theme Styling on the PageFly editor will help you ensure that your editor on PageFly will not conflict with your theme. In some cases, if you see a blank screen after turning Theme Styling on, please turn it off. The reason might be a conflict with the theme based on some other element that you’ve installed on your page. To avoid theme conflict, kindly check this video tutorial:
|
 |
| Redo & Undo: Redo and undo your actions when editing. |  |
Preview & View Live:
|
 |
| Editor Count Icon: This icon displays when the same page is open in multiple tabs or by multiple users, helping to prevent overriding issues. |  |
Breadcrumb
Breadcrumbs is the visual guide of your elements’ position in the page structure. It helps you to better understand where your element is located.
The typical structure of an element will look like this: Section > Row > Column > Element. Some other sections can be more complicated.
This is also guidance for Google to understand your blogs and web pages better.
How to Use Page Breadcrumbs
Let’s see how it works. In our example, a Section contains many rows, columns, and elements. You can click on the item in the breadcrumb to select any element that’s nested in that specific trail.
When you mouse over the element in the Editor, the page breadcrumb will change the text color based on the element.
Canvas
When you create a new page and don’t choose any pre-made template, the canvas appears blank and tells you to drag & drop elements from the panel.
Vertical Toolbar
The Vertical toolbar is located in the left sidebar in the PageFly editor. It’s where you can find all the different PageFly elements. Therefore, it is much better if you have a better knowledge of these kinds of elements. From top to bottom respectively, here are all options:
- Page content
- Elements
- Third-party elements
- Page templates
- Page assignment
- Page settings
- Version history
- Add custom code
- Open live chat
| Page Content: You can check the page content outlines and also Move/Delete/Duplicate elements here.
|
 |
| Elements:
There will be two elements tab: PageFly and Shopify:
In this tab, you can find Containers, Basic elements, Media elements, Social elements, and Advanced elements such as the Countdown Timer, Mailchimp Form, Google Map, Progress, and Table. Those are standard to any web page.
In this list, you will find elements that require data from Shopify, for example, the Product List, Product Details, Collection list, Customer Form, and Blog. |
|
| Third-party Elements: In this list, you can find all the elements from other apps that have been integrated with PageFly. |  |
| Page Templates: Browse and use pre-designed templates to start building your pages quickly. |  |
| Page Assignment: Only shown if you are building a product page. This feature allows you to assign products to your page. |  |
| Page Settings: Configure page settings including page title, page type, page’s URL, theme’s sections and check theme template name. |  |
| Version History: View and revert to previous versions of your page. For more details, you can check this guide. |  |
| Custom Code Editor: Add custom code for advanced customizations. For more details, you can check this article. |  |
| Open Live Chat: Connect to our 24/7 Live chat support instantly. |  |
Inspector Toolbar
Whenever you select any element in the editor, the inspector toolbar will appear right away. You will notice a toolbar sticking to that element as a panel. The color and functions of the panel will change with different container elements.
Elements
 |
1. Move (or Drag and Drop): Select to choose and move the element.
2. Duplicate: Select to make a copy of the element. 3. Delete: Select to delete the element. 4. Copy Styles: Select to copy the style of the element. 5. Paste Styles: Select to paste the copied style to the element. 6. Collapse: Collapse the toolbar |
With Section and Column elements, there will be other specific functions for each element.
Section
 |
1. Move (or Drag and Drop): Select to choose and move the element.
2. Duplicate: Select to make a copy of the element. 3. Delete: Select to delete the element. 4. Copy Styles: Select to copy the style of the element. 5. Paste Styles: Select to paste the copied style to the element. 6. Save section: Save a section and re-use it on other pages. 7. Collapse: Collapse the toolbar |
Column
|
|
1. Move (or Drag and Drop): Select to choose and move the element. 2. Duplicate: Select to make a copy of the element. 3. Delete: Select to delete the element. 4. Add column to the right: Add one column to the right 5. Add column to the left: Add one column to the left 6. Copy Styles: Select to copy the style of the element. 7. Paste Styles: Select to paste the copied style to the element. 8. Collapse: Collapse the toolbar |
Note for the Copy and Paste Styles features: They allow you to quickly copy and apply styles, saving time and effort when you need consistent styling. However, this feature only works with the same element type. For example, you can copy the style of a button to another button, but not to a different element type.
You can consult this video for detailed instructions on the Copy and Paste Styles features on PageFly.
Gen 2 Editor – How To Configure PageFly Editor
To kick things off, check out this video tutorial for a visual walk-through of the Gen 2 Page Editor Canvas. It provides an overview of all key features, from layout adjustments to page settings, to help you get started smoothly.
Header Functions
On the header, there are several options you can adjust:
Discard/Save: These buttons appear when you are working on a new page or have unsaved changes:
Once you save successfully and have no further edits, these buttons will be replaced by the “Publish” button. |
  |
| Publish: Click this button to make your saved changes live on your store. |  |
| Switch Devices View Mode: Easily switch between different device views (All devices, Laptop, Tablet, Mobile) to see how your page will look on various screens.
|
 |
| Configure Canvas Size: Customize the canvas size to preview how your layout looks on different screen sizes of devices.
The minimum and maximum values you can customize vary depending on the device view mode you choose:
|
 |
Page Editor Settings: There are 3 options:
Turn on Theme Styling on the PageFly editor will help you ensure that your editor on PageFly will not conflict with your theme. In some cases, if you see a blank screen after turning Theme Styling on, please turn it off. The reason might be a conflict with the theme based on some other element that you’ve installed on your page. To avoid theme conflict, kindly check this video tutorial:
|
  |
| Redo & Undo: Redo and undo your actions when editing. |  |
Preview & View Live:
|
 |
| Editor Count Icon: This icon displays when the same page is open in multiple tabs or by multiple users, helping to prevent overriding issues. |  |
Breadcrumb
Breadcrumbs is the visual guide of your elements’ position in the page structure. It helps you to better understand where your element is located.
The typical structure of an element nested in flex section will look like this: Flex Section > Element 1> Element 2 > Element 3 or Flex Section > Flex Block > Element. This is also guidance for Google to understand your blogs and web pages better.
How to Use Page Breadcrumbs
Let’s see how it works. In our example, a Flex section contains many elements or many Flex blocks. You can click on the item in the breadcrumb to select any element that’s nested in that specific trail.
When you mouse over the breadcrumb, the editor will change its color accordingly. Blue color is displayed for flex section while black color is displayed for elements nested inside that flex section.
Canvas
When you create a new page and don’t choose any pre-made template, the canvas appears blank and tells you to drag & drop elements from the panel.
Vertical Toolbar
The Vertical toolbar is located in the left sidebar in the PageFly editor. It’s where you can find all the different PageFly elements. Therefore, it is much better if you have a better knowledge of these kinds of elements. From top to bottom respectively, here are all options:
- Page content
- Elements
- Third-party elements
- Page templates
- Page assignment
- Page settings
- Version history
- Add custom code
- Open live chat
| Page Content: You can check the page content outlines and also Move/Delete/Duplicate elements here.
|
 |
| Elements:
There will be two elements tab: PageFly and Shopify:
In this tab, you can find Containers, Basic elements, Media elements, Social elements, and Advanced elements such as the Countdown Timer, Mailchimp Form, Google Map, Progress, and Table. Those are standard to any web page.
In this list, you will find elements that require data from Shopify, for example, the Product List, Product Details, Collection list, Customer Form, and Blog. |
|
| Third-party Elements: In this list, you can find all the elements from other apps that have been integrated with PageFly. |  |
| Page Templates: Browse and use pre-designed templates to start building your pages quickly. |  |
| Page Assignment: Only shown if you are building a product page. This feature allows you to assign products to your page. |  |
| Page Settings: Configure page settings including page title, page type, page’s URL, theme’s sections and check theme template name. |  |
| Version History: View and revert to previous versions of your page. For more details, you can check this guide. |  |
| Custom Code Editor: Add custom code for advanced customizations. For more details, you can check this article. |  |
| Open Live Chat: Connect to our 24/7 Live chat support instantly. |   |
Inspector Toolbar
Whenever you select any section or element in the editor, the inspector toolbar will appear right away. You will notice a toolbar sticking to that element as a panel. The color and functions of the panel will change with different container elements.
Flex section
 |
1. Move (or Drag and Drop): Select to choose and move the element.
2. Duplicate: Select to make a copy of the element. 3. Delete: Select to delete the element. 4. Copy Styles: Select to copy the style of the element. 5. Paste Styles: Select to paste the copied style to the element. 6. Save section: Save a section and re-use it on other pages. 7. Collapse: Collapse the toolbar |
Flex block & Element
 |
1. Move (or Drag and Drop): Select to choose and move the element.
2. Duplicate: Select to make a copy of the element. 3. Delete: Select to delete the element. 4. Copy Styles: Select to copy the style of the element. 5. Paste Styles: Select to paste the copied style to the element. 6. Collapse: Collapse the toolbar |
Note for the Copy and Paste Styles features: They allow you to quickly copy and apply styles, saving time and effort when you need consistent styling. However, this feature only works with the same element type. For example, you can copy the style of a button to another button, but not to a different element type.
You can consult this video for detailed instructions on the Copy and Paste Styles features on PageFly.
Use Cases
- Customizing Store Pages: Personalize layouts and add custom elements to your homepage, product pages, and collection pages to align with your brand’s aesthetics.
- Creating Landing Pages for Marketing Campaigns: Design visually appealing and high-converting pages for marketing campaigns, product launches, or special promotions to capture leads and drive sales.
- Building Informative Blog Pages: Create and format engaging blog posts with images, videos, and other media to improve user engagement and SEO.
- Designing Customer Testimonial Pages: Showcase customer testimonials and reviews in a well-organized and attractive manner to build trust and credibility with potential customers.
Frequently Asked Questions
1. Can I use PageFly Editor to customize existing Shopify pages?
Yes, you can, if the page was created using PageFly. Simply go to the page editor for that specific page.
You can also open the PageFly Editor of an existing page using the “Edit with PageFly button”. However, please note:
- If the page was created by PageFly, clicking the button will take you directly to the page editor.
- If the page was not created by PageFly, clicking the button will open the “Build a new page with PageFly” modal, meaning you will need to build the page from scratch.
2. What is the difference between section and flex section (Gen 2)?
Sections allow users to design page layout in row-column container structure and can be added both in PageFly Sections and PageFly pages. Flex sections, on the other hand, don’t have row-column structure. It allows adding elements directly on PageFly pages and more flexible customized layout by Flex blocks.
3. How can I ensure my PageFly pages are mobile-friendly?
PageFly Editor includes a device view mode that lets you preview and customize your pages for different screen sizes, including laptops, tablets, and mobile devices. This ensures your pages are fully responsive and look great on all devices.
Version Update
In addition to the traditional page building mechanism (row, column), PageFly 4.116.0 adds Gen 2 Editor, a more flexible and efficient technology that allows creation of complex and highly customizable layouts, which comes with an intuitive and user-friendly interface.
Previous article
