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 your desired PageFly editors. There are two editors available:
- Legacy Editor: Editor that has row-column structure.
- Gen 2 Editor: Editor that doesn’t have row-column structure. It allows adding elements directly on PageFly pages and more flexible customized layout by Flex blocks.
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:
Preview: Click to preview how your page will look before publishing. View Live: See the final version of your page as it will appear to customers. This button is gray (inactive) if the page hasn’t been published yet. |
 |
| 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 |
You can consult this video for detailed instructions on the Copy and Paste Styles features on PageFly.
Element’s Parameters Search
This feature enables quick and efficient parameter searches within the Element Inspector. For example, type a keyword like “Color” to see where it appears across different settings, such as in background or border styling. This facilitates faster edits and reviews.
View Documentation Button
The View Documentation button connects directly to the PageFly Help Center, providing instant access to relevant articles and guides related to the element you are currently editing.
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.16.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
