In this article, you will learn how to create a simple page with the key features and tools.
Step 1: Install PageFly page builder
If you already installed the app, skip this step and move to the next one.
Visit PageFly page on Shopify App Store, click the Add app button and fill in your store’s URL to install the app to your Shopify store.
Step 2: Create a new page
In the Shopify admin sidebar, click Apps > PageFly – Advanced Page Builder. After that, you will be redirected to the PageFly Dashboard.
Click Create a new page to create a new regular page.
To explore other page types, choose the “+” sign. You can read more about other page types that can be created with PageFly here. You can always change your page type later.
Important: Some page types are only available in paid plans.
Step 3: Get to know the key features
After creating a new page, you will be redirected to the Page Editor.
The Template Library window will pop up, which lets you choose a template to quickly start with.
Here are some features in the Page Editor to help you understand how PageFly works:
|1 Top bar||Set up general information of your page, including page title, website SEO and device type. Select Pick a template to access the template library.|
|2 Add element||Offers PageFly basic elements and sections. Drag and drop them to the blank page.|
|3 Add Shopify element||Offers Shopify elements and sections.|
|4 Add saved section||Stores saved section that you can re-use in another part of the page or a different page.|
|5 Show page outline||Displays the page outline inside the Editor.|
|6 Set pre-defined style||Creates a generic style for boxes, buttons and texts.|
|Version history||Shows auto-saved and published versions. The feature will be activated once you publish the page.|
Step 4: Use PageFly elements
First, click Add Element > Element or Section to get started with a layout for your design.
Select the element and you can edit it with 2 tools:
- Element toolbar: Quickly take action on the element, including: move; duplicate; delete; lock; pick a pre-defined style; save style; copy style; paste style; and save section to the library.
- Element inspector: Edit the settings and stylings of the element with 3 tabs: General, Styling and Advanced.
Learn more about PageFly page structure.
Step 5: Preview or publish the page
Once you’re done building the page, hit Save. This option saves the page to a database but does not make it public yet. You can see the page preview via View > Preview.
The Save & Publish button both saves the page and makes it public. You can see the live page via View > Live Page. The page will links to your store with the address “your-shop-name.myshopify.com/pages/page-name”.
You can check the PageFly page in Shopify database by going to Shopify admin > Sales Channels > Online Store > Pages.