Table of Contents

PageFly 2.5.0: Provided UI Improvements and ultramodern settings

Our operations are supported by commissions earned from affiliates. Details.

Updated on November 20, 2020. 

Striving for the betterment has long been sculpted in our DNA and PageFly have continuously released new 2.0 updates with way better features, better UI and stronger customization capacities. 

For the most up-to-date information about PageFly, check out: PageFly Help Center

---

About one month ago, PageFly released a 2.4.0 version with many outstanding elements as well as functions to help users optimize conversion rates for their stores. The 2.4.0 version focused on the Shopify elements and new UI improvement. You can read more here.

On a chilly early autumn day, PageFly is pleased to announce a new version 2.5.0. This new version 2.5.0 will provide UI improvements and ultramodern settings, and we hope you’ll enjoy what we share below. Let’s take a look!

Updates to the Collection List element

The ability to customize the sub-element individually

In the previous version, when you drag and drop the Collection List element into the page editor, then there are 4 illustration images that appear, and if you want to add any collections, you have to select them one by one to add the collections you want.

collection-list-1-1

In the new version 2.5.0, the collections you have in your Shopify stores will be displayed directly when you use this Collection List element. The default number of collections is 4 and you can adjust the items per loading, and the maximum for this option is 30. Let’s see how it works.collection-list-1-2

To clarify this new change, you can see in the General tab. In the CONTENT parameter, there is a Collection Source option with 2 choices

  • All Collections
  • Custom Collection(s)

This new update for the Collection List element allows users to customize with ease, to edit parameters separately like normal elements preserving all parameters. This means you don’t have to add other elements such as Collection Details, Collection Images, Collection Titles because they are available when you use the Collection List

Note that if you style for the element(s) in the Collection List, then it will be applied for the corresponding element(s) of all collections. 

Moreover, the Collection List element with the Device sensitive integration helps you to edit the layouts on every device such as Laptop, Tablet, and Mobile.

collection-list-1-3

New function for the Product Image element

Default Image Source option

This Default Image Source is a function worth looking forward to. In the previous version of PageFly, when you use the Product Image, then select a product you want, the product image displayed will default for the featured image. Now, PageFly version 2.5.0 provides the Default Image Source option to choose whether the displayed image is the featured image or the first variant image. You will see this option in the General tab as per the image belowproduct-image-1-1

Before choosing, you can go to the Shopify admin and check your products.

1. Featured image

product-image-1-32. The first variant imageproduct-image-1-4Let’s see how it works.collection-image-1-5

Re-equip for the Product Details element

In the PageFly version 2.5.0, the Product Details was upgraded once more to help you customize products easier.Meet the Default variant option.

product-details-1-1

With this option, you can choose the variant of the product you want to display in the live page that your customers can see.

Improved the Button element

Update for the Click Action option 

At first, we will have a look at the Button element. In the PageFly version 2.4.0, the Button element offered the first 2 buttons. But in this new version 2.5.0, we would like to introduce 2 more buttons as the image below:button-element-1-1

This is a newfangled improvement for the Click Action option of the Button element: Open Pop-up!

In the Pop-up Content, users can choose one of two choices such as 

  • Youtube video:

Besides other choices like the Youtube element including Loop, AutoPlay, Mute, and Show Controls, the Youtube video choice provides the Enable Animation so you can choose any animation you want for the Youtube video. 

To illustrate this choice, you can see an example below. In the PageFly editor, after inserting your Youtube URL, you can choose any animation you want, for example with the tada animation.button-element-1-2And this is how it looks on the live page:button-element-1-3

  • Store content: 
  1. In the Pop-up Content, you choose the Store Content option.
  2. Then click on the URL icon as the image below.
  3. Choose one of the pages of the collections/ products/ pages/ blog posts in the Select page modal.

Click into the Select page button.button-element-1-4

Then you can also choose the animation you want. In this example, I chose the Cleansers & Exfoliators page and the wobble animation. Now, look at the live page and you will see the changes.button-element-1-5

Click Action option for other elements

Other elements which have the Click Action option in the General tab also has the Open Pop-up. For instance with the Heading element. In this example, we have the Heading text as Go with you on every road, and we also chose Store Content.button-element-1-6

And this is how it works on the live page after Save and Publish.button-element-1-7

This new setting of the Click Action is awesome. Give it a try and you will love it!

New advanced setting: Lazyload Images

The Lazyload Images option is available in the Page Settings modal. This is the Page Optimization part which configures settings for optimization of your page. You can choose to Enable the Lazyload Images for any pages you want. For the page(s) you set up the Lazyload Images, then when you scroll down, the images below will be loaded gradually.lazy-load-1-1

For your information, the Lazyload Images option is applied for all the images such as Collection Image, Background Image, Product Image, etc. So with this page, I choose to enable the Lazyload Images option, then it will be applied for all images on the page. You can see it on the live page below:lazy-load-1-2

The reason that PageFly created the Lazyload Images option is its benefits. As I mentioned above, the Lazyload Images option helps to optimize the page loading speed. It helps your pages load super fast. This can be tested on the PageSpeed Insights website. By inserting the URL page, you can check the page loading speed.For a page that doesn’t use the Lazyload Images option, there will be a factor called Defer offscreen images. This factor makes the delay loading of images that appear below-the-fold on the page.As you can see below is the page that doesn’t use the Lazyload Images. In the Opportunity, the Defer offscreen images factor is 4.3s, which accounts for the most.lazy-load-1-3

For your information, this Lazyload Images option is available in the PAID plan, you can check out our PageFly pricing plan for more details.

Summary

With an excited feeling writing this post, I can’t wait anymore for the PageFly version 2.5.0 release. What PageFly version 2.5.0 brings to you will definitely make your store stronger and convert more users.

Now you can experience the new version 2.5.0 and achieve even more control, build your store beautifully and grab more sales. 

We are here, our 24/7 Customer Service Team, always ready to support and help you any time!

TRY PAGEFLY FREE

UPGRADE TO PRO PLAN

Explore Now

Explore the #1 Shopify Page Builder today

Try PageFly Free