New e-Commerce Widget – Great Solution for Your Online Stores

MotoCMS Editorial

12 years ago

Dear friends, we’re glad to inform you that we’ve just launched a new e-Commerce widget! We received many customers requests to create a widget like this one, so that it would be possible to sell products and receive payments via PayPal, Google Checkout, Robox, etc.

From now on you can insert an online store module into your MotoCMS-based websites wherever you want. You can order e-Commerce widget while buying new Flash CMS template. On checkout there are several special offers which you can choose or skip before filling the billing details form.

You can also buy the e-Commerce widget separately from the template purchase. From now on if you have a Flash CMS template you can easily create an online store based on Moto Flash CMS.

There are 7 components of the e-Commerce widget:

Category Menu;
Products List;
Banner Rotator;
Shopping Cart;
Shopping Cart List;
Product Details;
Add to Card Button.

When creating a website you can easily link it to your actual online store which is already created. But it’s better to create a products catalog on the home page of your website (or choose another website page on your liking). A products catalog is one of the most important features which site visitors are looking for first of all, so don’t neglect this chance to grab their attention at first sight. Open ‘Widgets’ – ‘e-Commerce’ – ‘Category menu’ and place it on a page. Double click will open the widget for editing (the ‘Edit Widget’ button on the lower right corner of the control panel will do the same).

The ‘Category Menu’ window allows to create new products’ categories using the ‘Add New Item’ button and rename them. Double click on a category folder will open it for the further editing.

Now you can create Subcategories and Products using the ‘Add New Item’ button. There are also the ‘Add New Items’ button which allows to add several products at once.

When the product is created you can complete its description:

Product code;
Regular price;
Sale price;
Brand name;
Model;
Product thumbnail;
Short description;
Full description;

Choosing a product thumbnail you should better give preferences to square images, they will look better in the Product List.

To fill in a preview information double click on the product and create a new item there. You should upload a preview picture for the ‘Image Thumbnail Lightbox’ (we cropped a 250 square pixels), a small preview picture for thumbnails list in the ‘Product Details Lightbox’ (it is also a product thumbnail we already used) and the large preview which is for the ‘Product Details Lightbox’ fullscreen preview (it can be an image or a video).

Now you can easily make some style for the ‘Category Menu’:

Orientation (Vertical/Horizontal);
Category button style (Text padding, vertical/horizontal spacing, Button colors, Button alpha, Button corner radius, Button stroke thickness );
Subcategory button style (Width/Height, Text padding, Button colors, Button background alpha, Button corner radius, Button stroke thickness ).

Products List

This widget was created to display items from the ‘Category Menu’ (and it should be placed on the same page as the ‘Category menu’ and ‘Products Details’). Please place it on the same page with the ‘Category Menu’ widget and connect them with each other with the help of the e-Commerce connection ID. On the screenshot you can see the ‘store1’ connection ID but you can choose any letters and numbers you like (just make sure that this ID is the same for ‘Category Menu’, ‘Products List’ and ‘Product Details’ widgets.).

All products items which you created in the ‘Category Menu’ will be automatically displayed in your ‘Products List’.

Also you can easily edit widget settings, such as:

Navigation style (Navigation text style, Text over color, Products count label, Next/Previous labels, No products message);
Sort style (Text style, Sort background color, Sort button style, Sort stroke color, Sort by label, Default sort method, Labels names);
Product style (Width, Height, Content padding, Background color and alpha, Corner radius, Stroke thickness, color and alpha, Title style, Description style, Sale price style, Regular price style, Price placement);
Product image style (Width, Height, Vertical/Horizontal padding, Background color and alpha);
Buy button style (Button label, Button width and height, icon settings, Background style, Corner radius, Stroke thickness, Stroke color, Over top color, Over bottom color).

The default currency of the e-Commerce widget is the United States dollar (USD, $) but you can choose other currency. Choose ‘Preferences’ (from the main top menu of the control panel) – ‘Website Preferences’ and change the currency label.

If you have some featured products on your store or there are several hot deals you probably would like to advertize on your home page then you should definitely appreciate this new component. Go to the ‘Widgets’ – ‘e-Commerce’ – ‘Banner Rotator’ and find the best place to locate the banner, then double click it and add a new item for the banner. The image you need to display is a medium size preview picture. You can link it to any page or popup or even to an outside resource. Please don’t forget to press the ‘Add’ button to add the item to the ‘Banner Rotator’. Thus you can add several items in rotation.

Now we have the ready-made banner with two products in rotation. You can adjust it’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).

Shopping Cart

A shopping cart is a must have part of every e-Commerce website, so here it is into the MotoCMS e-Commerce widget. All you need to do is to find the ‘Shopping Cart’ among others e-Commerce components and place it on the website.

This widget shows how many items there are in the customers’ Shopping cart list. To display items which are already into the shopping cart please create a new page/popup where the ‘Shopping Cart List’ will be located and then link the ‘Shopping Cart’ to a new website section.

Shopping Cart List

Now it’s time for the ‘Shopping Cart List’ component. Open the page or popup you’ve previously created for the ‘Shopping cart List’ widget. Find this widget among other components of the e-Commerce widget and place it on the page.

There are some properties for editing:

Basic settings (Table title style, Item text style, After checkout redirect, Table fields labels, Footer X/Y offset, Table border color, Remove icon item, );
Payment Settings (Payment system: PayPal, Google Checkout, Robox, Using email);
Checkout button style (Label, Width, Height, Icon placement and padding, Background style, Corner radius, Stroke thickness).

So here is how your shopping cart list will look like:

Product Details

The ‘Products Details’ widget is a very useful one which will display a detailed information about store products when you click on their images. This product description will be opened in a new popup. To make the widget work correctly please connect it with the ‘Category Menu’ widget within the e-Commerce connection ID.

In stead of the fact that the ‘Products Details’ window is automatically arranged there are numerous settings which can be adjusted:

Basic settings (Image X/Y offset, Title text style, Short description style, Regular and Sale price style, Image width/height, Image background and border color );
Close button settings (X/Y offset,, Width/Height, Icon settings);
Background style (Height, Corner radius, Stroke thickness and color, background color);
Description style (Track width and padding, Description width and height, Description vertical padding);
Buy button style (Close button width and height, Icon placement and padding, background style, );
Thumbnails settings (Images number, Stroke thickness);
LightBox settings (Slideshow delay, Background color or alpha, Button color and alpha, Video sound volume);
LightBox thumbnails style (Images number, button colors, Stroke thickness and color);
LightBox close button (X/Y Offset, Width, Height, Icon placement and padding, background settings);
LightBox mediaplayer skin (Background color and alpha, elements color and alpha, Active color, Fonts style).

Clicking the ‘Preview’ button under the ‘Product Details LightBox’ you can view style changes which were made to the window. Please note that this option schematically shows how the information will be displayed on the website.

Add to Cart Button

You can insert the ‘Add to Cart button’ on any page of your online store. The component’s settings allow to specify all product information you need and to attache an image there.

Dear friends, from now on all these e-Commerce widget components will be presented in all our Flash CMS Online stores templates. You can also buy them separately and easily install to your current template in a matter of couple of minutes.

We hope that this innovative widget will help you to create a successful and profitable online shop. If you have any wishes or comments concerning the further improvement of the widget you’re welcome to write them in the comments field below.

Also we’ll be glad to see your e-Commerce websites in the New 2012 Year! Good luck guys! Let your dreams come true and let your products sell well on the web!