The Product List Page Template is used to output products to your website. It contains the Product List Element, which outputs the Product List from the Products Panel, WooCommerce, or VirtueMart.

IMPORTANT! You cannot edit this Template directly in WordPress or Joomla. Please install the Desktop Application, then export and import the Theme and Content if needed.

product-list-template.png

Add Products

By default, you see the placeholder images for Products.

product-list-template-default.png

You can add actual products to the Products Panel, which you can see on the Template page, and export them later for WordPress and Joomla.

edit-products.png

You can see the actual products from the Panel in the Product List Page Template Editor.

actual-number-products.png

To show the Products on a website, you can link the Product List Template as a Page in the Link Settings of the Menu.

products-in-menu.png

You can build the Menu and Submenu items from Product Pages like the following.

menu-links-products.png

Add a new Menu Item linking it to the Product List to display Products.

  1. Open the Edit Menu dialog.
  2. Add a new Item to edit.
  3. Select Page in the Link Settings.
  4. Select the Product List for the Page.
  5. Enter any Caption, like "Purchase," "Store," "Shop," etc.

menu-page-product-list.png

Open Product List Template

You can open the Product List Template from the Templates Panel of Quick Access.

open-product-list-template.png

Block Presets For Product List Template

You can apply the Style Presets to the Block on the Product List Template.

product-list-template-presets.png

Add Elements to Product List Template

Insert new Elements to the Product List Template Column by clicking the Plus icon and selecting them from the list of the Add Panel. Like in the Grid Repeater Element, the same Element is automatically added to all columns.

add-elements-product-list-template.png

Please read more about the available Product Elements.

Product Button On-Click Property

You can set the following actions for the Product button.

  • Go To Product Page - opens the Product Details page corresponding to the selected Product.
  • Buy Product - opens the Payment Popup, for example, PayPal.

product-button-option.gif

Please read about how to use the Payment Button Element.

Add Categories To Product List Template

You can add the Categories Element to the top of the Product list.

  1. Open the Add Panel with the selected Product List Template section.
  2. Selelct the Categories Element.

add-category-filter-products.png

Product Filters In Sidebar

You can enable and stylize the Product Filter Elements in the Sidebar for the Product List Template shown on your websites.

NOTE: This functionality is not supported in Joomla out of the box.

filter-sidebar-products.png

Pagination And Sorting On Product List Template

You can enable the Pagination and Sorting Elements for the Product List Element on the Template in the Property Panel.

product-list-pagination-sorting.png

Export Product List Template With Products

IMPORTANT! To export and then import the Product List Template to your website, check the Include E-Commerce Templates checkbox in the Publish and Export Dialog.

Additionally, you can export Products by checking the Include E-Commerce Products checkbox below.

export-dialog-product-list-template.png

You can choose the Product List Page in the Edit Link dialog in WordPress.

product-list-wordpress.png

In Joomla, you can select the Product List Page and an individual Product in the Edit Link dialog.

product-list-joomla.png

Product List Live View

After installing the WordPress Theme or Joomla Template, open the Shop on your website to see the Product List Template's output.

view-product-list-website.png

The Product List Page Template is used to output products to your website. It contains the [Product List Element](page:97480), which outputs the Product List from the Products Panel, WooCommerce, or VirtueMart. **IMPORTANT!** You cannot edit this Template directly in WordPress or Joomla. Please install the [Desktop Application](/download), then export and import the Theme and Content if needed. !product-list-template.png! ## Add Products By default, you see the placeholder images for Products. !product-list-template-default.png! You can add actual products to the Products Panel, which you can see on the Template page, and export them later for WordPress and Joomla. !edit-products.png! You can see the actual products from the Panel in the Product List Page Template Editor. !actual-number-products.png! ## Link Menu To Display Products To show the Products on a website, you can link the Product List Template as a Page in the Link Settings of the [Menu](page:82280). !products-in-menu.png! You can build the Menu and Submenu items from Product Pages like the following. !menu-links-products.png! Add a new Menu Item linking it to the Product List to display Products. 1. Open the Edit Menu dialog. 2. Add a new Item to edit. 3. Select Page in the Link Settings. 5. Select the Product List for the Page. 4. Enter any Caption, like "Purchase," "Store," "Shop," etc. ### !menu-page-product-list.png! ## Open Product List Template You can open the Product List Template from the Templates Panel of Quick Access. !open-product-list-template.png! ## Block Presets For Product List Template You can apply the **Style Presets** to the Block on the Product List Template. !product-list-template-presets.png! ## Add Elements to Product List Template Insert new Elements to the Product List Template Column by clicking the Plus icon and selecting them from the list of the Add Panel. Like in the [Grid Repeater Element](page:83204), the same Element is automatically added to all columns. !add-elements-product-list-template.png! Please read more about the available [Product Elements](page:107569). ## Product Button On-Click Property You can set the following actions for the Product button. - **Go To Product Page** - opens the Product Details page corresponding to the selected Product. - **Buy Product** - opens the Payment Popup, for example, PayPal. ### !product-button-option.gif! Please read about how to use the [Payment Button Element](page:425789). ## Add Categories To Product List Template You can add the **Categories Element** to the top of the Product list. 1. Open the **Add Panel** with the selected **Product List Template** section. 2. Selelct the **Categories** Element. ### !add-category-filter-products.png! ## Product Filters In Sidebar You can enable and stylize the [Product Filter Elements](page:107569) in the [Sidebar](page:131344) for the Product List Template shown on your websites. **NOTE:** This functionality is not supported in Joomla out of the box. !filter-sidebar-products.png! ## Pagination And Sorting On Product List Template You can enable the **Pagination** and **Sorting** Elements for the Product List Element on the Template in the Property Panel. !product-list-pagination-sorting.png! ## Export Product List Template With Products **IMPORTANT!** To export and then import the Product List Template to your website, check the **Include E-Commerce Templates** checkbox in the Publish and Export Dialog. Additionally, you can export Products by checking the **Include E-Commerce Products** checkbox below. !export-dialog-product-list-template.png! ## Link To Product List In WordPress You can choose the Product List Page in the Edit Link dialog in WordPress. !product-list-wordpress.png! ## Link To Product List In Joomla In Joomla, you can select the Product List Page and an individual Product in the Edit Link dialog. !product-list-joomla.png! ## Product List Live View After installing the WordPress Theme or Joomla Template, open the Shop on your website to see the Product List Template's output. !view-product-list-website.png! ##