Our e-Commerce solution includes 5 widgets, and consists of:

1. Category Menu Widget
2. Products List Widget
3. Shopping Cart Widget
4. Product Details Widget
5. Shopping Cart List Widget
6. Banner Rotator
7. Add to Cart Button

 

Category Menu

 

Category Menu is a kind of Catalog Widget, that holds all content of e-Commerce solution. As you can see at the screenshot, user can change orientation of categories (horizontal/vertical), edit Category button style and Subcategory Button style.

 

After clicking on “Edit Widget” you'll be able to edit content of the catalog “Category Menu”. Here you can create new categories, rename existing ones or move to the selected sub-level for content editing.

 

 

Here, in “Category 0” folder two demo products were created.

 

Apple product has in sub-level three images that will be displayed in “Product Details light-box”. Here User can also add videos that will be displayed as product large preview in Product Details (Add Item → Large Preview → Select video from media library or YouTube).

 

 

All products have properties ( Product Code, Regular Price, Sale Price, Brand Name, Model, Product Thumbnail, Short Description, Full Description ) that can be edited.

 

 

Products List

 

 

This module is created to display products from “Category Menu” content and have to be connected to Category Menu by the same “e-Commerce Connection ID” (it is set to “store”on the screenshot, but user can use any letters or numbers as an ID, the only note: it have to be same for Category Menu, Product List and Product Details widgets).

Product List Widget has great variety of properties and parameters that can be customized. They are: Navigation Style, Sort Style, Product Style, Product Image Style, Buy Button Style.

 

Product Details

 

Product Details also have to be connected to Category menu with “e-Commerce Connection ID” to be displayed correctly.

 

This widget also has great amount of options and settings, and it can be fully customized to suit your template's design. It can be previewed by clicking on “Preview” button (see screenshot below).

 

 

 

Shopping Cart

 

This widget displays number of items in the shopping cart and leads user to “Shopping Cart List”. The page, where “Shopping Cart List” is placed have to be mentioned in Shopping Cart Widget settings.

Also there are different properties and settings that will help users to customize Shopping Cart for their needs.

 

Shopping Cart List

 

This widget displays list of products, added to cart. Here are Payment System settings. User can choose one of the available payment methods.

 

 

 

The following screen-shot shows, how Shopping Cart List looks on the working template:

 

 

Banner Rotator

 

Widget allows you advertising of your own products on your home page. You can go to the 'Widgets' – 'e-Commerce' - 'Banner Rotator' and add it to your page, then double click it and add a new item. The image you need to display is a medium size preview picture. You can link your banners to any page or popup or even to an outside resource.

You can adjust banner's settings:

• Background style (Background color and alpha, Corner radius, Stroke thickness, Stroke color);
• Text style (Corner align, Content horizontal/vertical padding);
• Image style (Image align, Image scaling mode);
• Pagination style (Spots horizontal/vertical padding, Spot color and alpha, Selected spot color).

Add to Card Button

 'Add to Cart Button' can be added on any page of your on-line store. Widget's settings allow you to add all product information and to attache an image there.

 

Also see our Video Tutorial about the e-Commerce solution here.