Scroll

Widgets - Advanced e-Commerce

Advanced e-Commerce solution includes Regular e-Commerce widgets with some additional features:

  • Advanced Products Details
  • Advanced Shopping Cart
  • Category Menu

1.png

Please, note! That if you want to connect widgets with each other (in order to use the same content and settings) you should have the same e-Commerce Connection ID which includes any letters or numbers as an ID (see below).
24.png

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.
14.png

After clicking on  the “Edit Widget” button 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 the content editing.
15.png

Here, in “TestCategory1” folder two demo products were created.
16.png

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

"Category menu" widget has also two new properties for each product - Size and Color.
2.png

Size should be filled as an example:

Small|1; Medium|1.5; Large|2

Color should be filled as an example below:

Black|0.8; Silver|1; White|1.2

where Small, Medium, Large - available sizes, Black, Silver, White - available colors; numbers after "|" symbol, are the price ratio. The price is being multiplied by the coefficient mentioned for each value (Small, Medium, Large, Black, Silver or White). If your product's price doesn't differ depending on color and size, coefficient should be set to "1'" for all values of color and size.

Black wristwatch product has in sub-level two images that will be displayed in “Product Details lightbox”. Here, User can also add videos that will be displayed as  a  Large preview of the product in Product Details (Add Item → Large Preview → Select video from media library or YouTube).
17.png

Products List
18.png

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

Note! "Advanced Product Details" widget shows new properties (color and size). It needs to turn off the Buy Button for the Products List widget because the customer might click Buy Button (Add Button) without taking a look at product's properties (available color and size), so he won't know if there's an option to choose the size and color for this product. This should be done in Products List widget > Product Style > Add Button Mode > hide
5.png

Advanced Product Details

Advanced Product Details also has to be connected to the Category menu with the same “e-Commerce Connection ID” in order to be displayed correctly.
19.png

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).
20.png

Shopping Cart

This widget displays number of items in the shopping cart and leads user to “Advanced Shopping Cart List”. Page where “Advanced 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.
21.png

Advanced Shopping Cart List

This widget displays list of products, added to the cart. Here you can also set Payment System settings and choose one of the available payment methods.

Shipping Types

"Advanced Shopping Cart List" has a check box "Show Shipping Types".  If it's active, you'll have next additional properties:

  • Shipping Label
  • Shipping Types And Cost

3.png

Shipping Label is a type of shipping that you can offer your customers.

Shipping Types And Cost set a price of each available shipping type. It should be filled as the example below:

Type 1 - $10|10; Type 2 - $15|15; Type 3 - $20|20

where numbers after "|" symbol, shows the shipping price which will be added to the general order price.

In the example below: 1st type of shipping costs - $10, 2nd type costs - $15, 3rd type costs - $20. If some type of shipping is free, please set it's price to $0 as following:

Type 1 - $0|0

Shipping Details (Address)

"Advanced Shopping Cart List" widget has a check box "Get Shipping Details From contact Form".
4.png

It makes your Checkout button not click-able till client clicks eCommerce Contact Form's Submit button.

eCommerce Contact Form widget should be placed at the same page/popup where "Advanced Shopping Cart List" is located. It has all features of Advanced Contact Form widget excepting "Attach File" feature. You may add or delete fields in order to get information that you need from your customer. eCommerce Contact From is intended to work with Shopping Cart of your website, as it doesn't send mails to your mailbox, but it only adds all filled fields to the order once customer clicks Checkout Button.
6.png

Here's an example of Shopping Cart page when a customer is filling eCommerce Contact form fields:
9.png

Once all required fields of the eCommerce Contact Form widget are filled and eCommerce Contact Form Submit button is clicked, your visitor will be able to proceed with a checkout when checkout button becomes clickable.
10.png

Once customer clicks Checkout button, he will be redirected to the payment system page, which can be chosen in Advanced Shopping Cart List widget's properties > Payment Settings.
11.png

Please check an example of the payment page below (PayPal):
12.png

 

And here's what you can see in your mailbox:
13.png

Please, note! Shipping is added as a separate product.

Banner Rotator

This widget allows you to advertise your own products on the home page. You can go to the Widgets > e-Commerce > Banner Rotator, 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.
22.png

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 Cart Button

"Add to Cart Button" can be added on any page of your online store. Widget settings allow you to add all product information and to attach an image there.
23.png

Please, note! We strongly recommend to replace Regular eCommerce widgets (if you had Regular eCommerce solution installed previously) with Advanced eCommerce widgets. Widget "Product Details" should be replaced with "Advanced Product Details" and in the same way "Shopping Cart List" with "Advanced Shopping Cart List". Advanced eCommerce will not work with Regular eCommerce widgets! Please use "Advanced Product Details" and "Advanced Shopping Cart List".

If you are interested in this product and would like to get it installed on your template (Please notice that Advance eCommerce widget can be installed only on Flash MotoCMS template), please contact our Support team and our agents will be glad to assist you with these questions anytime. Also in a case if you already have an Advance eCommerce widget installed, but experience any problems or questions, please also submit a ticket.

 

Have more questions? Submit a request

Comments

Powered by Zendesk