How to Use PageFly 2.8.0 Image Element: Complete Tutorial
By Braincuber Team
Published on May 19, 2026
PageFly version 2.8.0 brought massive improvements to the image element and overall user experience. This complete tutorial walks you through every change — from the new single-image mechanism that dramatically reduces page size, to the visibility settings that let you show different images on different devices. This is a step by step guide and beginner guide to understanding and using these improvements to build faster-loading, higher-converting Shopify pages.
What You'll Learn:
- Why page speed matters for conversion rates and how images impact load time
- How PageFly 2.8.0 shortened image URLs to reduce page size
- How to use one image for all devices and the new mechanism
- How to show different images on different devices using the Hide feature
- UX improvements: cursor changes, third-party app messages, parameter groups, page settings
Why Image Optimization Matters for Page Speed
Page speed has a critical impact on the buying decision of online customers. You may have a compelling website, but if it does not load fast enough, it will not generate many sales. The average online customers are very impatient. When your long page loading time makes them dissatisfied, they are likely to abandon your site.
Images are one of the most important factors that decide whether your website loads fast or slow. Understanding this problem, PageFly 2.8.0 brought massive image element improvements that reduce the overall amount of data in your page, making it load faster and increasing your conversion rate.
Original Link: 1385 characters
Shortened Link: 532 characters
// That is a 61.6% reduction in URL length
// Less data = faster page load = higher conversions
Step 1: Use One Image for All Devices
In previous PageFly versions, users could select different image sources for each device view. However, this caused many errors when styling images. In PageFly 2.8.0, the Image Element Mechanism was improved to shorten the inspect image URL, which reduces page size and increases loading speed.
Open the Image Element in PageFly Editor
Select the Image element you want to edit. The element inspector will appear on the right side of the editor.
Switch to "All Devices" View
To change the image, you need to go to the "All Devices" view and reselect the image you want. You can only use one image across all devices in this new mechanism.
Save and Publish
Click Save and Publish. The shortened image URL will now be used across all device views, reducing your page size.
Important Note for Legacy Pages
If you are using old image elements in pages created with earlier PageFly versions, you can still change images for different devices as before. This new mechanism only applies to new image elements created in 2.8.0 and later.
Step 2: Show Different Images on Different Devices Using Hide
There are cases when you need to show different images for different devices. For example, you want to show a landscape image on desktop and a portrait image on mobile. Here is how to do it using the Hide on visibility feature.
Add All Images in "All Devices" View
In the All Devices view, add all the images you want to show on different devices. Stack them or position them as needed in your layout.
Select Each Image and Find Visibility Settings
Select each image individually. In the General tab of the element inspector, you will see the Visibility parameter with "Hide on" options for Desktop, Tablet, and Mobile.
Hide Each Image on the Devices Where It Should Not Appear
To show an image on a specific device, hide it on all other devices. For example, to show Image A on Desktop only, hide it on Tablet and Mobile. To show Image B on Mobile only, hide it on Desktop and Tablet.
Save and Publish to See Different Images on Each Device
Click the Save and Publish buttons. Preview your page on different device views to confirm that the correct images appear on each device.
Step 3: Navigate the Improved UX Changes
PageFly 2.8.0 also brought several noticeable UX improvements to make building your online store easier. Here is what changed and how to use the new features.
Mouse Cursor Changed to Hand-Click Pointer
In previous PageFly versions, hovering over the element list name showed a standard arrow cursor, which did not indicate clickability. Some users did not know there were element variations inside.
In PageFly 2.8.0, the cursor changes from an "Arrow" to a "Pointer" (hand-click) when you hover over the element list name. This immediately signals that you can click to expand and see element variations.
Improved Third-Party App Default Message
To help users avoid confusion when using third-party apps, PageFly 2.8.0 improved the default message shown when you click on a third-party app element in your editing page. A message about Widget Configuration now appears in the General tab:
| Scenario | What the Message Tells You |
|---|---|
| App already installed | Go to the settings of the installed app to configure the widget |
| App not installed | A link is provided to install the app from the Shopify App Store |
Parameter Group Display in General Tab
In version 2.8.0, the element inspector display was updated to better focus on the main parameters at first sight. The Tracking, Attributes, and Animations parameter groups are now collapsed by default every time you revisit the page editor. This reduces visual clutter and lets you find the most commonly used settings faster.
Updated Page Settings
Two key improvements were made to Page Settings:
Page URL Auto-Replace
When switching from a page type with a fixed/dynamic URL (Homepage, Product Page, Collection Page, Password Page) to a non-predefined one (Regular Page, Blog Post Page), the path URL is automatically replaced. Note: this automation only happens once — if you edit the page title after switching, it will not trigger again.
Page Layout Toggle
In the new page layout tab, you can select to show or hide sections generated by your theme, such as header/footer and default product/collection details. This gives you full control over which theme elements appear on your PageFly page.
Summary of All PageFly 2.8.0 Changes
| Feature | What Changed | Benefit |
|---|---|---|
| Image Element | One image for all devices, shortened URLs | Reduced page size, faster loading |
| Visibility | Hide on device options | Show different images per device |
| Cursor Icon | Arrow to Pointer (hand-click) | Clearer indication of clickability |
| App Messages | Widget Configuration message | Clarity on third-party app setup |
| Parameter Groups | Collapsed by default | Cleaner inspector, faster navigation |
| Page Settings | Auto URL replace, layout toggle | Easier page type switching, theme control |
Frequently Asked Questions
Why does PageFly 2.8.0 only allow one image for all devices?
The single-image mechanism shortens the inspect image URL, reducing page size by up to 61% and significantly improving page loading speed. Faster pages lead to higher conversion rates and lower bounce rates.
Can I still show different images on mobile vs desktop?
Yes. Add both images in the All Devices view, then use the "Hide on" visibility settings in the General tab to hide each image on the devices where it should not appear.
Do old PageFly pages lose their device-specific images?
No. Existing image elements created in earlier PageFly versions retain their ability to use different images per device. The new single-image mechanism only applies to new image elements.
What are Tracking, Attributes, and Animations in PageFly?
These are advanced parameter groups in the element inspector. Tracking handles analytics events, Attributes adds custom HTML attributes, and Animations controls entrance effects. They are collapsed by default in 2.8.0 for a cleaner interface.
How do I hide theme header and footer on a PageFly page?
Open Page Settings, go to the Page Layout tab, and toggle off the sections generated by your theme such as header, footer, and default product/collection details. This gives you a blank canvas for your PageFly design.
Need Help Building High-Converting Shopify Pages?
Braincuber helps D2C brands design and build fast, conversion-optimized Shopify storefronts using PageFly and custom themes. From page speed optimization to full store redesigns, our experts deliver results.