You can manage Products on the Products Panel and assign them to the Payment Button Element or output them into the Product List or Details page templates and elements.

Add Products

Click the Add Product button or Plus icon at the Panel's top to add a Product.

add-product.png

Default Products

There are default products for new websites for convenience. The Products Panel is not empty when creating a new website.

default-products.png

Manage Products

Click on the Element In the Product List and Details Elements to open the Edit Product dialog.

edit-product-click.gif

You can set the Old Price to the Product Dialog.

old-price-product-dialog.png

Product Images

You can add, order, and delete the Product Images in the Product dialog. The first Image is set as featured or default.

product-images.png

You can move Images in the Edit Product dialog.

move-product-images.gif

Currency List

We have added almost all the World's currencies to the Currency List. Now, you can find all currencies supported by Stripe.

If you use PayPal and a currency is not supported, the Products with such currencies will be disabled in the Shopping Cart.

currency-list-expanded.png

Currency Sign Position

For the British Pound, Japanese Yen, etc., we now support the correct position of the currency sign at the Price, Sum, and Total for all currencies.

currency-position.png

Assign Product

You can assign a Product in the Properties to the selected Payment Button in the Editor.

select-product.png

Product Sorting

You can sort Products by clicking the Sorting icon at the top of the Panel and choosing the Sorting Parameters from the list.

product-sorting.png

Sorting And Pagination On Product List

With the Nicepage Source, you can enable Sorting and pagination for the product list page template and Element.

The Sorting and Pagination work together and are supported for HTML, WordPress, and Joomla E-Commerce websites.

sorting-pagination.png

Show Sorting On Product List

You can show and stylize the Sorting in the Property Panel for the selected Product List Element on a page or the Product List Page Template.

product-sorting.png

Show Pagination On Product List

You can also show and stylize the Pagination for the Product List Element on a page and the page template.

product-pagination.png

Change Sorting On Live Store

Your customers can change the Sorting for a Product List on your live E-Commerce websites made with Nicepage.

product-sorting-live-site.png

You can search for Products and see them in the results.

products-search.png

For the Link Settings of the Menu, Button, or Hyperlink, you can use options to connect to Product Page Templates.

The Product Page Templates can output Products, which you add on the Products Panel. You can customize Product Page Templates in the Templates Panel.

Link to Product List Page Template

You can link the Menu Item, Button, or Hyperlink to the Product List page.

  1. Add a Button.
  2. Open the Link Settings dialog.
  3. Select the Page Option.
  4. In the Page option, select the Product List to open a page with Products.

Please read about the Product List Template for more information.

products-page-link.png

Link to Product Details Page Template

You can also link Menu Item, Button, or Hyperlink to an individual Product. In the Link Settings dialog, select the Product option and then the Product in the Products field.

Please read about the Product Details Template for more information.

product-link.png

Build A Menu From Products

When you edit the first Product, the Store link is automatically added to the Menu.

store-menu-automatically.gif

You can also link the Product List and Product Details Pages in the Menu, for example, the following Menu.

products-in-menu.png

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

menu-links-products.png

Manage Products On Context Toolbar

You can open the Products Panel by clicking the Manage Products button on the Context Toolbar of the Product List Element.

manage-products-toolbar.gif

Currency Symbol Automatically

The Currency Symbol is shown automatically based on the user's locale. For example, for the Switzerland, it will show CHF.

swiss-franc-automatically.png

Export Products

In the Export dialog, you can see the new "Include E-Commerce Products" checkbox, which allows you to publish and export the Products.

include-ecommerce-products.png

Publish Or Export HTML

You will export or publish the following HTML pages for Nicepage Hosting.

  • The Product List and Product Details templates
  • The Products from the Products Panel

The files are created for the Product List and individual pages, for example, /products/products.html and /products/pepperoni-pizza.html, as follows.

export-html-products.gif

Export For WordPress Or Joomla

The Products from the Products Panel will be imported with the Content import to WordPress or Joomla websites, on which you should have WooCommerce or VirtueMart installed correspondingly.

NOTE: You should have the "Include E-Commerce Templates" and "Include E-Commerce Products" checkboxes checked in the Publish and Export dialog.

export-products-wordpress.png

Import Products To WordPress and Joomla

You can import the Products added to the Products Panel to the WordPress WooCommerce plugin and Joomla VirtueMart extension.

You should check the Import Products checkbox during the Installation in the Wizard.

In WordPress:

import-products-wordpress.png

In Joomla:

import-products-joomla4.png

Products On Product Templates

The Product List and Product Details Template on the Templates Panel now show the Products added in the Products Panel.

products-product-list-template.png

Products With Nicepage Theme Only

We also show Products without importing the Content from the Desktop Application. You can link a Button or Hyperlink in the Header or Footer to the Product Page Template. Then, export only the Theme from the Desktop Application and import it to the WordPress or Joomla website.

IMPORTANT! You install the Theme without the Editor Plugin. Therefore, the Product Items on the Menu still need to be created. You should add the links to your E-Commerce Store pages manually.

For example, you can add a link to your Product List with the Button added to the Header.

products-theme.gif

You can manage Products on the **Products Panel** and assign them to the [Payment Button](page:425789) Element or output them into the Product List or Details page templates and elements. ## Add Products Click the Add Product button or Plus icon at the Panel's top to add a Product. !add-product.png! ### Default Products There are default products for new websites for convenience. The Products Panel is not empty when creating a new website. !default-products.png! ### Manage Products Click on the Element In the Product List and Details Elements to open the Edit Product dialog. !edit-product-click.gif! You can set the Old Price to the Product Dialog. !old-price-product-dialog.png! ### Product Images You can add, order, and delete the Product Images in the Product dialog. The first Image is set as featured or default. !product-images.png! You can move Images in the Edit Product dialog. !move-product-images.gif! ### Currency List We have added almost all the World's currencies to the Currency List. Now, you can find all currencies supported by Stripe. If you use PayPal and a currency is not supported, the Products with such currencies will be disabled in the Shopping Cart. !currency-list-expanded.png! ### Currency Sign Position For the British Pound, Japanese Yen, etc., we now support the correct position of the currency sign at the Price, Sum, and Total for all currencies. !currency-position.png! ## Assign Product You can assign a Product in the Properties to the selected Payment Button in the Editor. !select-product.png! ## Product Sorting You can sort Products by clicking the Sorting icon at the top of the Panel and choosing the Sorting Parameters from the list. !product-sorting.png! ## Sorting And Pagination On Product List With the Nicepage Source, you can enable Sorting and pagination for the product list page template and Element. The Sorting and Pagination work together and are supported for HTML, WordPress, and Joomla E-Commerce websites. !sorting-pagination.png! ### Show Sorting On Product List You can show and stylize the Sorting in the Property Panel for the selected Product List Element on a page or the Product List Page Template. !product-sorting.png! ### Show Pagination On Product List You can also show and stylize the Pagination for the Product List Element on a page and the page template. !product-pagination.png! ### Change Sorting On Live Store Your customers can change the Sorting for a Product List on your live E-Commerce websites made with Nicepage. !product-sorting-live-site.png! ## Product Search You can search for Products and see them in the results. !products-search.png! ## Product Pages In Link Settings For the Link Settings of the [Menu](page:82280), [Button](page:243504), or [Hyperlink](page:110462), you can use options to connect to Product Page Templates. The Product Page Templates can output Products, which you add on the Products Panel. You can customize Product Page Templates in the Templates Panel. ### Link to Product List Page Template You can link the [Menu](page:82280) Item, [Button](page:243504), or [Hyperlink](page:110462) to the Product List page. 1. Add a Button. 2. Open the Link Settings dialog. 3. Select the Page Option. 4. In the Page option, select the Product List to open a page with Products. Please read about the [Product List Template](page:102300) for more information. !products-page-link.png! ### Link to Product Details Page Template You can also link [Menu](page:82280) Item, [Button](page:243504), or [Hyperlink](page:110462) to an individual Product. In the Link Settings dialog, select the Product option and then the Product in the Products field. Please read about the [Product Details Template](page:102304) for more information. !product-link.png! ### Build A Menu From Products When you edit the first Product, the Store link is automatically added to the Menu. !store-menu-automatically.gif! You can also link the Product List and Product Details Pages in the Menu, for example, the following Menu. !products-in-menu.png! You can build the Menu and Submenu items from Product Pages like the following. !menu-links-products.png! ## Manage Products On Context Toolbar You can open the Products Panel by clicking the Manage Products button on the Context Toolbar of the Product List Element. !manage-products-toolbar.gif! ## Currency Symbol Automatically The Currency Symbol is shown automatically based on the user's locale. For example, for the Switzerland, it will show CHF. !swiss-franc-automatically.png! ## Export Products In the Export dialog, you can see the new "Include E-Commerce Products" checkbox, which allows you to publish and export the Products. !include-ecommerce-products.png! ### Publish Or Export HTML You will export or publish the following HTML pages for Nicepage Hosting. - The Product List and Product Details templates - The Products from the Products Panel The files are created for the Product List and individual pages, for example, */products/products.html* and */products/pepperoni-pizza.html*, as follows. ### !export-html-products.gif! ### Export For WordPress Or Joomla The Products from the Products Panel will be imported with the Content import to WordPress or Joomla websites, on which you should have WooCommerce or VirtueMart installed correspondingly. **NOTE:** You should have the **"Include E-Commerce Templates"** and "Include E-Commerce Products" checkboxes checked in the Publish and Export dialog. !export-products-wordpress.png! ## Import Products To WordPress and Joomla You can import the Products added to the Products Panel to the WordPress WooCommerce plugin and Joomla VirtueMart extension. You should check the Import Products checkbox during the Installation in the Wizard. In WordPress: !import-products-wordpress.png! In Joomla: !import-products-joomla4.png! ## Products On Product Templates The Product List and Product Details Template on the Templates Panel now show the Products added in the Products Panel. !products-product-list-template.png! ## Products With Nicepage Theme Only We also show Products without importing the Content from the Desktop Application. You can link a Button or Hyperlink in the Header or Footer to the Product Page Template. Then, export only the Theme from the Desktop Application and import it to the WordPress or Joomla website. **IMPORTANT!** You install the Theme without the Editor Plugin. Therefore, the Product Items on the Menu still need to be created. You should add the links to your E-Commerce Store pages manually. For example, you can add a link to your Product List with the Button added to the Header. !products-theme.gif! ##