Product List element

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

What is the Product List Element? 

The Product List element is designed to display a list of products on your page in order to maximize the conversion rate of your store. You can use the Product List element to upsell and cross-sell products to your customers. For example, when a customer is looking at a specific product, you are able to introduce the other products which are of the same collection using the Product List element.


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


Settings Tab's Parameters

  1. Collection: You can choose the collection that you want to display by clicking Pick a Collection> select the collection you want. 

  2. Dynamic: When you enable this feature, the product list will be displaying the collections which have been assigned to the current page. 

Kindly be well-noted that the changes are solely applied on the live page and the current editor page still displays the collection you choose. 
  1. Products per Row: You can decide how many product items will be displayed on a row. 

  2. Number of Product: You can determine how many product items will be shown on the Product List element. 

  3. Spacing: It is to change the width between products. 

  4. Same Height: When you turn the button on, it will resize all the product images of the collection at the same height.  

  5. 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 Product List Element 

  1. How many products can I show on the Product List element? 
    You can show as many products as you like, as long as the number of products doesn't exceed Shopify's limit of 50 to maintain the efficiency and loading speed of your website. 

  2. How do I change the sort order for the products in a collection?
    You can change the order of the products from Shopify Admin

You may see that the alphabet order will be applied for products due to Shopify restriction on editor pages. However, in fact, the order will be set exactly like what you've made on Shopify Admin on Preview or Live page.
  1. What happens if I make changes on a (P) Image element of a product? 
    The changes will be applied to every product's (P) images.  

A high converting web design is the key to the success of any business. So leveraging the power of the Product List element is an important part of the web design journey. Even though, the article has provided a detailed description of the Product List element. However, if you have further questions, don't hesitate to contact our dedicated team. 

Was this helpful?