Shopify elements - Product Image

This element is available on all PageFly plans

In this article, you’ll learn about another Shopify element named Product Image. This element is a new one of PageFly version 2.10.0. Basically, this new Product Image element has many common parameters with the old Product Image element but this new element has more options. Check this article to know the changes.

About Product Image element

The Product Image element is designed to display images of your Shopify products on your page to increase your conversion rate. You can use the Product Image element to promote your products on any non-product page or use it on a product page

Note that you can search for this element by using the search function instead of finding it in the sidebar.

pagefly product image element

Product Image element comes with three common variations but we will continue to add more variations to help you save time.

Drag a variation to layout and see how it can be configured.

Product Image element configuration

Product Image element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

Select the element in the layout to see its parameters.

When you drag and drop the Product Image element into the editor page, there are 2 choices for the Product Source option for you to choose from:

  • Auto
  • Custom Product

Note that if you are in the Product Page and use the Product Image element, then you can choose the Product Source option. However, if you are in a Regular Page and use this element, the Product Source option is disabled and the Custom Product chosen by default.

In Product Page, if you choose Auto, the product that was assigned to this page through Page Assignment will be displayed in the page editor.

You can choose Custom Product and select the product you want.

General tab’s parameters
1. CONTENT
  • Default Image Source: There are 2 options to choose to display the product image such as:
    • Featured Image
    • First Variant Image

You can check these products by going to Shopify admin:

  • Set Fixed Height: Enable this option if you want to adjust the height for the main product image. The maximum height is 2000px. 
  • Image Hover Action: There are 3 options for you to choose if you want the image can be hover or not
    • None: Choose this option if you don’t want the product image to be hover.
    • Enable Image Magnifier: Each image list of the product image will be magnified when you hover on each of them. You can see the demo below

    • Show Hover Image: When mouse over on the product image element, the hover image will replace the default image after 0.3s delay. There are 4 types of hovering to select
                  • Next Image: Show the next image of the featured image. 
                  • Last Image: Show the last image of the featured image.
                  • Random Image: Show random an image of the featured image.
                  • All Images: Show multiple images when moving the mouse cursor on the product image. 

Note that Image hover action will NOT work on touch-based devices like tablets or smartphones.

  • Image Click Action: There are 3 options to choose when clicking on the product image:
    • None: Choose this option if you don’t want to have any change when clicking on the image.
    • Link to Product: Choose this option if you want to link the image to the corresponding product.
    • Show Full-screen Image: Choose the option if you want to view full-screen with taps/clicks on the image.

You can see the demo below on the laptop

On the Mobile device, you can double-tap to zoom in the product image and double-tap again to zoom out.

You can swipe through images when the display image is not zoomed in.

  • Image Magnifier: Enable this option if you want to zoom in the image when hovering the mouse over.
  • Image List: There are 2 options to choose from such as Show and Hide image list. If you choose to show the image list
    • List Position: You can choose the position for the list with 4 choices: Top, Right, Bottom, and Left. 
    • List Layout: You can choose the layout for the image list and it will be displayed as 1 in 2 options: Slide and Grid.
    • Items per Slide: You can set up the number of items displayed in a column here. The maximum number is 12 items.
    • Items Spacing: You can adjust the spacing between the items here. The maximum spacing is 100px. 

If you choose to hide the image list, then there are no options with the image list for you. 

  • Show Badge: Enable this option if you want to show a badge on your product image
    • Badge Position: There are 4 positions for you to choose: Top Left, Top Right, Bottom Left, and Bottom Right.
2. TRACKING This is a place to set up:

  • Google Analytics event to your GA account. You can find out how to set it up here
  • Facebook Pixel when a customer clicks on the element. You can read more here.
3.ATTRIBUTES This is a parameter that all elements have. You can read more here.
4. VISIBILITY This is a parameter that all elements have. You can read more here.
5. ANIMATION This is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. SPACING You can read about the SPACING parameter here.
2. BACKGROUND You can read about the BACKGROUND parameter here.
3. BORDER You can read about the BORDER parameter here.
4. DISPLAY You can read about the DISPLAY parameter here.
5. CUSTOM CSS You can read about the CUSTOM CSS parameter here.

Nested elements configuration

Product Badge configuration

Select the Badge to set up options for it

product badge element

General tab’s parameters
1. CONTENT
  • Text: The Text box shows discounts or stock left of the product variant. You can also add custom content for that badge.

Note that the “Discount” and “Stock” are calculated based on the value of the selected product variant.

  • Apply Product Condition: There are 2 conditions to be applied:
    • Belongs to Collection(s): 
      • All Collections
      • Custom Collection(s): The badge is only shown when the product belongs to the selected collection(s).
    • Contain Tag(s): The badge is only shown when the product contains one of the defined tags.
2. ATTRIBUTES This is a parameter that all elements have. You can read more here.
3. VISIBILITY This is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. OVERALL  You can read about the SPACING parameter here.
2. TYPOGRAPHY  You can read about the BORDER parameter here.
3. BACKGROUND  You can read about the DISPLAY parameter here.
4. SPACING You can read about the CUSTOM CSS parameter here.
2. BORDER You can read about the BORDER parameter here.
3. DISPLAY  You can read about the DISPLAY parameter here.
4. CUSTOM CSS You can read about the CUSTOM CSS parameter here.

Image List Item

Select the Image list item to set up options

The parameters in the Styling tab for the Image List Item element include:

  • Header State: You can style for the 3 states of the header such as Normal, Hover, and Selected.
  • Border Style: You can choose one of 4 border styles for each state. Click on the More Settings button to set up the Border Width and Border Radius.

You can check the video tutorial below

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
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!
Languages