About Product List Element
What is Shopify Product List?
Shopify 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.
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.
Check this video tutorial to learn more about 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.
General Configuration
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 which are in the same collection as the custom product you chose before will be displayed.
Items per loading
Adjust the number of displayed items in one loading.
Due to the limitation set by Shopify, the Product List element can only show a maximum of 50 products. Learn more.
Layout type
There are 2 layout types for the Product List element to display
Grid layout
- Items per row: Adjust the number of items in a row
- Item spacing: Adjust space between items
- Loading mode:
This feature only works on the live page. Due to a limitation set by Shopify, only 50 products can be loaded at once. Learn more.
- None: this option is chosen by default.
- Pagination: this option will be displayed as the page’s numbers. This feature only works on the live page.
- Load more: this option will be displayed as a “Load more” button. This feature only works on the live page.
- 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.
Slideshow layout
- Items per show: Set the number of slides display on your banner (The value of items per show is always 1 unit smaller than the value of items per loading)
- Items to scroll: Set the number of slides will show up additionally after you click the navigation button (the maximum number depends on the amount of number of Items Per Show you’ve set above)
- Items spacing: Set the spacing between two slides
- Display partial items: Make the previous & next item(s) partially visible
- Navigation type: There are 5 different styles for the left/right arrow navigation button on the slide. You can choose None and navigate between slides by clicking on the pagination. Please note that some navigation options only appear on mouseover.
- Pagination type: There are 3 different styles for pagination
- Set max height: If enable, the slideshow’s height will match that of the highest slide, including those that are hidden.
- Vertical alignment: If you disable Set max height option, there are 3 alignment options of Vertical alignment for you to choose.
Styling Configuration
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 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.
Frequently Asked Questions
What is Shopify Product List?
Shopify Product List is to present a list of products on your Shopify Store, so the shoppers can scan through and make their decisions
Where are Shopify products listed?
You can find it in the Products area in Shopify, with a maximum of 50 products per page.