About Product List Element
Summary: The Product list element is designed to show a curated list of products on your store pages. This element enhances your product presentation, making it easier for customers to browse and shop. Whether you want to showcase best-sellers, new arrivals, or specific product categories, the Product list element provides flexible customization options.
This article will guide you through the steps to effectively use the Product list element in PageFly. Check this video tutorial to learn more about Product list element:
How To Access The Product List Element
- Step 1: Click on the “Elements” icon > Then, in the “Shopify” tab choose the Product list
- Step 2: Drag and drop the desired Product list variant into the page editor
How To Configure For Product List Element?
The Product list element offers a variety of parameters to optimize appearance for the best possible conversion rate. Select the element in the layout to view its settings.
General Settings
Product Source
| All Products: Display all products in your store.
If you are working on a collection page, you can set the Product source to Auto. The product list displayed will be from the collection assigned to that page. |
 |
| Custom Collection: Allow you to select a specific collection to display.
If you choose this option, scroll down and click the Select Collection button to choose the collection you want to source products from. |
 |
| Related Products: Give you an option to choose a custom product, and the related products within the same collection as the selected product will be displayed
If you choose this option, scroll down and click the Select Product button to choose the product you want to source related items from. |
 |
Items Per Loading
Adjust the number of items displayed per loading. Due to Shopify’s limitations, the Product list element can show a maximum of 50 products at a time. You can check more information here.
Layout Type
The Product list element can display the list of products in two layout types: Grid and Slideshow.
- With Grid Layout: It arranges products in a structured grid format, making it easy for customers to view multiple items at once. Check its configuration options below:
| Items per row: Adjust the number of items displayed in each row. |  |
| Fill last row: If you turn on this option, the elements in the last row will take up the entire width of that row. |  |
| Alignment: Specify the position for the item inside Product list element.
Note: If you enable Fill last row, then Alignment won’t function |
 |
| Item spacing: Adjust space between items. |  |
Loading mode: There are 3 options available
Note: This feature only works on the live page. Due to Shopify’s limitation, only 50 products can be loaded at once. |
 |
| Exclude Current Product: This option excludes the product currently being viewed on the product page from the product list. Note that this feature only works on the Product Page. |  |
- With Slideshow: It arranges products in a sliding banner format, allowing customers to browse through items one at a time, often with animation effects. Check its configuration options below:
| Items Displayed: Set the number of slides displayed at a time.
|
  |
| Items To Scroll: Configure the number of slides that will scroll when you click the navigation button.
The value of Items displayed above is the maximum number of Items to scroll |
 |
| Items Spacing: Adjust the spacing between slides.
|
 |
| Display Partial Items: Enable this option will make the previous and next items partially visible. |  |
| Navigation Type: There are 5 different styles for the left/right arrow navigation buttons. You can also choose “None” to hide those buttons.
Note: On desktop and laptop, some options only appear on mouse over |
 |
| Pagination Type: There are 3 different styles for pagination indicators.
|
 |
| Set Max Height: If enabled, the slideshow’s height will match that of the highest slide, including hidden slides.
|
 |
| Vertical Alignment: If “Set Max Height” is disabled, choose from 3 vertical alignment options to align the slides as desired. |  |
Styling Settings
You may modify a range of parameters in the Styling tab, such as element size, spacing, borders, typography, colors, and more, to guarantee that the Product list element matches the overall layout of your page.
You can check more information about the Styling tab here.
Tips And Best Practices
- Showcasing Best-Sellers: Highlight your most popular products to attract more customers.
- Featuring New Arrivals: Draw attention to the latest additions to your store.
- Seasonal Promotions and Sales: Promote discounted items or special offers to boost sales.
- Category-Specific Listings: Display products from a specific category for easier navigation.
Frequently Asked Questions
1. How do I display only specific products in the Product list?
To display only specific products in the Product List, you should create the desired collection in Shopify first by going to Shopify > Products > Collections > Click on the button “Create collection”. Then, use the Custom Collection option in the Product Source section to choose and display products from that specific collection.
2. Can I change the product order in the Product list element?
Yes. To change the product order, access the relevant collection on Shopify > In the Products section, choose to sort products manually, and rearrange the products as desired. The new product order will automatically apply to the Product list in PageFly editor.
Check this video tutorial for detailed instructions: How to change Shopify Product Order in the PageFly Product List.
3. Can I show different products on mobile and desktop views?
Yes, you may display and conceal the various products on various devices using the Visibility feature.
4. How do I customize the appearance of the Product List?
You can adjust various styling options in the Styling tab, such as spacing, borders, typography, colors to match your store’s design.
Previous article