Display product images with the (P) Image element

In this article, you will learn about the (P) Image element and how to use it.

What is a (P) Image element?

First of all, an image plays a very important role in every E-Commerce store nowadays as it brings the first impression to your customers. It becomes one of the determining factors for your E-Business success.


Understanding this point, GemPages designed and released the (P) Image element which aims to display the main image of a specific product. That will enhance the product description and possibly boosts your sales right from the beginning of the purchasing process.


The (P) Image element can be found in the left sidebar dashboard on the Gem editor page.
(P) Image is a child-element of the Product module, which means you will need to drag this element into a Product module to make it work.

Settings Tab's Parameters

  1. Effect: This feature allows you to choose the image effect among Default, Zoom, and Hover.

    • Default: Remain the default product image, no visual animation added
    • Zoom: Add touch-to-zoom effect to the product image
    • Hover: Display the chosen product image on hover

  2. Dimension: This allows you to manually adjust the image's width and height by entering the specific values into the box(es).

As you can see, this parameter contains a symbol on the top right corner, which means we are able to adjust the setting for one or more specific devices without affecting the rest.
  1. Alignment: This parameter allows you to determine how the image is positioned within the description box. The three primary types of text alignment include left-aligned, centered, right-aligned.

  2. Product Image

    • Display: This feature allows you to decide which one should be the main display image: the first available variant image, or the First image from Shopify's admin panel.

    • Original Size: You are able to choose the real dimension of your product image
Please kindly note that high image size can cause a slower loading speed.
  1. Product Link: Redirect the customers to the corresponding product detail page after clicking on the product image.

  2. Extra Class: If you wish to customize the image element in a particular way, kindly use this field to add a class name and then refer to it in the CSS file.

The most common inquiries of (P) Image element

  1. How can I change the first image displayed on GemPages?
    • Currently, GemPages only supports directly changing the main display image between the first available variant image and the first image from Shopify's admin panel. In case, you are not able to find this functionality, please remove the current (P) Image element and drag a new one to your Product module.

    • If none of them meet your requirements, kindly can go to your Shopify admin panel and re-order the preferred images to the first position, then come back to GemPages and choose the First image from Shopify admin in the Display box.

The (P) Image element is all set now. If you're interested in learning more about the powerful & user-friendly GemPages, please feel free to figure out more articles here or reach our Support Team. We'd be happy to answer any questions you have.

Was this helpful?