# Product List
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.
- Adding a basic Product List component to a page: Demo (opens new window) | Source Code (opens new window)
- A fully featured online store, which demonstrates how to connect a Product List with a Product and a Shopping Cart: Demo (opens new window) | Source Code (opens new window)
# 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:
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-type|| ||Must always be set.|
|data-reflow-layout|| ||(optional) Choose the layout of the product list. Currently products can be displayed as either cards or list (default).|
|data-reflow-page||page number||(optional) Choose which page of results to show. If not set, displays the first page. |
|data-reflow-perpage||results per page||(optional) How many products you wish to show per page. Defaults to 20.|
|data-reflow-category||id 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.|
|data-reflow-order|| ||(optional) Choose the display order of the products. Defaults to |
You can also perform multiple sorts by separating order clauses with commas:
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-search||string||(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. |
|data-reflow-product-link||URL||(optional) If set, this attribute wraps the product cards into links that point to the URL you've set. A special |
Check the Examples to see how you can link a Product List to a page with a Product component, to create fully functional listings.
|data-reflow-similar-to||id 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.
|data-reflow-addtocart-text||string||(optional) Redefines the "Add to Cart" button text, if set. |
|data-reflow-show|| ||(optional) Comma separated list of sections to display. The sections not in the list will be hidden. |