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: On the left menu of the PageFly editor, click the “Element” button and switch to the Shopify tab to display the list of Shopify elements.
- Step 2: Click on the “Product List” element from the list.
- Step 3: Drag and drop the variant you want into the page editor and start customizing it.
How To Configure For Product List Element?
You can customize the Product List element by clicking on it and navigating to the General and Styling tabs.
General Settings
Product Source
You can choose from three options for the product source:
- All Products: Display all products in your store.
- Custom Collection: Select a specific collection to display. If you choose this option, scroll down and click on “Select Collection” to choose the collection you want to source products from.
- Related Products: 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 on “Select Product” to choose the product you want to source related items from.
Note: 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.
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. Learn more about it here.
Layout Type
The Product List element can display products in two layout types: Grid and Slideshow.
- Grid Layout: Grid layout 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.
Item spacing: Adjust space between items.
|
 |
Loading mode: 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. |  |
- Slideshow: Slideshow layout 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. The maximum number of items displayed is 3.
|
 |
| Items to Scroll: Set the number of slides that will scroll when you click the navigation button. The maximum number depends on the number of items displayed set above. |  |
| Items Spacing: Adjust the spacing between slides.
|
 |
| Display Partial Items: Enable this to make the previous and next items partially visible on the sides of the slideshow. |  |
| Navigation Type: Choose from 5 different styles for the left/right arrow navigation buttons. You can also choose “None” to navigate between slides by clicking on the pagination. Note that some navigation options only appear on mouseover. |  |
| Pagination Type: Select from 3 different styles for pagination indicators.
|
 |
| Set Max Height: If enabled, the slideshow’s height will match the tallest 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 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
Border
You can choose whether to keep/remove a border for each product’s details in your product list using the Border setting. Consider changing the border style for a more defined look or removing it for a cleaner design.
You can get further information about other settings in the Styling tab such as Spacing, Typography, Background, Display, Custom CSS parameters here.
Common Cases
- 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
- 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.
- Can I change the product order in the PageFly Product List?
Yes, you can. To change the product order, access the relevant collection in Shopify. Navigate to the Products section, choose to sort products manually, and rearrange the products as desired. The changes will automatically apply to your PageFly Product List. Check this video tutorial for detailed instructions: How to change Shopify Product Order in the PageFly Product List.
- Can I show different products on mobile and desktop views?
Yes, you can use the Visibility settings to hide or show products on different devices.
- How do I customize the appearance of the Product List?
You can adjust various styling options in the Styling tab, such as layout, spacing, and colors, to match your store’s design.
Previous article