How to use the 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. 

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



A high-converting web design is a 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. That's all! Kindly check out Product List Element's Common Inquiries for more details or get in touch with our customer support team for further assistance. 

Was this helpful?