How can I create a mobile-customized page?

You can watch this video about how to build mobile-responsive pages with PageFly.

Install PageFly for Free here

PageFly layout structure is responsive by default. However, the app has the option to style your content on specific devices: mobile, tablet, laptop or desktop and you will learn how to do so in this article.

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

Inside the PageFly editing dashboard, you can find the Device Switcher option on the top menu bar. You can easily see how your content will look on each device.

Here is how the function works in reality. It adjusts the editing canvas and what you see in the editor is what your visitors will see as well. So make sure that you create a comfortable user experience on mobile and tablet devices.

Let’s take a closer look at the Testimonials part of that template. On the desktop, we see a 2-row layout with 3 testimonials in each row.

If you switch to Mobile, this part will be a bit too long since each testimonial covers almost the full mobile screen.

In this example, we want to show only 3 testimonials on Mobile instead of 6. To do that we select the container of each testimonial which is the column and navigates to the General tab > VISIBILITY.

create a mobile-customized page with pagefly

Next, we enable Hide On setting for Tablet and Mobile. It’s DONE! To check if the testimonial is hidden on Mobile and Tablet, we use the Device Switcher.

mobile-customized page

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

You can check this video to know how to adjust the mobile layout with the Flex option

Was this helpful?

Try out all PageFly features with Free plan
Don’t have Shopify store yet? Create store

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!