Display multiple layouts with the (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

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.



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. 

       

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.

 

 

 

That's all with the (P) Image List element. Since images are a powerful communication tool of a website, getting the best out of the (P) Image List element is an effective way to attract attention, elicit emotion, and build trust with your visitors. Kindly check out this article to know how to Create The Product Images Carousel On The Mobile Version.


Was this helpful?