Showcase and Customize Products with Shopify Product List

Table of Contents

1. Introduction
2. Adding the Shopify Product List Element
   1. Accessing the Product List Element
   2. Displaying the Product List
      1. Showing All Products
      2. Showing Products from a Specific Collection
      3. Showing Related Products
   3. Customizing the Product List
      1. Adjusting the Number of Products Shown
      2. Choosing the Loading Mode
      3. Changing the Color of the Load More Text
      4. Adjusting the Number of Items in a Row
      5. Adjusting the Spacing Between Items
3. Customizing the Product Image Element
   1. Setting the Media List
   2. Adjusting the Size of the Main Image
   3. Customizing Product Elements
4. Styling the Product List
   1. Changing the Content Color
   2. Adding or Deleting Product Elements
   3. Adding a View Details Button
5. Mobile View Optimization
6. Changing the Product Order in the Product List
7. Conclusion

Adding the Shopify Product List Element

In this article, we will guide you through the process of adding the Shopify product list element to your PageFly pages. The product list element is a powerful tool that allows you to showcase a list of products on your page, enabling you to upsell and cross-sell specific collections of products.

Accessing the Product List Element

To access the product list element, simply navigate to the left toolbar of the PageFly editor and click on "Add Shopify Element." The product list element is the first option available.

Displaying the Product List

When adding the product list element, you are presented with three options for displaying the element. You can choose to show all products, products from a specific collection, or related products.

Showing All Products

If you want to display all the products in your store, simply choose the "All" option in the product source parameter.

Showing Products from a Specific Collection

To display products from a specific collection, select the "Custom Collection" option in the product source parameter. You can then choose the collection you want to showcase by clicking on the select button.

Showing Related Products

If you want to show products that are from the same collection as the chosen product, select the "Related Products" option in the product source parameter. You can then select the specific product you want to base the collection on.

Customizing the Product List

Once you have added the product list element and determined the product source, you can customize the way the product list is displayed.

Adjusting the Number of Products Shown

You have the option to change the number of products shown on your page. Please note that the maximum number of products that can be shown for the product list element is 50.

Choosing the Loading Mode

To enhance the user experience, you can choose between pagination or load more options. The pagination option displays page numbers that customers can click on to navigate through the products. The load more option displays a "Load More" button that customers can click on to view additional products.

Changing the Color of the Load More Text

By default, the color of the load more text cannot be changed through the styling tab. However, you can utilize custom CSS to modify the color. Simply inspect the load more text container, copy the class, and add the appropriate CSS code in the custom code editor.

Adjusting the Number of Items in a Row

To ensure that the product details are displayed clearly, it is recommended to have between two to four items per row. You can adjust the number of items per row using the "Items per Row" option.

Adjusting the Spacing Between Items

If you want to customize the spacing between items in the product list, you can do so using the "Item Spacing" option. This allows you to create a visually appealing layout for your products.

Continue reading the full article on our PageFly blog.

Highlights

• Learn how to add the Shopify product list element to your PageFly pages.
• Showcase a list of products on your page for upselling and cross-selling.
• Choose to display all products or specific collections.
• Customize the product list's appearance, including the number of products shown, loading mode, and item spacing.
• Optimize the product image element and customize product elements.
• Style the product list to match your brand.
• Ensure a seamless mobile view experience.
• Change the product order within the product list.
• Enhance your Shopify store with PageFly's powerful page-building capabilities.

FAQ

Q: Can I display all the products in my store using the product list element? A: Yes, you can choose the "All" option in the product source parameter to display all products in your store.

Q: How can I customize the appearance of the product list? A: You can adjust the number of products shown, choose the loading mode, change the color of the load more text, adjust the number of items in a row, and customize the item spacing.

Q: Can I add a button to each product detail in the product list? A: Yes, you can utilize the product view details element to add a button linked to the corresponding product page.

Q: Can I change the product order within the product list? A: Yes, you can change the product order by following the instructions provided in our video tutorial, which can be found in the description of this article.

Q: Does PageFly offer mobile optimization for the product list? A: Yes, PageFly ensures that your product list is automatically optimized for mobile devices, with the option to manually adjust the items per row for a clearer mobile view.