How to Customize Product Page with PageFly 2.3.0: Complete Guide
By Braincuber Team
Published on April 13, 2026
PageFly version 2.3.0 brought revolutionary changes to Shopify page building. This complete tutorial explores the new customizable product page elements, the first PageFly-developed Design System, and the superior UI that makes building pages a relaxing experience. Whether you are new to PageFly or looking to master these new features, this guide will walk you through everything you need to know.
What You'll Learn:
- Step by step guide to the new PageFly 2.3.0 UI
- Beginner guide to the PageFly Design System
- How to use individual product elements
- Complete tutorial on Product Source settings
- How to add multiple product images with Image List
- Best practices for page building with new inspector tools
- How to create under construction pages
What's New in PageFly 2.3.0
The PageFly 2.3.0 update introduced several groundbreaking features that transformed how merchants build their Shopify pages. This section provides a complete tutorial overview of all the new capabilities.
New App UI
Brand new user interface with consistent standards defined by the PageFly Design System.
9 New Product Elements
Complete control over every element of your product page with individual product components.
Image List Feature
Add as many product images as you want with customizable layouts and thumbnail options.
Improved Inspector
Collapsible parameter sections, font previews, and real-time adjustment capabilities.
The New PageFly Design System
One of the most significant additions in PageFly 2.3.0 is the PageFly Design System. This is the first design system developed by PageFly and serves as the foundation for all future updates.
Understanding Design System Standards
Step by step guide to understanding how the PageFly Design System works. All elements now follow consistent standards for colors, spacing, icons, and layout. This ensures visual consistency across all your pages and significantly reduces page load times.
Performance Benefit
Designing all elements based on the same standards significantly improves loading speed. You will notice faster page loads when building and editing your pages.
New Product Elements: Complete Tutorial
In previous versions, users had limited control over product page elements. The Featured Product element could only include or exclude objects, with no ability to modify the overall layout. PageFly 2.3.0 changes this completely by offering 9 new individual product elements.
Interact with Each Element
Beginner guide to using individual product elements. Each element that previously made up the Featured Product can now be used independently with its own styling and configuration. Place any element anywhere on your page and customize it uniquely.
Add Individual Product Elements
Step by step guide to adding individual product elements to your page. You can now add Product Image, Product Title, Product Price, Product Description, Add to Cart Button, and more - each with unique styling and placement.
Product Source Settings
One of the most powerful features in PageFly 2.3.0 is the Product Source setting. This controls which product information is displayed in each element on your page.
| Setting | Description | Use Case |
|---|---|---|
| Auto | Element displays info from the page-assigned product | Standard product pages |
| Custom Product | Element displays info from a specific product you select | Featured products, comparisons |
Configure Product Source Setting
Complete tutorial on setting Product Source. Set to Auto to display the product assigned to the whole page, or Custom Product to assign a different product to that specific element.
Image List: Multiple Product Images
For users who had requests for adding more than one product image, PageFly 2.3.0 introduces the Image List feature. You can add as many product images as you want with customizable layouts.
Add Image List to Your Product Page
Step by step guide to using the Image List feature. Add multiple product images with customizable thumbnail layouts. The first image is automatically set as the featured image.
Inspector Improvements
The PageFly 2.3.0 update also brought significant improvements to the Inspector panel, making the page building experience more intuitive and efficient.
| Feature | Description |
|---|---|
| Collapsible Parameters | Parameter sections can be collapsed to save space |
| Font Preview | Fonts display in their original font faces |
| Real-time Adjustment | Drag to adjust element sizing visually |
| Multiple Units | Measurement units in %, px, and em |
Menu Bar and Page Settings Improvements
PageFly 2.3.0 reorganized the menu bar buttons to match the common user flow, making page editing more intuitive. Key improvements include rearranged buttons and enhanced page settings within the editor.
Create Under Construction Page
Beginner guide to creating under construction pages. The password page now serves as an under construction page that shows information to visitors without requiring a password.
Show/Hide Theme Styling
Step by step guide to toggling theme styling. Enable or disable Header, Footer, and default theme stylings directly from the editor menu bar.
Frequently Asked Questions
What is the PageFly Design System?
The PageFly Design System is a set of consistent standards for colors, spacing, icons, and layout that governs all elements in PageFly. It ensures visual consistency and improves loading speed.
How do I use individual product elements?
Simply add any product element from the element list to your page. Each element can be styled independently and placed anywhere on the page. No need for the Featured Product wrapper anymore.
What is Product Source in PageFly?
Product Source is a setting that controls which product information displays in each element. Set to Auto for the page-assigned product, or Custom Product to display a specific product in that element.
Can I add multiple product images in PageFly 2.3.0?
Yes, the Image List feature allows you to add as many product images as you want with customizable layouts and thumbnail options. The first image becomes the featured image automatically.
How do I create an under construction page?
Create a password page and disable the password requirement. This transforms it into an under construction page that displays information to visitors without asking for a password.
Need Help with PageFly?
PageFly offers powerful page building capabilities for Shopify stores. Our experts can help you get started with PageFly 2.3.0 and build high-converting product pages. From customization to optimization, we are here to help you succeed.