PageFly - How can I create a mobile-customized page?

270 views 2

Important: This feature is only available on the Pro plan

PageFly layout is responsive by default. However, it can customize your page on specific devices, including: mobile, tablet, laptop or desktop.

In this article, you will learn to create a mobile custom page to improve customer experiences and drive sales.

About Device Switcher (All/Laptop/Tablet/Mobile)

Inside PageFly Editor, you can find Device Switcher option on the top bar. It shows you how your content looks like on different screens.

Device Switcher on the top menu

How it works:

Device Switcher on the top menu

Important: All changes you made in General tab are applied to all devices regardless of the device screen you are in. Meanwhile, changes in Styling and Advanced tab are applied to the selected device only.

Let’s look at an example. We will see how the Hide On feature in Advanced tab works.

Fine-tune content display on mobile

PageFly allows you to fine-tune content display of your page on mobile.

Take Whey product page template as an example. You can find this template in the template library.

Whey template in Template Library

Let’s take a closer look at the Testimonials section of that template.

On desktop, we see a layout with 2 rows, 3 testimonials in each row.

Testimonial section on All (Desktop) mode

If you switch to Mobile, this section will expand a bit long, because the testimonials stack upon each other.

Testimonial section on Mobile mode

So what if we want to show only 3 testimonials on Mobile instead of 6?

To do so, select the column that contains each testimonial. Then, navigate to Advanced tab.

Hide On parameter in Advanced tab

Next, we enable the Hide On setting for Tablet and Mobile.

To check if the testimonial is hidden on Mobile and Tablet, we use the Device Switcher.

Demonstate Hide On feature

This is an example of how you can optimize content for the page on mobile/tablet and improve the overall user experience for your Shopify store.