Table of Contents

PageFly 4.16.0 Update: Improve Page Speed & Enhance UX with New Flex-Layout

当社の事業は、アフィリエイトから得られる手数料によって支えられています。 詳細

Hi There,

Richard here again from the PageFly team! We are excited to announce the release of PageFly version 4.16.0! This update brings a host of improvements & enhancements designed to enhance your website-building experience.

From improving page speed to transitioning to Flex Layout, this version is packed with updates that will help you create stunning and high-performing pages more efficiently. Let’s dive into the details of what’s new in PageFly 4.16.0.

Improve Page Loading Time

What's New

A Page Speed Optimization section and Asset Prefetching parameter have been added to the Preferences page. This feature triggers asset prefetching when a user interacts with a PageFly-generated link.

Improve page speed for PageFly 4.16.0

Benefits of Our New Updates

These updates are designed to:

  • Significantly reduce page loading times
  • Improve INP (Interaction to Next Paint) metrics
  • Enhance user’s overall experience
  • Contribute to overall site efficiency and performance

How It Works

  • On Desktop: Prefetching occurs when a user hovers over a link.
  • On Tablet/Mobile: Prefetching occurs when a user touches a link.

After enabling asset prefetching, you can see the page speed here is reduced by half.

  • Before
before optimizing speed
  • After
after optimizing speed

Enhance UX With A New Gen 2 Editor 

What's New

For the PageFly 4.16.0 updates, we have a brand new Gen 2 Editor (Beta version) that includes Flex Layout. Therefore, in addition to the traditional Row/Column Layout, Shopify merchants can build their pages with a more modern Flex Layout.

Important note: Gen 2 Editor with Flex Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).

Gen 2 Editor in PageFly 4.16.0
  • The Row/Column Layout
Row/column layout in PageFly
  • New Flex Layout
new Flex Layout in PageFly 4.16.0

Benefits of Our New Updates

For PageFly 4.16.0 update, we aim to deliver these benefits to Shopify merchants:

  • Enhanced Flexibility: The Flex layout allows for deeper stacking of elements, accommodating more complex designs than the traditional row/column layout.
  • Improved User Experience: Users will find the Flex layout easier to learn and use, streamlining the design process.
  • Modern Design Standards: Aligns with industry trends as many page builders have transitioned to Flex layouts, ensuring users work with contemporary tools.
  • Performance Optimization: The new layout system is designed to improve overall performance, contributing to faster loading times and better responsiveness.
  • Size Parameter Integration: Width and height parameters can be applied to nearly all elements, giving designers more control over their layouts.
  • Alignment Control: The Flex layout provides enhanced control over the alignment and spacing of elements, allowing for precise placement without the need for additional CSS.

How It Works

Advanced editor using the flex system with the nested container & nested blocks.

The ability of the new Flex Layout to nest containers and blocks infinitely gives users complete control over the layout structure. The users can group elements within containers, stack blocks within blocks, and create complex design hierarchies.

This also allows for more intricate designs that align with modern web design standards, accommodating more advanced needs beyond simple row/column structures.

advanced flex layout editor in PageFly 4.16.0

Width and height parameters have been added to most elements

The Width and Height parameters have been added to most elements in PageFly's Flex Layout to give users more precise control over the sizing of individual elements on their Shopify pages. These parameters allow users to customize how wide or tall an element should be, ensuring that it fits perfectly within their overall design and layout, whether on desktop or mobile devices.

Take better control of how elements/items are displayed in a container

For the Flex Layout, you can define how the items inside the container are arranged, either in a horizontal (left to right), vertical (top to bottom) or wrapped direction.

edit elements in a container with PageFly 4.16.0

You can also reverse the order of items within a container, which helps adjust the layout for different screen sizes.

In addition, you can now adjust the spacing between items within the container. Customizing the horizontal or vertical gaps between items creates a more user-friendly layout that is easier to scan and navigate, reducing confusion or frustration.

change spacing between items

Aligning items in a container is now possible with our new Flex Layout. This helps you control how items are lined up inside a container.

Final Thoughts

With the PageFly 4.16.0 update, we continue to enhance your ability to create and manage stunning Shopify pages with ease.

As always, our team is here to support you 24/7, so feel free to dive into these new features, explore their benefits, and let us know how they work for you.

We’re committed to continuously improving PageFly based on your feedback and needs.

Please visit our PageFly Blog for an overview of our prior PageFly upgrades. Stay tuned for our latest version updates:

Explore Now
Improve store speed to convert better and rank higher on Google.    Try TinyIMG