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