In this article, you will learn about Product list, a 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.
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.
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.
|Collection||Select 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|
|Reverse||Reverse 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|
|Columns||The number of columns you want to show in the product list|
|Layout||There are two options:
|Retina Image||Enable / Disable the retina display for image|
|Image Size||Featured image size. Unit is pixel, left input is the width and right is the height|
|Show Button||Show / Hide “Add To Cart” button. All the below fields are hidden if this is disabled|
|Click Action||There are two options for this:
|Redirect To Checkout||Enable / Disable function to redirect to checkout page after “Add To Cart” is clicked|
|Single Product Button Text||Text of normal product button|
|Variant Product Button Text||Text of variant product button|
|View Details Button Text||Text of view details button|
|Show Price||Show / Hide product price. All the below fields are hidden if this is disabled|
|Show Compare at Price||Show / Hide sales price|
|Regular Price||Select the color of the regular price|
|Compare At Price||Select the color of the sale price|
|Font Size||Font size of the prices|