Back to PageFly.ioVideo Tutorials

Image

About Image Element

The Image Element in PageFly is a powerful tool that allows you to add and customize images on your store pages effortlessly. It supports various image formats, including JPG, PNG, and GIF, making it easy to showcase your products or enhance your page design.

This guide will walk you through the steps to effectively use the Image Element in PageFly. If you find yourself confused between the Image Element and Background Image, please check out the video tutorial below:

How To Access Image Element

To access the Image element in PageFly, follow these simple steps:

  • Step 1: Click the “Elements” button on the left menu and pay attention to the PageFly tab

  • Step 2: Select “Image” element from the dropdown menu. It’s under the Media category.

  • Step 3: Drag and drop the variant you want into the page canvas and start using it.

The Image element offers two variants for you to choose from: Original Image Ratio and Square Image Ratio.

While the Image element initially has only one design option, you can further customize it using the General and Styling tabs. Drag a variant to the layout and see how it can be configured to suit your needs.

How To Configure For Image Element

The Image element in PageFly offers a variety of settings to help you fine-tune its appearance in the General and Styling tabs for the best possible conversion rate. Here’s how to configure it:

General Settings

Select the image element and navigate to the General tab, you will find these settings:

Select Image: Select image to add

There are multiple options for adding new images as follows:

Click on “Explore free images” to select and use free images from Shopify - If you select images from Free Source, the images will be saved to Shopify Content > Files - If you delete the image in PageFly editor pages, it will still be saved and you can reselect it in the library as usual.

The selected images can be found at Shopify > Files:

Upload an image from your device by clicking on the “Add images” button.

Use an image URL from the internet by hitting “Add from URL”.

Select an image from the Media Manager by clicking on the “Go to media files” button

Click “Done” after finishing selecting the image:

Optimize image with TinyIMG You’ll find the Optimize feature in the General tab. Simply click it, and the image will be optimized automatically. You can read more details here.

Alt Text and Title Text: These texts help Improve SEO and accessibility. - Add alt text for search engines and screen readers. - Add a title text for additional context.

Image quality: provides different values that help you customize image quality and optimize performance across all devices. Each value adjusts the image dimensions based on predefined min-width and max-width values: - Auto (375px - 2048px) - Original (original size): Leave the original quality - Thumbnail: 375px - Low (375px - 550px) - Medium (375px-1280px) - High (375px-1920px) - Very high (375px-2560px) - Ultra (375px-3840px)

Enable Full Width: Enable this to make the image fit the width of its container (e.g., a column)

Image Width: Customize the width of your image. This setting is available when "Enable Full Width" is disabled.

Image Ratio: Determine the shape and size of your image.

There are three types for you to choose:

  • Original: The image is displayed in its original size.

  • Square: The image displays as a square.

Custom: Adjust the image height to your preference.

Image Height: Adjust the height of your image. This setting is available when the image ratio is set to "Custom".

Image Object Fit: Control how the image fits within its container. In Square and Custom type, you can resize the image to fit its container:

  • Cover: The image stretches to fill the container.

  • Contain: The image fits inside the container without stretching.

Image Position: Position your image within its container (in Square and Custom image ratio types)

Image loading: Optimize how and when images load:

  • Lazy Loading: Images load only when visible in the viewport, improving PageSpeed.

  • Preload: Images load as soon as the page loads, improving LCP (Largest Contentful Paint).

  • Standard: Balances loading time and user experience.

You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here.

Styling Settings

Select the image element, and switch to the Styling tab to access styling options.

  • Choose global styles for the image: Select from 6 variants, including options with or without frames, square, circle, etc.

  • For further details on the Styling tab, please refer to this link.

To create stunning layouts in your PageFly page, you can utilize images by following the instructions provided in this video tutorial:

Common Cases

Use One Image For All Devices

Use the Image element if you want the same image to appear on all devices. If you want to display different images on different devices, use the Background image element instead.

Use ‘Hide’ To Show The Image On Different Devices

If you need to display different images on various devices, follow these steps:

  1. Add Images: In the All Devices view, add the images you want to display on different devices.

  2. Set Visibility: Select each image and go to the General tab to find the VISIBILITY parameter.

  3. Adjust Visibility: To show an image on a specific device, hide it on the other devices. Now, different images will be displayed on each device

Refer to the illustration below for a visual guide:

Frequently Asked Questions

1. How many images should be included in 200 words?

It's ideal to include around 3 to 4 images. This allows for a balanced presentation, ensuring that each image receives sufficient attention without overwhelming the reader.

2. How to optimize images for use on PageFly?

To optimize images for use on PageFly, it’s recommended to keep the file size under 1MB. This helps improve page loading times and ensures a smoother user experience. You can now optimize the images right in PageFly editor pages by selecting the image > going to the General tab > Click “Optimize", and the image will be optimized automatically.

Version Updates

With the release of PageFly version 4.15, we have enhanced the Media Manager to offer an improved experience. Key features include:

  • Access to Shopify's free image library, eliminating the need for extensive searches to find the perfect image.

  • Streamlined management of your uploaded media, enabling you to easily organize and track all images and videos in one centralized location.

  • An optimized image selection process with a more user-friendly modal interface, ensuring a smoother and more efficient workflow.

Additional Resources

Last updated

Was this helpful?