PageFly - Shopify elements - Product list

101 views Anh 0

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.

Where Product list element located

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.

General tab configuration of Product list element

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.

FILTERS
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
SETTINGS
Columns The 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 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
BUTTON
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:

  • 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 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
PRICES
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