Skip to main content

Product List

The Product List component renders a collection of products in a list with optional pagination. You can filter the list to show only products from a specific category, change the ordering and select different layouts.

Examples​

  • Adding a basic Product List component to a page: Demo | Source Code
  • A fully featured online store, which demonstrates how to connect a Product List with a Product and a Shopping Cart: Demo | Source Code

How to Embed​

To embed this component on your website and display a list of products, include the reflow library, and add the following tag somewhere in the <body> of your page:

<div data-reflow-type="product-list"></div>

This will display all products in your store in a paginated list. To change how many products to show, the display order and which category to limit the results to, use the attributes from the next section.

Supported Attributes​

You can configure the product list and change the way it's rendered by specifying additional data-reflow-xxx attributes.

AttributePossible ValuesDescription
data-reflow-typeproduct-listMust always be set.
data-reflow-layoutlist, cards

(optional) Choose the layout of the product list. Currently products can be displayed as either cards or list (default).

Example: data-reflow-layout="cards"

data-reflow-pagepage number

(optional) Choose which page of results to show. If not set, displays the first page.

Example: data-reflow-page="2"

data-reflow-perpageresults per page

(optional) How many products you wish to show per page. Defaults to 20.

Example: data-reflow-perpage="15"

data-reflow-categoryid of category to show

(optional) Set this parameter if you wish to show products only from a specific category and its subcategories. You can obtain the category id from the Reflow website.

Example: data-reflow-category="12345678"

data-reflow-order

name_asc, name_desc, price_asc, price_desc, date_asc, date_desc, custom_asc, custom_desc

(optional) Choose the display order of the products. Defaults to date_desc - products will be shown newest to oldest.

Example: data-reflow-order="price_desc"

You can also perform multiple sorts by separating order clauses with commas:

Example: data-reflow-order="custom_desc,name_asc"


This sorts products by using the Custom Sort number (which you enter in the product edit page), and then by name from A to Z. The result is that products with Custom Sort > 0 show before the rest.

data-reflow-searchstring

(optional) If set, the product list will display only products that contain the search string in their titles. This enables the product list to be combined with Product Search to construct a simple search page.

Example: data-reflow-search="curtains"

data-reflow-product-linkURL

(optional) If set, this attribute wraps the product cards into links that point to the URL you've set. A special {id} or {handle} placeholder can be used, which will be replaced with the product id or handle respectively.
Check the Examples to see how you can link a Product List to a page with a Product component, to create fully functional listings.

Examples:

data-reflow-similar-toid of a product

(optional) Populates the product list with products similar to the given product id.
At the moment these are products that share one or more common categories with the given one. Over time we will enhance the algorithm to give more relevant suggestions.ant suggestions.

Example: data-reflow-similar-to="123456789"
data-reflow-addtocart-textstring

(optional) Redefines the "Add to Cart" button text, if set.

Example: data-reflow-addtocart-text="Add to Basket"

data-reflow-shoppingcart-urlURL

(optional) The URL of a page where a Shopping Cart components is located.
If this is set, when customers add the product to their cart, they will see a button that brings them to their shopping cart so they can complete the checkout.

Examples:

data-reflow-show

image, name, excerpt, price,
add-to-cart, pagination

(optional) Comma separated list of sections to display. The sections not in the list will be hidden.

Example: data-reflow-show="image,name,price"