(P) Image List element

In this article, you will learn about (P) Image List elements and how to use them to create highly converting pages.

What is (P) Image List Element? 

(P) Image List element is designed to demonstrate the photos of a particular Shopify product on your page to boost your conversion rate. You can use the Image List element to promote your products on non-product pages or to use it on a product page. Since (P) Image List element is a child element of the Product module, it should be located in a Product Module to work properly. 


You can quickly find this element on the left sidebar of the editor page.


Settings Tab's Parameters


  • Style: There are two options Default and Slider you can choose from. 

    • Default: It shows all available images of the products at once. 

    • When you select Default, you can change the dimensions of the images with Image Width and Image Height, and change the width between images with Image Spacing

    • Slider: It demonstrates images in a revolving carousel. 

    • After choosing the Slider style, there are more settings allowing you to customize the way you prefer. 

    • Columns: It lets you choose how many images to display on the slider. 

    • Dots Navigation and Next/Prev Buttons: You can use these features to navigate between images. 

    • Loop: The list of images will run continuously on a slideshow.

As the Loop feature only shows on the live Page then if you need to enable the feature, click on Publish and see it on Preview.
    • Spacing: It is to adjust the width between images. 



    • Enable Lightbox: After turning on the feature, when you click on an image, it will show in full size of the image in a pop-up.

    • Lightbox icon: You can turn on or off the magnifying icon of the Lightbox feature. 

Original size: It lets you adjust the size of the images on the list.


Active Border: You can change the color of the border around the images.


Extra class: If you wish to customize one element particularly, please use this field to add a class name and then refer to it in the CSS file.


The Most Common Inquiries Of (P) Price Element

How to add support video on (P) Image list?

    • Step 1: Go to Shopify admin> All product> Select the product you want to add a video > Locate Media section. 


    • Step 2: You can upload the video from your computer by clicking on Add media or adding a Youtube link in Embed Youtube video. 

    • Step 3: Go back to Gempage editor, remove the old (P) Images List element and replace it with a new one> Save and Publish. 
The support videos only show on Preview or live pages and, it's hidden on the editor pages.

Create a carousel of images on the mobile version.

    • Step 1: Click on the (P) Image> On the left sidebar, choose Design> Visibility> Turn off Show on Mobile (This step will hide the (P) Image element on mobile version ).


    • Step 2: Change the editor page into the Mobile version. 

    • Step 3: Click on the Product List element> In the Style section, choose Slider and move the Adjustment bar down to 1.

    • Step 4: Click  Save and Publish

Change the order of the image on (P) Image List.

As Product module and (P) Image List elements extract the real-time product's information from Shopify Admin, you need to go to your Shopify Admin and update the price over there.

    • Step 1: Go to Shopify Admin > Products > All Products > Select the product you want to make the changes > Locate to the Media section

    • Step 2:  Arrange the images into the order you want > Save



That's all with (P) Image List element. Since images are a powerful communication tool of a website, getting the best out of (P) Image List element is an effective way to attract attention, elicit emotion, and build trust with your visitors. 

Was this helpful?