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.
How it works:
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.
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.
If you switch to Mobile, this section will expand a bit long, because the testimonials stack upon each other.
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.
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.
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.