In this article, you will learn about another Shopify element namely Product list.
About Product list element
Product list is designed to present a list of products on your page in order to increase conversion rate. You can use Product list element to up-sell and cross-sell your products. Imagine you are selling a product and you would like to sell the other products in the same collection, this element will empower your sales.
Product list element comes with multiple variations covering most needs but we will continue to add more variations to help you save time.
Drag a variation to the layout and see how it can be configured.
Product list element configuration
Product list element comes with plenty of parameters allowing you to fine-tune content appearance reaching the best possible conversion rate.
Select the element in the layout to see its parameters.
The parameters in General tab are specific for this element.
The parameters in Styling and Advanced tabs are common for all elements. Read about them in this article.
|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|