PageFly - Shopify elements - Product list

489 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.

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