PageFly - Shopify elements - Product list

2416 views 0

In this article, you will learn about Product lista widely loved Shopify element.

About Product list element

In brief, Product list can present a list of products, or a collection, on your page to increase conversion rate.

Above all, you can use Product list element to up-sell and cross-sell your products. Imagine this: you are selling a great product and it works well with some related products too. As a result, using Product list empowers your sales strategy.

Where Product list element located

Product list element comes with 3 variations, covering most needs. Even so, we will add more options soon to help explore more choices.

To start, drag a variation to the Editor and let’s see how it works.

Product list element setting

Product list element comes with plenty of variables, letting you polish the content design to reach the best conversion rate possible.

Now, select the element in the layout to see its variables.

General tab configuration of Product list element

The variables in General tab are specific for this element.

However, those in Styling and Advanced tabs are common for all elements. Read about them here.


CollectionSelect the collection that you want to display in the product list. The order of your products on the live version of the page will be based on the order of the products in your Shopify Admin > Products > Collections > The collection that you picked
Limit The number of products you want to show
ReverseReverse the order of the products that you choose to show in Limit field. This will not reverse the order of all the products in the collection you picked


ColumnsThe number of columns you want to show in the product list
Layout There are two options:

  • Vertical: The product featured image will display above the product description
  • Horizontal: The product featured image will display beside the product description
Retina ImageEnable / Disable the retina display for image
Image SizeFeatured image size. Unit is pixel, left input is the width and right is the height


Show ButtonShow / Hide “Add To Cart” button. All the below fields are hidden if this is disabled
Click Action There are two options for this:

  • Add To Cart: when this option is selected, the following settings displayed: Redirect to Checkout, Single Product Button Text, Variant Product Button Text
  • View Details: when this option is selected, the following setting is displayed: View Details Button Text
Redirect To CheckoutEnable / Disable function to redirect to checkout page after “Add To Cart” is clicked
Single Product Button TextText of normal product button
Variant Product Button TextText of variant product button
View Details Button TextText of view details button


Show PriceShow / Hide product price. All the below fields are hidden if this is disabled
Show Compare at PriceShow / Hide sales price
Regular PriceSelect the color of the regular price
Compare At PriceSelect the color of the sale price
Font SizeFont size of the prices

Was this helpful?