This video will show you how to add basic E-Commerce features to your Nicepage site and start selling products online. You will create a simple store, learn how to manage products, and set up payments.
| Previous | All Lessons | Next |
We will create a simple store selling 3 products, which we will show on the Home and Store pages. You will also learn how to manage products and set payments so visitors can order them.
Manage Products
Add Products to start. Click the icon on the Quick Access Pane to open the Products Panel. Here, you can edit, duplicate, and delete Products.
On the Panel, there are sample products that you can delete. Click the Add Product button or the Plus top to add a new Product with the Product dialog.
In the dialog, enter the Product Title, Short Info, Description, and Price. Then, enter the Old Price to show the Discount.
Add the Product Images. Close and save the changes.
Skip the Shopping Cart message for now. Once you add or edit the first product, Nicepage automatically adds the Store link to the Menu. Add two more products.
You can change the Sorting, as the Products are sorted by the Date Created by default.
First Preview
Click the Store link in the Menu. It opens the Product List Page Template, a predefined page that shows your products. We will explain the templates later.
Close the preview.
Add Product List Element
Besides the Store page, you can show Products with the Product List Element on any page, for example, Home. Open the Add Panel, go to Products, then the Product List.
The product List Element is at the top. Scrolling down the list reveals the Presets and Designs. Select the first Product List preset in the Blocks section.
Add and modify the Heading.
Product Sub-Elements
You can display more information about a Product on the list by clicking the Plus icon between the existing Elements. The panel then shows all available Sub-Elements to add to the Product List.
Add the Product Badge and move it to the top right corner of the item. Then, go to the Property Panel. Switch the Badge’s Source to Sale and change the Color to red.
Now you can see the discounts for the Products with the Old Price value.
Product Button
Select the Button. In the Properties, you see the supported actions for the On Click property: View Product Details, Add to Cart, and Buy Now.
The View Button opens the Product Details page. This page is also a Predefined Template, which we will explain later.
Please let us know in the comments whether you build online stores and whether this lesson is helpful.
Product Properties
Also, in the Properties, you can see Sorting, Categories, and Pagination, which allow you to enable and stylize those Areas.
In this tutorial, the Product List is simple and does not require Sorting or Pagination. You can also turn off the categories.
Set Product Source
The Product Source is set to Nicepage by default. However, if you use WordPress or Joomla with the installed E-Commerce Plugins, you can switch the Product Source to WordPress or Joomla.
Preview In Chrome. You can see the Products on the Home Page now. Click the View Button. It opens the Product Details Page Template. Go back to Nicepage.
Product Page Templates
It’s time to learn about the Product Page Templates. You can find Template Pages on their Panel. Click the icon on Quick Access to open the Templates Panel.
In general, Page Templates are not regular pages. They are used to generate pages with similar layouts. For example, all pages describing Products should look consistent, so the Product Details Page Template should be used for all of them.
Product Details Page Template
Select the Product Details Page Template. This page shows detailed information about a selected Product and the layout used to present all the Products on the site.
Let’s modify it. In the Properties, Change the Product Image Layout. Add the Product Quantity and set the Buy Now button.
In this example, your store’s visitors will buy Products by bypassing the Shopping Cart.
However, you can add the Shopping Cart Icon to the Header if necessary. Also, to add a product to the cart, change the On Click property of the Add to Cart button.
Product List Page Template
Go back to the Templates Panel. Open the Product List Page Template. It is also a predefined page that shows several Products in сolumns and rows. The Store link in the Menu opens this page.
The Editor and Preview show the universal Product List layout, which is two rows by default. You can stylize it regardless of the Product Quantity.
After publishing, the Store shows as many Products as you have on the Products Panel.
Stylize the Product List Page Template similarly to what you did with Products on the Home Page. Turn off the Categories, add the Badge, and set the Button to view the Product Details.
Set Up Payments
The main goal of any online store is to sell products or to collect orders. To make your shop work, you can set up payments with PayPal, Stripe, or both and receive Emails to process the orders manually.
All Product Elements and the Page Navigator allow you to set PayPal, Stripe, and Email properties in the Property Panel.
PayPal Client ID
In the PayPal section, enter the PayPal Client ID, which you can obtain on the PayPal website. Click the link to read more in the documentation.
Connect Stripe
You can connect your Stripe account. Click the link also to learn more.
Publish And Test
Publish your site. There are Products on the Home Page. Click Store in the Menu. Click Buttons to test the transitions and the purchase.
Related Article
Getting Started With E-Commerce
This video will show you how to add basic E-Commerce features to your Nicepage site and start selling products online. You will create a simple store, learn how to manage products, and set up payments. <iframe style="width: 95%; aspect-ratio: 16 / 9; margin: 20px 0" src="https://www.youtube.com/embed/P-n_3vRJpVw" title="Boost Your E-Commerce Sales with Custom Websites" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <table width="95%"> <tr> <td width="33%" align="left">[Previous](page:545838)</td> <td width="34%" align="center">[All Lessons](page:1318)</td> <td width="33%" align="right">[Next](page:561570)</td> </tr> </table> ## We will create a simple store selling 3 products, which we will show on the Home and Store pages. You will also learn how to manage products and set payments so visitors can order them. ## Manage Products Add Products to start. Click the icon on the Quick Access Pane to open the Products Panel. Here, you can edit, duplicate, and delete Products. On the Panel, there are sample products that you can delete. Click the Add Product button or the Plus top to add a new Product with the Product dialog. In the dialog, enter the Product Title, Short Info, Description, and Price. Then, enter the Old Price to show the Discount. Add the Product Images. Close and save the changes. Skip the Shopping Cart message for now. Once you add or edit the first product, Nicepage automatically adds the Store link to the Menu. Add two more products. You can change the Sorting, as the Products are sorted by the Date Created by default. ## First Preview Click the Store link in the Menu. It opens the Product List Page Template, a predefined page that shows your products. We will explain the templates later. Close the preview. ## Add Product List Element Besides the Store page, you can show Products with the Product List Element on any page, for example, Home. Open the Add Panel, go to Products, then the Product List. The product List Element is at the top. Scrolling down the list reveals the Presets and Designs. Select the first Product List preset in the Blocks section. Add and modify the Heading. ## Product Sub-Elements You can display more information about a Product on the list by clicking the Plus icon between the existing Elements. The panel then shows all available Sub-Elements to add to the Product List. Add the Product Badge and move it to the top right corner of the item. Then, go to the Property Panel. Switch the Badge’s Source to Sale and change the Color to red. Now you can see the discounts for the Products with the Old Price value. ## Product Button Select the Button. In the Properties, you see the supported actions for the On Click property: View Product Details, Add to Cart, and Buy Now. The View Button opens the Product Details page. This page is also a Predefined Template, which we will explain later. Please let us know in the comments whether you build online stores and whether this lesson is helpful. ## Product Properties Also, in the Properties, you can see Sorting, Categories, and Pagination, which allow you to enable and stylize those Areas. In this tutorial, the Product List is simple and does not require Sorting or Pagination. You can also turn off the categories. ## Set Product Source The Product Source is set to Nicepage by default. However, if you use WordPress or Joomla with the installed E-Commerce Plugins, you can switch the Product Source to WordPress or Joomla. Preview In Chrome. You can see the Products on the Home Page now. Click the View Button. It opens the Product Details Page Template. Go back to Nicepage. ## Product Page Templates It’s time to learn about the Product Page Templates. You can find Template Pages on their Panel. Click the icon on Quick Access to open the Templates Panel. In general, Page Templates are not regular pages. They are used to generate pages with similar layouts. For example, all pages describing Products should look consistent, so the Product Details Page Template should be used for all of them. ### Product Details Page Template Select the Product Details Page Template. This page shows detailed information about a selected Product and the layout used to present all the Products on the site. Let’s modify it. In the Properties, Change the Product Image Layout. Add the Product Quantity and set the Buy Now button. In this example, your store’s visitors will buy Products by bypassing the Shopping Cart. However, you can add the Shopping Cart Icon to the Header if necessary. Also, to add a product to the cart, change the On Click property of the Add to Cart button. ### Product List Page Template Go back to the Templates Panel. Open the Product List Page Template. It is also a predefined page that shows several Products in сolumns and rows. The Store link in the Menu opens this page. The Editor and Preview show the universal Product List layout, which is two rows by default. You can stylize it regardless of the Product Quantity. After publishing, the Store shows as many Products as you have on the Products Panel. Stylize the Product List Page Template similarly to what you did with Products on the Home Page. Turn off the Categories, add the Badge, and set the Button to view the Product Details. ## Set Up Payments The main goal of any online store is to sell products or to collect orders. To make your shop work, you can set up payments with PayPal, Stripe, or both and receive Emails to process the orders manually. All Product Elements and the Page Navigator allow you to set PayPal, Stripe, and Email properties in the Property Panel. ### PayPal Client ID In the PayPal section, enter the PayPal Client ID, which you can obtain on the PayPal website. Click the link to read more in the documentation. ### Connect Stripe You can connect your Stripe account. Click the link also to learn more. ## Publish And Test Publish your site. There are Products on the Home Page. Click Store in the Menu. Click Buttons to test the transitions and the purchase. ## Related Article [Getting Started With E-Commerce](page:431831) ##