How to work with PageFly editor?
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
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.
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.
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
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:
- Discard: Clears all unsaved changes, allowing you to start over or abandon the current edits.
- Save: Saves all changes made to the page. 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:
- All devices: 1200px and larger
- Laptop: 1025px - 1199px
- Tablet: 768px - 1024px
- Mobile: 767px and smaller
Page Editor Settings: There are 3 options:
- Enable theme styling: matching the current PageFly page with your Shopify theme style. 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: https://youtu.be/ESEMMkd3c8Y
- View page structure: Show the structure, such as: Section, Row, Column,...
- Show canvas size: A bar displayed below the Breadcrumb indicates the size of each device (mobile, tablet, laptop, desktop).
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.
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.
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.
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:
- PageFly 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.
- Shopify 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.
Open Live Chat: Connect to our 24/7 Live chat support instantly.
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
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.
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.
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.
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.
In addition to the traditional page building mechanism (row, column), PageFly 4.23.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.
Version History: View and revert to previous versions of your page. For more details, you can check .
Custom Code Editor: Add custom code for advanced customizations. For more details, you can check .
You can consult for detailed instructions on the Copy and Paste Styles features on PageFly.
