(P) Image List element

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

Display

• 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.
  
  
  
  

• • Spacing: It is to adjust the width between images. 
    
     

Gallery 

• 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. 
  

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.