Summary

  • Overview
  • Manage Products
    • Edit Product Images
  • Display Products In Elements
    • Product List Element
    • Product Details Element
    • Product Source
    • Product Button On-Click Property
  • Product Page Templates
    • Product List Template
    • Product Details Template
  • Product Pages In Link Settings
    • Link to Product List Page Template
    • Link to Product Details Page Template
    • Add Products To Menu
  • Add Shopping Cart
  • PayPal Payments
  • Stripe Payments
  • Export E-Commerce Website
    • Include E-commerce Products
    • Publish Or Export HTML
    • Export For WordPress Or Joomla
  • Additional Info

Overview

You can create E-Commerce Websites with Nicepage, publish them to Nicepage Hosting, and export them to HTML, WordPress, and Joomla.

e-commerce-websites.jpg

Manage Products

You can edit the Products in the Products panel.

  1. Click the Products icon in the Quick Access Pane.
  2. Add, edit, and delete Prodicts.

edit-products.png

Edit Product Images

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

product-images.png

Display Products In Elements

You can add the Product List and Product Details Elements to a Block on a Page to output Products.

Product List Element

Add the Product List Element to see your Products.

product-list-add.png

Select Nicepage as the Product Source in the Property Panel to see the added Products. The Product list on a Page will look like the following.

product-list-example.png

Product Details Element

Add the Product Details Element to see a Product with all its Images.

product-details-add.png

To see the Product Images, select the Nicepage Option for the Product Source and select the Product.

product-details-images.png

Product Source

Choose the Nicepage Source for the Product List and Product Details Elements.

product-sourse-change.gif

Choose one of the options.

  • Nicepage - display the Products from the Products Panel.
  • CMS - display the default data in the Editor, and the actual Products will be output to the Product Templates in CMS.

product-source.png

Product Button On-Click Property

In the On-Click Property for the Product Button, you can choose to:

  • 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

Product Page Templates

The Product Page Templates are used to output the E-Commerce pages. You can use those pages to display Products on your website.

Product List Template

  1. Open your Project in the Application.
  2. Open the Templates Panel on the Quick Access Pane.
  3. Select the Product List Template
  4. Customize it if needed.

product-templates.png

Please read about the Product List Template and Product Elements for more information.

Product Details Template

Similarly, you can select and edit the Product Details Template.

  1. Open your Project in the Application.
  2. Open the Templates Panel.
  3. Select the Product Details Template
  4. Customize it if needed.

Please read about the Product Details Template and Product Elements for more information.

Product Pages In Link Settings

Connect your Product Page Templates in the Menu, Button, or Hyperlink Settings. You can choose and customize the Product Page Templates in the Templates Panel.

product-templates.png

Add Products To Menu

You can add Products to the Menu by linking the Product List Page Template to an Item.

products-in-menu.png

For example, you can build the following Menu.

menu-links-products.png

Link to Product List Page Template

You can link the Menu item to the Product List.

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

Please read about the Product List Template for more information.

menu-page-product-list.png

Link to Product Details Page Template

You can also link 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.

menu-page-product.png

Add Shopping Cart

Add the Shopping Cart Icon to the Header to enable the Shopping Cart feature on your E-Commerce websites. Previously, it worked only for WordPress WooCommerce and Joomla VirtueMart.

add-shooping-cart-icon.png

Read more about the Shopping Cart.

PayPal Payments

Configure PayPal Settings for the Product List or Product Details Elements and Templates.

NOTE: You will see the PayPal Popup when you click the Button on the live website.

paypal-settings.png

Stripe Payments

You can accept payments via Stripe on your websites created with Nicepage. You should connect your Nicepage website to Stripe to get payments.

stipe-payments.jpg

Export E-Commerce Website

IMPORTANT!

In the Export dialog, check the "Include E-Commerce Products" checkbox to publish or export the Products.

include-ecommerce-products.png

Publish Or Export HTML

You will export the following HTML pages or publish them to the 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 like the following.

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

Additional Info

General

Payments

Product Elements

Product Page Templates

## Summary - Overview - Manage Products - Edit Product Images - Display Products In Elements - Product List Element - Product Details Element - Product Source - Product Button On-Click Property - Product Page Templates - Product List Template - Product Details Template - Product Pages In Link Settings - Link to Product List Page Template - Link to Product Details Page Template - Add Products To Menu - Add Shopping Cart - PayPal Payments - Stripe Payments - Export E-Commerce Website - Include E-commerce Products - Publish Or Export HTML - Export For WordPress Or Joomla - Additional Info ## Overview You can create E-Commerce Websites with Nicepage, publish them to Nicepage Hosting, and export them to HTML, WordPress, and Joomla. !e-commerce-websites.jpg! ## Manage Products You can edit the Products in the **Products** panel. 1. Click the **Products** icon in the Quick Access Pane. 2. Add, edit, and delete Prodicts. ### !edit-products.png! ### Edit Product Images In the Product dialog, you can add, order, and delete the **Product Images**. The first Image is set as featured or default. !product-images.png! ## Display Products In Elements You can add the [Product List](page:97480) and [Product Details](page:97484) Elements to a Block on a Page to output Products. ### Product List Element Add the [Product List](page:97480) Element to see your Products. !product-list-add.png! Select **Nicepage** as the Product Source in the Property Panel to see the added Products. The Product list on a Page will look like the following. !product-list-example.png! ### Product Details Element Add the [Product Details](page:97484) Element to see a Product with all its Images. !product-details-add.png! To see the Product Images, select the **Nicepage** Option for the Product Source and select the Product. !product-details-images.png! ### Product Source Choose the **Nicepage Source** for the [Product List](page:97480) and [Product Details](page:97484) Elements. !product-sourse-change.gif! Choose one of the options. - **Nicepage** - display the Products from the Products Panel. - **CMS** - display the default data in the Editor, and the actual Products will be output to the Product Templates in CMS. ### !product-source.png! ### Product Button On-Click Property In the **On-Click** Property for the **Product Button**, you can choose to: - **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! ## Product Page Templates The Product Page Templates are used to output the E-Commerce pages. You can use those pages to display Products on your website. ### Product List Template 1. Open your Project in the Application. 2. Open the Templates Panel on the Quick Access Pane. 3. Select the Product List Template 4. Customize it if needed. ### !product-templates.png! Please read about the [Product List](page:102300) Template and [Product Elements](page:107569) for more information. ### Product Details Template Similarly, you can select and edit the Product Details Template. 1. Open your Project in the Application. 2. Open the Templates Panel. 3. Select the Product Details Template 4. Customize it if needed. Please read about the [Product Details](page:102304) Template and [Product Elements](page:107569) for more information. ## Product Pages In Link Settings Connect your Product Page Templates in the [Menu](page:82280), [Button](page:243504), or [Hyperlink](page:110462) Settings. You can choose and customize the Product Page Templates in the Templates Panel. !product-templates.png! ### Add Products To Menu You can add Products to the Menu by linking the Product List Page Template to an Item. !products-in-menu.png! For example, you can build the following Menu. !menu-links-products.png! ### Link to Product List Page Template You can link the Menu item to the Product List. 1. In 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. !menu-page-product-list.png! ### Link to Product Details Page Template You can also link 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. !menu-page-product.png! ## Add Shopping Cart Add the Shopping Cart Icon to the Header to enable the Shopping Cart feature on your E-Commerce websites. Previously, it worked only for WordPress WooCommerce and Joomla VirtueMart. !add-shooping-cart-icon.png! Read more about the [Shopping Cart](page:449457). ## PayPal Payments Configure PayPal Settings for the Product List or Product Details Elements and Templates. **NOTE:** You will see the PayPal Popup when you click the Button on the live website. !paypal-settings.png! ## Stripe Payments You can accept payments via Stripe on your websites created with Nicepage. You should connect your Nicepage website to Stripe to get payments. !stipe-payments.jpg! ## Export E-Commerce Website **IMPORTANT!** In the Export dialog, check the "Include E-Commerce Products" checkbox to publish or export the Products. !include-ecommerce-products.png! ### Publish Or Export HTML You will export the following HTML pages or publish them to the 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* like the following. !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! ## Additional Info **General** - [E-Commerce For HTML](page:431829) - [E-Commerce For WordPress](page:110988) - [E-Commerce For Joomla](page:161063) **Payments** - [Payment Button Element](page:425789) - [PayPal Client ID](page:424214) - [Stripe Paymnets](page:434617) - [Shopping Cart For E-Commerce](page:449457) **Product Elements** - [Product List Element](page:97480) - [Product Details Element](page:97484) - [Shopping Cart Icon](page:97482) **Product Page Templates** - [Product List Template](page:102300) - [Product Details Template](page:102304) - [Shopping Cart Template](page:107201) - [Pagination Element](page:131347) - [Breadcrumbs Element](page:131312) ##