PageFly Beginner’s Guide: Building Shopify Store Quickly

The current recommended solution for customizing the visual design and layout of a Shopify e-commerce website in a user-friendly manner is to use the Shopify app: PageFly website editor. This article includes tutorials and videos on using PageFly and will be regularly updated. You can bookmark it for future reference, review it as your notes, and revisit it at any time. If you have any related questions, please feel free to contact me. (Last updated: February 3, 2023)

What’s PageFly?

PageFly is a Shopify app that specializes in creating highly customized visual designs and layouts for Shopify e-commerce websites. Its full name is “PageFly Landing Page Builder,” and its official website homepage states, “Make your Shopify website work and look just like your idea without coding.

Shopify is to Shopify App what WordPress is to WordPress Plugin. And within Shopify App, PageFly is similar to web page builders like Elementor or WPBakery Page Builder in WordPress plugins.

---

Why choose PageFly web page editor?

Anyone who has used Shopify to build an e-commerce website is likely aware that Shopify’s built-in page and article editor offers limited functionality. It provides a basic editing window that lacks extensive options for customization and layout. If you want more flexibility, you would need to write HTML/CSS code, which may not be feasible for individuals without web development skills or teams without dedicated developers. To address this challenge and facilitate smoother handover to team members, it is advisable to leverage Shopify apps that offer web page editing capabilities. By utilizing these apps as a foundation, you can create web pages with greater ease and reduce reliance on code editing. Having worked extensively with WordPress to build highly customized websites, I’ve observed that Shopify’s page editing capabilities are relatively limited. While Shopify does provide various templates for customizing themes to a certain extent, they are still constrained by the functionality available within the chosen template. For more information on this topic, you can refer to the article “Five Ways to Customize Shopify Web Design and Layout“.

因此若要突破這個限制，就得靠另外安裝強大的、開放式生態系的 Shopify App Store，搜尋「page builder」就可以找到相當多款的網頁編輯器，其中這款是我個人目前偏愛使用、且應該是全球目前使用人數最多、將近五星評價的：PageFly Landing Page Builder，原因是：

To overcome these limitations, you need to leverage the powerful and open ecosystem of the Shopify App Store. By searching for “page builder,” you will find numerous options for web page editors. Among them, the one I personally prefer and is widely acclaimed with nearly five-star ratings worldwide is the PageFly Landing Page Builder. Here are the reasons for my preference:

• 24/7 Online Customer Support: PageFly offers round-the-clock customer service with quick response times. They also provide technical support when needed.
• Intuitive Visual Editing Interface: PageFly has an intuitive interface that makes it easy for users to navigate and customize their web pages. It is designed to be user-friendly and requires no coding knowledge.
• Advanced Customization with Code: For users with coding skills, PageFly allows you to write custom code such as HTML, CSS, and JavaScript, providing flexibility for web developers.
• Extensive App Integration: PageFly integrates seamlessly with a wide range of other apps, and they even take feature requests through their wish list form, allowing users to contribute to the development of the platform.
• Comprehensive Online Learning Resources: PageFly offers a wealth of learning materials, including video tutorials on their PageFly Video Tutorials channel and a helpful knowledge base on their PageFly Help Center.
• Active Community Support: PageFly has an active online community, including their official Meta Facebook group called PageFly Community. Additionally, you can join the thriving Shopify Line community in Taiwan.
• Frequent Updates and Bug Fixes: PageFly regularly introduces new features and addresses issues. They provide transparent information about each update, ensuring ongoing maintenance and optimization of the platform.
• Quick Start with Page Templates: If you’re in a hurry to create a landing page or sales page, PageFly offers ready-to-use page templates that can be easily customized to suit your needs.

Want to start a Shopify online store? Before you begin, you can register for the current promotional offer: Get your Shopify account for just $1 per month for the first three months. If you’re already using Shopify, you can come back here and install the Shopify App: PageFly Landing Page Builder, and start with the free plan to get started! Follow along with this article as you read to enhance your learning experience. Don’t worry if you’re not familiar with it yet; at least you’ll have a preliminary understanding, and it will be easy to get into the flow when you review it in the future.

Start a free trial and enjoy 3 months of Shopify for $1/month on select plans. Register Today!
This is an ongoing promotion by Shopify, and it’s uncertain when it will end. Take a look around the backend after registering and feel free to message me if you have any questions.

---

Quick Overview of the PageFly Interface

I will directly explain the usage interface of PageFly through a video. The content will include a combination of visuals and text, highlighting the key points and demonstrating the essential features and building methods commonly used when creating a web page, all at the fastest pace possible.

The video can be watched with subtitles enabled.

The first screen you’ll encounter when entering PageFly is the Dashboard, also known as the Information Panel. It provides a comprehensive overview of all available online support, software updates, and more.

The Pages section in the left sidebar is where you’ll frequently navigate to when creating webpages. It encompasses various Shopify page types, including Regular Pages, Home Pages, Product Pages, Collection Pages, Blog Post Pages, and Password Pages. These page types correspond to different sections and functionalities of your website.

• Dashboard
• Pages
  • Regular Pages
  • Home Pages
  • Product Pages
  • Collection Pages
  • Blog Post Page
  • Password Pages
• Page List Functionality
  • Duplicate
  • Publish
  • Export
  • Import
  • Delete
• Trash

After selecting a page type, you can choose to create a new page either by creating a blank page or by using a template. Once the page is created, you will find additional actions on the right side of the page list under “More Actions.” These actions include copy, publish, export, import, and delete. These actions are commonly used in scenarios where you want to copy an existing page and modify it if the layouts of two pages are similar, as it can speed up the execution process. Additionally, you can export these pages (excluding images) and import them into another Shopify store. This feature is useful when you have similar content in different websites with different languages, allowing for convenient use.

Deleted pages are moved to the Trash, so if you accidentally delete a page, there’s no need to worry. You can easily restore it from the Trash.

After entering the page editing area, start by editing the page title and save it. Then, go to “More Settings” > “Page Settings” > “Page URL” to name the page URL handle. Once the initial setup is complete, it’s time to start building the page content! Exciting! During the content editing process, you can undo changes at any time. It’s a good habit to save frequently to prevent any unexpected issues like internet disruptions or page crashes. PageFly also offers a convenient feature called “Enable Auto Save”. When you reach a significant point in your page creation, save your progress and preview how the actual page will look and feel. Once you’re satisfied, click “Publish” to finalize and complete the process!

• Page Editing Area
  • Edit page title
  • Device View Mode
  • Editor
    • Enable Theme Styling
    • View Page Structure
    • Enable Auto Save
  • Undo
  • Save & Publish
  • Preview
  • View Live Page
  • Show page outline
  • More Actions
    • Page Template
    • Page Settings
    • Visit Theme Editor

---

Commonly Used Elements in PageFly Page Creation

The content of a web page typically consists of three main elements: images, text, and videos. Designers use these elements to create the visual design and layout of the page. Unlike static print design, web design offers more opportunities for interactive and dynamic elements. By incorporating interactive design and dynamic elements, you can enhance the user experience (UX), capture visitors’ attention, increase their engagement, and ultimately improve conversion rates.

As a professional web designer, it’s important to understand how to create a website that aligns with business goals, has a high conversion rate, reflects the brand identity, and grabs users’ attention. By skillfully applying these five key elements in web design: images, text, videos, interactivity, and dynamics, you can create compelling and effective websites.

Here are some commonly used elements in PageFly for creating web pages. By combining these elements, you can create a complete webpage:

• Layout
• Heading
• Paragraph
• Image
• List
• Slideshow
• Tab
• Accordion
• Video
  • YouTube Video
  • HTML Video

To create a page using PageFly, you can start by building the layout. There are pre-defined layouts available with 1 to 4 columns, and you can even divide them into a maximum of 12 columns. Once the page layout is ready, you can insert headings (Heading) and choose from H1 to H6 tags. From an SEO perspective, it’s recommended to have only one H1 heading per page, representing the core topic of the page. For Shopify SEO, you can refer to Shopify SEO Recommended App: Yoast SEO Practical Tutorial, a recommended Shopify SEO app.

Next, you can add paragraph text to compose the main content. Inserting images (Image) enhances the visual appeal and engagement of the page. If necessary, you can use a bullet or numbered list (List) to present key points. You can also include a slideshow (Slideshow) commonly seen on e-commerce websites, with options for automatic or manual navigation.

To organize content, you can use tabs (Tab) for categorization. For example, you can use tabs to showcase different product features, descriptions, and specifications on a product page. Accordion (Accordion) elements are often used for Frequently Asked Questions (FAQ) pages, allowing collapsible sections for various questions and answers. When dealing with a large number of questions (e.g., more than fifty), using accordions helps maintain a clean and organized layout.

Lastly, you can incorporate videos (Video) at appropriate places within the page. Videos not only improve visitor engagement but also facilitate the conveyance of brand or product concepts. PageFly provides a built-in YouTube Video element that allows you to directly embed YouTube videos by copying and pasting the specified video link. You can also use your own uploaded video file by providing its link, utilizing the HTML Video element. It’s quite user-friendly.

In addition to these elements, there are more features and elements available in PageFly that you can explore once you become familiar with the basics.

If you want to learn more about the additional settings for a specific element, PageFly offers a helpful feature. When you hover your mouse over the element, a “question mark icon” will appear on the right side. Clicking on it will redirect you to the official documentation for that specific element, providing detailed explanations and instructions.

---

PageFly offers several key features that make it a standout page builder:

After creating the basic layout, PageFly offers some additional elements that I personally classify as “special features.” These elements are commonly seen on various e-commerce websites and provide flexibility for executing customized designs and settings. Some of these special features include:

• RWD (Device View Mode)
• Version History
• Customer Form
• MailChimp Form
• Content List
• Add Shopify element: Product List / Details / Media / Title …
• Add Shopify element: Blog Post List
• Action
  • Go To URL
  • Open Pop-up
  • Open Lightbox
  • Scroll To Section
  • Send Email
  • Call Number
• Animation
  • Context (Interactive Methods): When Display、When Mouse Over
  • Dynamic Options: Each of the above interactive methods has different dynamic settings, including Bouncing, Fading, Flipper, Rotate, Sliding, Zoom, and more.
• Integrations with various Shopify App
  • Growave
  • Loox Product Reviews & Photos
  • Pickystory
  • AfterShip
  • GrowthHero
  • Referral Candy
  • Lookbook – Shoppable Galleries
  • etc…
• Product Add To Cart
• Search
• Select Page Template

The more built-in features a web page editor has, the less code needs to be written. This enables everyone to maintain the website, improving execution efficiency and facilitating smooth workflow transitions. For example, it supports Responsive Web Design (RWD) with device-specific layout and style settings. The editor also offers Version History, allowing you to track changes and revert to previous versions (approximately 40+ versions). It provides pre-built contact forms for common website needs, including a dedicated MailChimp integration for newsletter subscription forms. These features save time and effort. However, for more advanced functionalities like file uploads, additional apps may be required. The Content List feature enables the quick creation of three-column layouts for text and images, suitable for showcasing features or pricing tables. The Product Information combination allows you to separate and customize product details, media, and titles in different sections of the page. Lastly, you can easily embed a blog post list in any page location, making it convenient to incorporate unboxing articles within product pages.

The action settings for elements refer to configuring click events for specific elements such as headings, buttons, and images. For example, you can set them to navigate to a specified URL or open a popup window. One interesting feature is the ability to set not only the recipient email but also the email subject and content for the “Send Email” action, which is relatively uncommon. The dynamic settings (Animation) for elements allow you to apply fade-in animations to different elements like buttons and focal images, enhancing the interactive browsing experience.

Excitingly, PageFly continues to expand its integration capabilities with other categories of Shopify apps. This means you can directly incorporate selected content from these apps into your PageFly pages, facilitating seamless layout design. Some notable integrations include Growave for comprehensive functionality (social login, product reviews, etc.), Loox for customer photo reviews with image uploads, Pickystory for revenue-boosting product bundling, AfterShip for order tracking, GrowthHero for influencer marketing, Referral Candy for turning customers into influential advocates with referral rewards, and Lookbook – Shoppable Galleries for Instagram shopping with a stylish design.

The “Product Add to Cart” feature allows users to add products to the cart without redirecting to another page. Additionally, you can insert a simple search field that searches blog articles or product pages. Although it doesn’t offer extensive customization options, it can be restricted to search only product pages. If you want to quickly create a basic page, you can select a page template and customize it according to your needs.

RWD (Device View Mode)

In this era of mobile devices, Responsive Web Design (RWD) plays a fundamental and crucial role, especially in optimizing the user experience for mobile users. PageFly allows you to implement RWD by customizing various aspects specifically for four device types: All Devices, Laptop, Tablet, and Mobile. This includes adjusting text sizes, line heights, colors, and top/bottom spacing according to each device type. However, it’s important to note that there may be some limitations during implementation, and the process can be a bit more intricate. To fully understand and experience the implementation, it’s recommended to delve into the practical aspects, as it may involve more detailed steps.

Action

The action settings in PageFly allow you to configure different behaviors for text links or images. You can specify actions such as “Go To URL,” which redirects users to a specific link when clicked, or “Open Pop-up,” which opens a popup window with content such as videos, images, or designated pages within your site.

Another option is “Open Lightbox,” where you can set an image to open in a focused lightbox mode when clicked. This provides an immersive viewing experience for the image without navigating away from the current page.

You can also use the “Scroll To Section” action to smoothly scroll to a specific section on the page when clicked. This creates a seamless transition and enhances the user experience.

Additionally, you can configure an action to “Send Email,” which triggers the email client with a specified email address, allowing users to send an email directly.

Lastly, there’s the “Call Number” action, which enables users to initiate a phone call when clicking on a phone number displayed on the webpage.

These action settings provide interactive elements that enhance user engagement and improve the overall functionality of your website.

Contact Form

Commonly used on “Contact Us” pages, PageFly provides default form fields such as Email, Single Line Text, Multiple Lines Text, Single Choice, Checkbox, Dropdown, Number, Date, and Time. However, it does not have the “upload file” feature. To incorporate file uploads into your forms, you would need to purchase a Shopify App like Powerful Contact Form Builder by Globo or Helium Customer Fields. By combining these tools, you can quickly create forms that allow users to fill in their name, email address, and leave a message. Additionally, you have the flexibility to customize the form layout, including adjusting field widths and arranging them as per your requirements.

Newsletter – MailChimp Form

PageFly offers a convenient integration with MailChimp for creating email subscription forms. With the MailChimp Form element, you can easily design and customize a form to collect email addresses from your website visitors.

Shopify App Integrations

PageFly’s page editor allows for the integration of various Shopify apps from different domains, enabling you to consolidate and design your content with ease. With an expanding list of partners each year, PageFly strives to create more possibilities and meet users’ diverse needs. If your preferred app is not currently listed in PageFly Integrations, you can submit a request through PageFly’s wishlist form and make a wish! I have already made a wish to integrate Transcy: AI Language Translate, a multilingual translation app, hoping for manual translation support rather than relying solely on automated translation for PageFly-created pages. Please make it happen soon.

Select Page Template

If you’re short on time or want to experiment with ready-made templates, you can quickly create a web page by selecting one of PageFly’s built-in “Page Templates.” This option allows you to improve your workflow efficiency by starting with a pre-designed layout and making modifications as needed. PageFly offers a diverse range of template types, including Home Page, Landing Page, Product Page, Collection Page, and more, which correspond to the default page types in Shopify. It’s convenient to apply these templates directly to your pages. Additionally, the PageFly team periodically releases new templates, so stay tuned for more options in the future!

---

PageFly Advanced Features

PageFly can turn your visual design into an actual webpage and publish it worldwide at an incredibly fast speed. With the operations I mentioned earlier, you can accomplish most of the tasks. As long as you are familiar with the process of slicing designs from Figma, Photoshop, or Illustrator, optimizing images using tools like TinyPNG, and uploading them to Shopify to create pages using PageFly, congratulations, you can now customize Shopify website pages! Once you have mastered the basics, the next step is to understand advanced interactive design, dynamic design, and learn some tips and tricks to meet specific requirements. If you are familiar with HTML/CSS, you can already fulfill most design and layout needs. For the remaining tasks, you can achieve an even higher level of customization using JavaScript/jQuery, but that goes beyond the scope of most people and is better left to front-end developers!

I will roughly pick a few common features, such as the Parallax Effect, which can be achieved using the built-in functionality of PageFly. It solves the difficulties that most people face when writing code. The Sticky Menu, on the other hand, can be easily implemented by following the setup instructions and CSS syntax provided in the official documentation. For mobile layout techniques like the Display Style: Flex, it is more beneficial to have knowledge of CSS to understand how to use it. One common scenario is when the desktop version of a webpage has a left-text, right-image layout, but for the mobile version, you want to switch it to an image above text layout. In such cases, the Display Style: Flex technique comes in handy. As for the implementation details, I will share them later when presenting a future demo.

• Parallax Effect
• Sticky Menu
• Display Style: Flex
• Saved Section
• Product Metafield
• 元素 CSS 設定 Attributes
  • ID
  • Class
• Custom Code Editor (CSS / JavaScript)
  • Custom CSS
  • Custom JavaScript

Saved Section

PageFly has introduced a new feature called “Saved Sections,” and it’s finally here! This feature is incredibly important and convenient for content that needs to be repeated on multiple pages. PageFly provides pre-made sections, but we can also customize them ourselves. Once we create a shared section, we can apply it to specific pages. If we need to change any part of the section’s content, the update will automatically apply to all pages that use that section. It’s truly magical!

The introduction of metafields by Shopify has indeed added a lot of flexibility to websites by allowing the addition of dynamic data. It’s a great feature! Understanding how to integrate metafields with PageFly can be a game-changer. For example, you can insert metafields into pages created with PageFly as part of the layout.

PageFly provides the ability to set CSS ID or class names for most elements, and some elements even allow setting HTML attributes. This feature is crucial for web designers and frontend developers. They can add code to PageFly pages that will only affect that specific page or manage the code in Shopify’s code files for centralized management. This enables them to select and control the CSS settings they have defined. Therefore, the ability to set element CSS attributes and use the Custom Code Editor for CSS/JavaScript becomes invaluable.

Custom Code Editor (CSS / JavaScript)

The Custom Code Editor in PageFly is indeed crucial for web designers or developers proficient in CSS and JavaScript. It allows them to create unique layouts, interactive designs, and implement visual and creative elements that go beyond the capabilities of the default templates. It’s important to note that the code written in the Custom Code Editor within a PageFly page will only apply to that specific page and not the entire website. This provides a targeted and localized approach to customization, giving users the flexibility to tailor specific pages to their desired visual and functional requirements.

---

PageFly Learning Resouces

PageFly itself provides a wealth of learning resources, offering a wide range of tutorials in various formats such as text, images, videos, etc. These resources are designed to help users, both beginners and experienced professionals, quickly get started and familiarize themselves with the platform. Additionally, PageFly offers online customer support, allowing users to directly seek assistance and guidance for any questions or concerns they may have. This comprehensive approach ensures that users can maximize their learning experience and make the most out of PageFly’s features and capabilities.

PageFly Help Center

• URL: Learn more
• Introduction: PageFly’s official online documentation is one of the most frequently used resources. It serves as a handy dictionary where you can search for keywords and browse through detailed explanations of each interface and operation. The documentation also includes instructional videos that make it easy for you to get started with PageFly. Personally, I find it extremely useful for searching and understanding various aspects of PageFly.
• If you want to dive right into it, you can refer to the article titled “Get started within 6 mins,” which provides a quick overview of the basic features and how to use PageFly templates to create and publish pages.

PageFly YouTube Channel

• URL: Learn more
• Introduction: PageFly has an official YouTube channel where they provide practical video tutorials that can help you learn faster and better understand the platform. The channel covers a wide range of topics, including software operations, tips and tricks, online webinars, and Shopify template reviews. If you’re new to PageFly, you can start with their “New to PageFly? Start here!” series to get acquainted with the platform. Watching these videos is a great way to enhance your PageFly learning experience – New to PageFly? Start here!

PageFly Updated

• URL: Learn more
• Introduction: PageFly’s blog features a category called “PageFly Updated,” where they regularly publish software update content. Unlike typical SaaS software that only provides text-based update information, these articles include concise operational diagrams. This allows users to stay informed about the latest features and updates, making it quite valuable!

PageFly Udemy Online courses

• The PageFly team offers a free course on the online learning platform Udemy, providing systematic guidance on how to use PageFly effectively while also learning how to build a Shopify store. This course allows you to learn in a structured manner, gaining valuable knowledge and skills.
  • Here is a list of the courses available from PageFly on Udemy:
    • Build a highly converting Shopify store | complete guide
    • PageFly Complete Print on Demand Shopify Design Course

PageFly Academy

• URL: Learn more
• Introduction: We provide a free and concise guide on e-commerce and website development, including an overview of PageFly and fundamental concepts of web design. Our goal is to help you understand the basics of Shopify, PageFly, and website creation.

Irvinglab 爾文實驗室

• URL: https://global.irvinglab.com/blog/
• Introduction: When you’re reading this, you’re actually on the Erwin Lab’s website blog ^^, which covers topics related to Shopify and PageFly. I will continue to update the content and share practical experiences with building websites. If you have any questions about Shopify or PageFly, feel free to message me anytime. Let’s exchange ideas and grow together! Creating a customized brand e-commerce website is no longer about templates or generic designs that look alike.

---

Here are some actual examples of websites built with PageFly:

Introduction: Below are a few Shopify e-commerce websites that have used PageFly to build their pages. You will notice that not all pages on these websites require PageFly. Depending on their specific needs, some brands may use it for more complex regular pages, while others may utilize it for product pages or high-converting landing pages for advertising purposes. It is rare to find it used on blog article pages. Feel free to browse through these examples to gain inspiration. In the future, there will be continuous additions of actual website case studies and website technology breakdowns, so stay tuned!

---