How to Use PageFly Shopify Page Builder 1.0.4: Complete Tutorial
By Braincuber Team
Published on April 4, 2026
What You'll Learn:
- Connect MailChimp to PageFly signup forms for lead capture
- Add and configure blog list elements on any Shopify page
- Use 20+ pre-designed landing page templates to build pages faster
- Navigate page element structure with the element path feature
- Preview designs across desktop, tablet, and mobile devices
PageFly version 1.0.4 brings powerful features that help Shopify merchants build high-converting landing pages faster. This complete tutorial covers every new feature in detail, from MailChimp email integration to pre-designed templates covering multiple niches. Whether you are a beginner or experienced store owner, this step by step guide will show you exactly how to use each feature.
Feature 1: MailChimp Integration with Signup Form Element
The signup form element was one of the most requested features since PageFly's official release. This update allows you to collect email addresses from leads directly on your landing page and sync them with your MailChimp mailing list.
With this integration, you can build Shopify lead generation landing pages quickly and improve your conversion rates. The Analytics dashboard shows how your landing page performs and whether it is capturing leads effectively.
Email Collection
Capture visitor emails directly on landing pages and sync with MailChimp lists automatically.
Analytics Tracking
Monitor landing page performance and lead conversion rates through the built-in dashboard.
Customizable Fields
Edit button text, input placeholders, and icons to match your brand design.
Action URL Setup
Insert your MailChimp list link in the Action URL field to connect your forms.
How to Set Up MailChimp Signup Form
Add the Signup Form Element
Open the PageFly editor and drag the Signup Form element from the elements panel onto your landing page canvas.
Configure Form Fields
Customize the button text, input field placeholder, and icon to match your brand. These options are available in the element settings panel on the left.
Insert MailChimp Action URL
Find the Action URL field in the element settings. Paste your MailChimp list link here. This connects your form to your MailChimp audience.
Important: Clear Cache Before Testing
To see the latest app changes, sign out from your app store and clear your browser cache. Log back in and access PageFly from the App page to ensure you are running version 1.0.4.
Feature 2: Blog List Page Element
You can now display a blog list on any Shopify page, such as your homepage. This element is found under the Shopify Category - Blog Posts section in the PageFly editor.
Organic traffic from Google and other search engines is free. Publishing more blog posts increases your chances of appearing in search results. Each blog post acts as a new destination for search engine traffic. Displaying fresh blog posts on your homepage sends a trust signal to search engine bots and shows customers that your website is active and maintained.
Blog List Configuration Options
| Setting | Description |
|---|---|
| Show Blog Image | Toggle whether to display featured images for each blog post |
| Image Dimension | Choose the size and aspect ratio for blog post thumbnails |
| Show Meta | Display publishing date and author information for each post |
| Show Excerpt | Enable blog post summaries and adjust the excerpt word length |
| Layout Position | Switch between Vertical or Horizontal layout arrangements |
How to Add Blog List to Your Page
Navigate to Blog Posts Element
In the PageFly editor, go to the elements panel and find the Shopify Category section. Look for Blog Posts.
Drag Element to Canvas
Drag the Blog List element and drop it onto your desired page section. It will automatically pull your latest blog posts.
Customize Display Settings
Use the settings panel to toggle Show Image, configure Image Dimension, enable Show Meta for date/author, and set Show Excerpt with your preferred word count.
Choose Layout Style
Select between Vertical or Horizontal layout to match your page design. Adjust spacing and alignment as needed.
Feature 3: 20+ Pre-Designed Landing Page Templates
Version 1.0.4 introduces the Pre-designed Landing Page Template feature, giving you the ability to build landing pages significantly faster. Instead of starting from scratch, you can choose from 20+ uniquely designed templates covering different market niches.
Templates cover niches including fashion, business, services, beauty, and health care. Whether you run a branded shop or a dropshipping business, you will find a suitable layout to start building your landing page immediately.
Template Categories
Fashion & Apparel
Templates designed for clothing brands, accessories, and fashion retailers with product showcases.
Business & Corporate
Professional layouts for B2B companies, agencies, and service providers with trust-building sections.
Services
Templates for consultants, freelancers, and service-based businesses with booking and contact sections.
Beauty & Health Care
Elegant designs for wellness brands, salons, and health product stores with appointment features.
How to Use Landing Page Templates
Click Pick a Template Icon
In the PageFly editing dashboard, click the Pick a Template icon located at the top-left area of the editor.
Browse Template Collection
Browse through the template gallery organized by niche. Each template is uniquely designed for a specific market segment.
Preview on Multiple Devices
In the preview window, switch between desktop, tablet, and mobile views to see how the landing page looks on each device before selecting.
Select and Customize Template
Choose your preferred template and start customizing. Most templates are designed for home pages and product pages, with sales-focused layouts coming soon.
Total Templates = 20+ (growing)
Primary Use = Home pages, Product pages
Coming Soon = Sales-focused landing pages for ad channels
Responsive = Desktop, Tablet, Mobile preview
Bonus Feature: Page Element Path Navigation
When you click on any page element in the editor, you will now see the full route of that page element. This improvement helps you understand the level placement and hierarchy of each element within your landing page structure.
This feature is particularly useful for complex layouts with nested sections, rows, and columns. Understanding the element path makes it easier to locate and modify specific components within your page design.
Page > Section > Row > Column > Element
Click any element to see its full structural path.
This helps you understand nesting levels and hierarchy.
Feature Overview Summary
| Feature | Benefit | Use Case |
|---|---|---|
| MailChimp Signup Form | Capture leads directly on landing pages | Email marketing, lead generation |
| Blog List Element | Display fresh content on any page | Homepage, SEO traffic |
| 20+ Templates | Build pages faster with pre-designed layouts | Home pages, product pages |
| Element Path | Understand page structure and hierarchy | Complex layouts, debugging |
| Multi-Device Preview | Verify responsive design before publishing | Mobile optimization |
Frequently Asked Questions
How do I connect MailChimp to PageFly signup forms?
Add the Signup Form element to your page, then paste your MailChimp list URL into the Action URL field in the element settings panel. This connects your form directly to your MailChimp audience for automatic email collection.
Can I display blog posts on my Shopify homepage using PageFly?
Yes. Use the Blog List element found under Shopify Category in the PageFly editor. You can configure image display, meta information, excerpt length, and choose between vertical or horizontal layouts.
How many landing page templates does PageFly 1.0.4 include?
PageFly 1.0.4 includes 20+ pre-designed templates covering fashion, business, services, beauty, and health care niches. More sales-focused templates for ad campaigns are planned for future releases.
What is the page element path feature in PageFly?
When you click any element, PageFly displays its full structural path showing the hierarchy from page down to the specific element. This helps you understand nesting levels and locate elements in complex layouts.
How do I preview my PageFly landing page on mobile devices?
In the template preview window, use the device toggle buttons to switch between desktop, tablet, and mobile views. This lets you verify responsive design before publishing your landing page.
Need Help Building Your Shopify Store?
Our experts can help you design high-converting landing pages and optimize your Shopify store for maximum sales.