Product list

1 Product List Widget

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.