In this article, you will learn about another Shopify element called Product List.
About Product List element
The Product List is designed to present a list of products on your page in order to increase your conversion rate. You can use the Product List element to upsell and cross-sell your products. Imagine you are selling a product and you would like to sell additional products in the same collection. This element will empower your sales.
Before jumping to the details, you can watch this video below:
Access the Product List element
Step 1: Click on the 3rd icon in the Element Catalog which is the Add Shopify element function
Step 2: Click on the Product List element in the dropdown menu
Step 3: Drag and drop the element into the page editor and then start using it.
Note that you can search this element by using the search function instead of finding it in the sidebar.
In the 3.4.0 version, we have built the Loading function and brought forth a better-looking loading status design.
Product List element configuration
The Product List element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
Select the element in the layout to see its parameters.
General configuration
CONTENT | |
Product Source: you can choose one of three options below:
| ![]() |
Items per Loading: adjust the number of displayed items in one loading. Note that you can only show a maximum of 20 products. This is limited by Shopify. | ![]() |
Items per Row: adjust the number of items in a row. | ![]() |
Items Spacing: adjust space between items. | ![]() |
Loading mode:
| ![]() |
Exclude current product This option is to exclude the product that is currently showing in the product page. Note that this feature only works on Product Page. | ![]() |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.
Styling configuration
OVERALL
Content Color:
- The color you choose will be applied for other elements such as Product Title and Product Price.
- To select the specific color for these elements, click into the elements and then also custom color in the Styling tab.
You can get further information about SPACING, TYPOGRAPHY, BACKGROUND, BORDER, DISPLAY, CUSTOM CSS parameters
Device sensitivity
The Product List element was created to display well on all devices including Laptop, Tablet, and Mobile. You can see how it displays by going to the Device Switcher in the top menu > select the devices you want to see. Let’s see an example below
You can see when switching to the laptop and tablet devices, the items per row are all 4 by default, but in the mobile device, the items per row are automatically set for 2 items. And this automation makes the mobile view more clear. You can change the number of items per row and items per loading for each device you want.
Important note:
To change the Product Order in a Product List, you can see this video below