Shopify Product List | How to Create One with PageFly

About Product List ElementClick to copy

PageFly has introduced the Slideshow function for the Product List with the release of version 4.7.0.

What is Shopify Product List?Click to copy

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 elementClick to copy

  • 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.

Shopify Product List

Check this video tutorial to learn more about Product List element:

Product List Element ConfigurationClick to copy

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 Product List

General ConfigurationClick to copy

Product sourceClick to copy

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.

Shopify Product List

Please note that if you are working on a collection page, you can select the product source > auto. The product list displayed here will be from the collection that has been assigned to this page.

product source

Items per loadingClick to copy

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.

Shopify Product List

Layout typeClick to copy

There are 2 layout types for the Product List element to display

Grid layoutClick to copy
  • Items per row: Adjust the number of items in a row

Shopify Product List

  • Item spacing: Adjust space between items

Shopify Product List

  • 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.

Shopify Product List

  • 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.

Shopify Product List

Slideshow layoutClick to copy
  • 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)

Shopify Product List

  • 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)

Shopify Product List

  • Items spacing: Set the spacing between two slides

Shopify Product List

  • Display partial items: Make the previous & next item(s) partially visible

Shopify Product List

  • 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.

Shopify Product List

  • Pagination type: There are 3 different styles for pagination

Shopify Product List

  • Set max height: If enable, the slideshow’s height will match that of the highest slide, including those that are hidden.

Shopify Product List

  • Vertical alignment: If you disable Set max height option, there are 3 alignment options of Vertical alignment for you to choose.

Shopify Product List

Styling ConfigurationClick to copy

Content ColorClick to copy

  • 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 SensitivityClick to copy

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

Shopify Product List

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 QuestionsClick to copy

What is Shopify Product List?Click to copy

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?Click to copy

You can find it in the Products area in Shopify, with a maximum of 50 products per page.

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us