Products (eCommerce)

Summary

The Products control is a main control used in the Products template. It displays a grid or list of products in eCommerce websites with some basic information on each of the products, which is helpful for customers to decide whether to open a product page for further review, or to add the product to the cart immediately.

Products in the Products control can be displayed in different ways - a full list of products, products for a specific category/subcategory, products in different order (sorted by criteria such as Price, Product Name etc.) and with various filters used (such as manufacturer, color, etc.). As a rule, site visitors can define most of these parameters to adjust the most convenient way to display the catalog of products for themself. All of the elements in the Products control design can be styled in Themler.

Usage

The Products control can be used on the Products template only. It cannot be added or removed as a control, because for output of this control, another control is responsible, which is different for each CMS.

For Wordpress or Magento, it is Content control. To add it, please navigate Insert >> Other >> Content. To remove the Products control, just remove the Content control from the template.

To add the Products control in Joomla, the Joomla Component control should be added via Insert >> Other >> Joomla Component. Remove Joomla Component control if you would like to delete the Products control from the template.

In PrestaShop, Hook Home control is responsible for output of the Products control. It can be added via Insert >> Other >> Hook Home, and the Products control will be output automatically. To remove the Products control, please remove the Hook Home control from the template.

The Products control includes a few controls which are output as a part of it. Most of them can be enabled or disabled optionally. These are Header, Category Name, Products Type, Products Sorter, Product Image, Product Text, Product Price, Product Buy, etc.

Styling

In the Property Window, you can style of different areas of the Products control.

The Products section allows you to style the entire Products control area.

The Header section is responsible for the title above the product grid/list (such as "ALL PRODUCTS" or a parent category name). It is possible to hide the Header using the "Show Header" option.

In the Categories section, it is possible, to adjust the view of Categories and Subcategories. Choose whether to display categories and subcategories in general using the option "Show Categories". In Joomla, Wordpress and PrestaShop you can also show or hide categories or subcategories separately using the options "Show Category" or "Show Subcategory" respectively. Categories and subcategories can be styled separately as well.

The Grid section allows you to edit the area with products. By default, the Products control uses Grid mode for displaying products, in which case the products are arranged in rows and columns.

List mode is another way of displaying products in the Products control. The List mode can be selected instead of the Grid mode in the CMS back-end (as a rule, in Products page settings).

The number of columns and other styles of the item, separators and icon for the Grid or List mode can be defined by opening the Products control >> Grid >> Grid mode / List mode tab in the Property Window.

Sample

### Summary The **Products control** is a main control used in the [Products template](page:5678). It displays a grid or list of products in eCommerce websites with some basic information on each of the products, which is helpful for customers to decide whether to open a product page for further review, or to add the product to the cart immediately. Products in the **Products** control can be displayed in different ways - a full list of products, products for a specific category/subcategory, products in different order (sorted by criteria such as Price, Product Name etc.) and with various filters used (such as manufacturer, color, etc.). As a rule, site visitors can define most of these parameters to adjust the most convenient way to display the catalog of products for themself. All of the elements in the **Products control** design can be styled in Themler. ### Usage The **Products** control can be used on the [Products template](page:5678) only. It cannot be added or removed as a control, because for output of this control, another control is responsible, which is different for each CMS. For Wordpress or Magento, it is [Content](page:4189) control. To add it, please navigate **Insert** >> **Other** >> **Content**. To remove the **Products** control, just remove the [Content](page:4189) control from the template. To add the **Products** control in Joomla, the [Joomla Component control](page:4031) should be added via **Insert** >> **Other** >> **Joomla Component**. Remove **Joomla Component** control if you would like to delete the **Products** control from the template. In PrestaShop, [Hook Home](page:4753) control is responsible for output of the **Products** control. It can be added via **Insert** >> **Other** >> **Hook Home**, and the **Products** control will be output automatically. To remove the **Products** control, please remove the [Hook Home](page:4753) control from the template. The Products control includes a few controls which are output as a part of it. Most of them can be enabled or disabled optionally. These are Header, Category Name, Products Type, Products Sorter, Product Image, Product Text, Product Price, Product Buy, etc. !products.png! ### Styling In the Property Window, you can style of different areas of the **Products** control. The **Products** section allows you to style the entire **Products** control area. The **Header** section is responsible for the title above the product grid/list (such as "ALL PRODUCTS" or a parent category name). It is possible to hide the Header using the **"Show Header"** option. In the **Categories** section, it is possible, to adjust the view of Categories and Subcategories. Choose whether to display categories and subcategories in general using the option **"Show Categories"**. In Joomla, Wordpress and PrestaShop you can also show or hide categories or subcategories separately using the options **"Show Category"** or **"Show Subcategory"** respectively. Categories and subcategories can be styled separately as well. The **Grid** section allows you to edit the area with products. By default, the **Products** control uses **Grid mode** for displaying products, in which case the products are arranged in rows and columns. **List mode** is another way of displaying products in the **Products** control. The List mode can be selected instead of the Grid mode in the CMS back-end (as a rule, in Products page settings). The number of columns and other styles of the item, separators and icon for the Grid or List mode can be defined by opening the **Products control** >> **Grid** >> **Grid mode** / **List mode** tab in the Property Window. ### Sample !products-control-styling.png! ### See Also [Products template](page:5678) [Product Details control](page:4776) [Products Shopping Cart control](page:4779) [Content control](page:4189) [Joomla Component control](page:4031) [PrestaShop Hook Home control](page:4753) [Adding Products to wooCommerce Themes (video)](page:3879)