How to Use PageFly 2.5.0 UI Improvements: Complete Guide
By Braincuber Team
Published on May 13, 2026
PageFly 2.5.0 brings significant UI improvements and ultramodern settings that give Shopify store owners more control over their page designs. This complete step by step guide walks through every new feature in this update: the redesigned Collection List element with individual sub-element customization, the new Default Image Source option for Product Images, the enhanced Button element with Open Pop-up functionality, and the Lazyload Images optimization setting for faster page loads.
What You'll Learn:
- How to customize individual sub-elements in the Collection List
- How to choose Featured Image vs First Variant Image as default product source
- How to equip the Product Details element with Default Variant selection
- How to use the Button element's new Open Pop-up feature with YouTube and store content
- How to enable Lazyload Images for faster page loading speed
What is New in PageFly 2.5.0
PageFly 2.5.0 is a major update to the popular Shopify page builder that focuses on UI improvements and ultramodern settings. Building on the previous 2.4.0 version which introduced new Shopify elements and UI enhancements, this version adds deeper customization options for existing elements, new click actions, and performance optimization features.
| Feature | Element | Benefit |
|---|---|---|
| Individual Sub-Element Customization | Collection List | Edit parameters separately without adding extra elements |
| Default Image Source | Product Image | Choose featured or first variant image |
| Default Variant | Product Details | Display a specific variant by default |
| Open Pop-up (YouTube + Store Content) | Button + Heading + others | Trigger pop-ups with animations |
| Lazyload Images | Page Settings | Faster page loading via deferred image loading |
Step 1: Use the Updated Collection List Element
The Collection List element received a major overhaul in PageFly 2.5.0. In previous versions, dragging a Collection List into the page editor showed four placeholder illustration images, and you had to select collections one by one manually. The new version changes this completely.
Before = Placeholder images, manual collection selection one by one
After = Live collections displayed directly, adjustable items per loading (max 30)
New Option = Collection Source: All Collections or Custom Collection(s)
In the General tab under the CONTENT parameter, there is a Collection Source option with two choices:
- All Collections — Automatically displays all collections from your Shopify store.
- Custom Collection(s) — Lets you hand-pick specific collections to display.
The default number of collections displayed is 4, and you can adjust the items per loading up to a maximum of 30. This gives you full control over how many collections appear at once. You also do not need to add separate Collection Details, Collection Images, or Collection Titles elements because they are built into the Collection List.
Styling Behavior Note
If you style an element in the Collection List, that style applies to the corresponding element across all collections. The Collection List also supports Device Sensitive integration, letting you edit layouts separately for Laptop, Tablet, and Mobile.
Step 2: Configure the Product Image Default Source
The Default Image Source option is a valuable new function in the Product Image element. In previous versions of PageFly, when you used the Product Image element and selected a product, the displayed image defaulted to the featured image. PageFly 2.5.0 now gives you a choice.
In the General tab of the Product Image element, you will find the Default Image Source option with two choices:
Featured Image
Displays the main featured image set in the Shopify admin for the product. This is typically the primary product photo that represents the item in catalog views and search results.
First Variant Image
Displays the image assigned to the first product variant. This is useful when variants have distinct visuals, such as different colors or materials, and you want the variant image to show by default.
To set this up, go to the Shopify admin and check your product settings. Each product can have a featured image set at the product level, and variant images set at the variant level. The Default Image Source option lets you decide which one PageFly displays first when the page loads.
Step 3: Configure the Product Details Default Variant
The Product Details element was upgraded in PageFly 2.5.0 with a new Default Variant option. This lets you choose which variant of a product is displayed by default on the live page that your customers see.
This is particularly useful for products with multiple variants where you want a specific option to be pre-selected. For example, if you sell a t-shirt in three colors and want Blue to be the default selection when the page loads, you can set that directly in the Product Details element settings.
Use Case
If you are running a promotion on a specific variant, set it as the default so customers see that option first. This can increase the likelihood of them selecting and purchasing that specific variant.
Step 4: Use the Enhanced Button Element with Open Pop-Up
The Button element received powerful new Click Action options in PageFly 2.5.0. Building on the previous version which offered two button actions, this update introduces two more actions with the Open Pop-up feature. The new pop-up can display either a YouTube video or store content.
Pop-Up with YouTube Video
When you select Open Pop-up as the Click Action, you can choose Youtube Video as the pop-up content. This option includes standard settings like Loop, AutoPlay, Mute, and Show Controls. Additionally, it provides an Enable Animation setting where you can choose an entrance animation for the video pop-up, such as the tada animation.
1. Select the Button element in PageFly editor
2. Go to General tab > Click Action > Open Pop-up
3. Choose Pop-up Content: Youtube Video
4. Insert your YouTube URL
5. Configure: Loop, AutoPlay, Mute, Show Controls
6. Enable Animation (e.g. tada)
7. Save and Publish
Pop-Up with Store Content
The Store Content option lets you display a page from your Shopify store inside the pop-up. To use this:
In the Pop-up Content dropdown, choose Store Content.
Click the URL icon to open the Select Page modal.
Choose from Collections, Products, Pages, or Blog Posts in your store.
Select an animation for the pop-up (e.g., wobble) and publish to see the result.
Open Pop-Up on Other Elements
The new Open Pop-up Click Action is not limited to the Button element. Any element that has a Click Action option in the General tab can use this feature. For example, a Heading element can be configured to open a pop-up when clicked. This allows you to create interactive content experiences throughout your pages.
Step 5: Enable Lazyload Images for Faster Performance
The Lazyload Images option is a new advanced setting available in the Page Settings modal under the Page Optimization section. When enabled, images on the page load gradually as the user scrolls down, rather than all at once. This significantly improves page loading speed.
The Lazyload Images option applies to all image types on the page: Collection Images, Background Images, Product Images, and more. You can choose to enable it for any specific page you create with PageFly.
Without Lazyload = Defer offscreen images factor: 4.3s delay
With Lazyload = Offscreen images load on scroll, eliminating defer delay
Tool = Test both scenarios on Google PageSpeed Insights
You can verify the performance improvement by testing your page on Google PageSpeed Insights. For a page without Lazyload Images enabled, you will see a factor called Defer offscreen images in the Opportunities section. This factor represents the delay caused by loading images that appear below the fold. In testing, this factor was measured at 4.3 seconds, making it the largest performance bottleneck.
Availability
The Lazyload Images option is available in the PAID plan of PageFly. Check the PageFly pricing page for detailed plan comparisons.
Frequently Asked Questions
How do I update to PageFly 2.5.0?
PageFly updates are automatic for Shopify users. Open the PageFly app from your Shopify admin and the new version should be available. If you do not see the new features, try refreshing or reinstalling the app from the Shopify App Store.
Can I still use the old Collection List behavior?
Yes, by choosing Custom Collection(s) as the Collection Source, you can manually select which collections to display, replicating the old behavior while benefiting from the new individual sub-element customization.
Does Lazyload Images affect SEO?
Yes, positively. Lazyload Images improves page loading speed, which is a confirmed Google ranking factor. Faster pages provide better user experience and can improve your search engine rankings, especially on mobile.
What animations are available for the Open Pop-up feature?
PageFly provides several CSS animation options including tada, wobble, fadeIn, bounceIn, slideIn, and more. You can preview each animation directly in the editor before publishing.
Is the Default Variant option available on all pricing plans?
The Default Variant option for Product Details is available on all PageFly plans. The Lazyload Images feature is limited to PAID plans. Check the PageFly pricing page for detailed feature breakdowns by plan.
Need Help with Your Shopify Store?
Our Shopify experts can help you design high-converting pages using PageFly and other page builders. From custom layouts to performance optimization, we guide you through every step.