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 |
Create and Manage Your Products
First, create three products to be available on the Home and Store pages. To do it, open the Products Panel by clicking the Product icon in the Quick Access Pane. In this window, you can add, edit, duplicate, rearrange, and remove products. Delete the sample products if you do not need them, then click Add Product or the Plus icon. In the Product dialog box, insert the title, short information, description, current and old price. (Old price is used to show the discount.) Upload the picture, save the changes, and repeat for another two products.
Preview the Store Page
Once the first product is added/edited, Nicepage will instantly create a Store link in the website menu. Select this link to view the Product List Page Template preview, which shows your products in a store layout. Your products will be ordered by the date they were added. However, you can change the order in the Products Panel. Make sure your products look correct by checking the title, image, description, and price. Close the preview when finished.
Add Products To Home Page
Products are also available to display on standard pages by inserting the Product List Element. Open the Home page, click Add Panel, then go to Products > Product List. You can insert a simple Product List Element, or pick from one of the available presets and designs. For this tutorial, I am selecting the first preset from the Blocks section. Drag this onto the page and edit the headings and text to suit your shop.
Customize Product Information
There are a few additional sub-elements that can be added or removed via the Product List. Select the Plus icon between the other elements to reveal the list of options you can choose from. We'll add a Product Badge, then position it to the upper right-hand corner of each product image. Open the Property Panel, set the badge to Sale, and change the color to red. Products with the Sale price will now display a discount badge. Show/hide any of the categories, descriptions, prices, images, et al. you'd like.
Configure Product Buttons
Click a product button, then open its settings in the Property Panel. Nicepage has three main button actions: View Product Details, Add to Cart, and Buy Now. After clicking View Product Details, visitors will be redirected to the Product Details Page Template. Add to Cart lets visitors add the products to the shopping cart, and Buy Now lets them skip the Cart and go directly to payment. Choose Buy Now if you want visitors to buy a simple store without a cart. Disable the sorting, categories and pagination if you offer only a few products.
Edit the Product Page Templates
From the Quick Access Pane, open the Templates Panel. page templates are not pages at all, but they provide uniformity and consistency between groups of similar pages. Choose the Product Details Page Template and modify the image grid, the number selector, the description, price, and add to basket button. Then, open the Product List Page Template (linked to the Store menu item). Disable categories users don’t need, add a Sale indicator, and set product actions to open the product details page.
Set Up Payments and Test the Website
Choose Payment options. Set up PayPal, Stripe, email orders, or any combination of these. You will need to add your PayPal Client ID in the PayPal settings, and link your Stripe account in the Property Panel. You can also set up email settings to collect orders for manual processing. Once you have completed the payment setup, publish your website and run through the complete customer journey. Look at the products on the Home page, navigate to the Store page, view a product, and test each button to make a test purchase.