Shopify elements - Product List

2818 views Linh 1

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.
Note that you can search this element by using the search function instead of finding it in the sidebar.

pagefly product list element

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.
shopify elements product list

General tab’s parameters
1. CONTENT
  • Product Source: you can choose one of three options below
    • All: display all products of stores
    • Custom Collection: choose a collection you want to display
    • Related product (s): choose a custom product you want, then the related products to the custom product you chose before will be displayed
  • Items per Loading: 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 per Spacing: adjust space between items
2.ATTRIBUTESThis is a parameter that all elements have. You can read more here.
3. VISIBILITYThis is a parameter that all elements have. You can read more here.
4. ANIMATIONThis is a parameter that all elements have. You can read more here.
  • Loading more: (this feature is new from version 2.8.0): This feature (in the CONTENT parameter) provides different ways to show your products. This also helps your customers actively see all your products.
      • None: this option is chosen by default. The total displayed products will be based on the number of items per loading you set up above. For example, your store has 100 products, and you set 4 products for Item per loading option, then it will show 4/100 products.
      • Pagination: this option will be displayed as the page’s numbers. In the editor, you can see like the image below

pagefly product list 2

The displayed products on your page also will be based on the Item per loading you set above Customers can click on these numbers to see other products. 

Remember that this feature only works on the live page. Here is the demo:

    • Load more: this option will be displayed as Load more button. In the editor, you can see like the image below

The displayed products on your page also will be based on the Item per loading you set above. Customers can click on the Load more button to see other products. 

Remember that this feature only works on the live page. Here is the demo:

Styling tab’s parameters
1. OVERALL
  • Content Color: the color you choose will be applied for other elements such as
    • Product Title
    • Product Price

To select the specific color for these elements, click into the elements and then also custom color in the Styling tab.

Note that if you style for the product list, then the page’s numbers of Pagination and Load more text of Load more button in Load more feature also are overwritten too.
For example, if you set the violet color in the CONTENT parameter, then the page’s numbers or load more text are violet too.

You can read about the OVERALL parameter here.

2. SPACINGYou can read about the SPACING parameter here.
3. TYPOGRAPHYYou can read about the TYPOGRAPHY parameter here.
4. BACKGROUNDYou can read about the BACKGROUND parameter here.
5. BORDERYou can read about the BORDER parameter here.
6. DISPLAYYou can read about the DISPLAY parameter here.
7. CUSTOM CSSYou can read about the CUSTOM CSS parameter here.

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.

Was this helpful?

Start your free 14-day trial
of PageFly

.myshopify.com
Don’t have Shopify store yet? Create store
×