Product list

To show product list on home page, you can use product filter widget.

In the main content builder HTML (or in the cms block content, cms page content,...), you can insert Habi Product List widget.

For example, in the main content builder, you can open the Wisiwyg editor:

Then you can insert a new widget or edit an existed widget by double clicking it.

This is the options panel of Habi Product List widget:

In this panel, you will see the field below:

	Field	Description
1	Filter by ids	Manually filter: The string of product IDs separated by comma (,). The products having ID in this string will be shown on the list with the corresponding order. E.g.: If you enter 23,11,22,6,92,91, the list of products having IDs one by one 23,11,22,6,92,91 will be shown on the product list.
2	Filter by custom conditions	The list of available conditions that you may use for filtering the items on your product list. E.g.: Filter products by category:
3	Number of Products to Display	The maximum number of items will be shown on your product list.
4	Order by	The sort order of the items on your product list (sort by name, price or product id).
5	Order direction	Sort order direction: ASC or DESC.
6	Display on list	Select the parts belonging to a product that you want to show: image (small image), hovered image (thumbnail), product name, product sku, product price, product review, add-to-cart button, wish-list button, quick-view button, compare button, product label, product description,...
7	Description characters count	The maximum characters of product description. If the product description length is longer than this value, the over-text will be cut down and be replaced by an ellipsis.
8	Thumbnail width	The width of product thumbnail on the list.
9	Thumbnail height	The height of product thumbnail on the list
10	Style	Product list style. Now, there are 15 pre-built styles available. This number will be raised in the further versions of our theme.
11	Custom template	If you want to use an own template for the product list instead of using our pre-built templates, you can enter your custom template file into this field. E.g., if your own file is: app/design/frontend/Habi/flexmarket/default/Habi_ThemeBuilder/templates/widget/product_list/my-custom-list.phtml Please enter Habi_ThemeBuilder::widget/product_list/my-custom-list.phtml.
12	Total rows	The item rows number of product slider, only used for some list styles.
13	Load by ajax	The product list HTML will be loaded by ajax after the DOM is loaded.
14	Load more button	Add Load more button under product list. When you click it, all items of the next page will be loaded and be added into the current product list.
15	Show as slider	Display product list as a slider.
16	Show slider dots	Show the pagination dots of product slider.
17	Show slider arrows	Show the control buttons of product slider
18	Slider autoplay	If set Yes, the product slider will be played automatically.
19	Autoplay timeout (milliseconds)	The display duration of a slide when you enable "Slider autoplay".
20	Item margin	The gap between two items on the product list.
21	Others	The number of product items per row/slide corresponding to each window screen: ≥ 1900; ≥ 1600; ≥ 1420; ≥ 1280; ≥ 980; ≥ 576; ≥ 320; ≥ 0.