Melbourne IT The Ecommerce Widget Guide - user guide

Melbourne IT The Ecommerce Widget Guide - user guide

TABLE OF CONTENT Overview 3 Creating the Online Store 3 The Shopping Bag 5 Store Management 7 Getting Started 8 Catalog 9 Adding a Product 10 Removing a Product 12 Importing products 12 Adding a Category 13 Removing a Category 13 System Settings 14 Defining Shipping Methods 14 Defining Payment Methods 15 Orders 16 Orders Page 16 Uncompleted Sales 16 Customers 17 Appendix A - Additional Features 18 Promotions Tab 18 System Settings 19

OVERVIEW This document describes the Ecommerce solution integrated in your Website Builder. The Ecommerce widget allows you to easily add a store to any website by adding the Online Store widget and other related widgets to the site pages. The store details will be defined through an integrated Control Panel in the system. Creating the Online Store Once the package is defined, the Online Store widget and Shopping Bag widget will be displayed in the Advanced tab, located in the left-hand panel. Follow these steps to create a new Online Store: 1. Click on the Advanced tab. 2. Scroll down to the Online Store widget. 3. Drag and drop the Online Store widget onto the Canvas. Note: The Online Store widget cannot be dragged to a repeated area of the website (Only relevant for websites created with a repeated area in their template). 4. An Online Store Editor will pop-up, allowing you to customize the store s design and features: Manage Store Add products, define services, etc. For more information, see the Store Management chapter. Show Shopping Bag (Enabled by default) Enable/Disable the Shopping Bag widget in the Store. If this option is disabled, no shopping bag will appear on the screen. A separate shopping bag widget can be added to the canvas area. For more information on the Shopping Bag widget, see the Shopping Bag Widget section. Show Categories Tabs (Enabled by default) Enable/Disable the Horizontal Categories Tabs above the store products.

Show Products Search (Enabled by default) - Enable/Disable the search bar in the store. The search results display information from the following fields: Product name, product description, product SKU, product options, category name. Store Type (Read-only area) - Specifies the store type in the package (Basic or Premium). Products Layouts (Grid by default) Defines the layout of the store s products. The site visitor can change the view using the View As field. The available layouts are List, Grid or Table. Products Per Page (9 by default) Defines the number of Product items that are displayed per page. Categories Per Row (3 by default) Defines the number of category items that are displayed per row. Products Per Row (3 by default) - Defines the number of Product items that are displayed per row. Since this field is only relevant for the Grid layout, it is enabled only when Grid is the selected Products Layout. 5. After customizing the store, click Submit. The Online Store widget will appear on the canvas according to the defined settings.

The Shopping Bag The Shopping Bag feature is a practical addition to any store. The feature allows the site visitor to: Keep track of how many items are currently in the shopping bag. Add more items to the shopping bag by dragging and dropping the item from its location in the store to the shopping bag. Jump directly to the Checkout screen by clicking on the shopping bag. When an Online Store widget is added to the website, the shopping bag is added by default to the bottom right corner of the screen. As mentioned in the previous section, the shopping bag can be disabled from the Online Store widget by clicking on the widget s edit button and unchecking the Show Shopping Bag. A separate Shopping Bag can be added to any page on the site by dragging and dropping the Shopping Bag widget to the canvas. If the shopping bag widget is added to a canvas that already contains an online store widget, it will replace the default shopping bag that comes with the Online Store widget. If the Shopping Bag is added to a page that does not include the Online Store widget, the enduser will be transferred to the checkout screen on the page with the Online Store widget when they click the Shopping Bag. In sites based on a template with a repeated area, the Shopping Bag widget can be added to the repeated area as well. All Shopping Bag widgets on the site will display the same information.

The Shopping Bag offers two radio button options: Static (Default option) The Shopping Bag will be fixed to the bottom right corner of the screen. Floating Sets the Shopping Bag to float over the site and stay on the right bottom corner of a page when scrolling. The end-user can use the mouse to drag and drop the Shopping Bag to any location on the page.

STORE MANAGEMENT In this chapter we will learn all about the Store Management system. Store management is performed via the Ecwid control panel. The control panel is an integrated part of the RapidBuilder DIY and will be displayed when the user clicks the Manage Store button. The Store Management control panel opens by default in the same language as the site s interface language. When changes are made through the control panel (and saved), the changes are automatically changed in the website. There is no need to republish the site. You will notice that, like the DIY system, the Store Management system is friendly and intuitive.

Getting Started Once you have configured the layout and location of your store, there are 3 basic steps to having your Online Store up-and-running: 1. Add products and categories. 2. Add payment methods. 3. Add shipping methods. All these and many more options are located in the Store Management control panel. If you are opening a new online store, follow the steps from the previous chapter on adding an Online Store and then click on Manage Store. To edit an existing store, hover over the Online Store located in the canvas and click on the editor, located on the right hand side of the toolbar. Click on Manage Store to access the control panel

Catalog The Catalog area is where you add, remove and change products sand categories. Let s start by clicking the Catalog tab. The Products screen will open by default. Note: Any change made to the catalog is automatically reflected in the Online Store widget in the site.

Adding a Product 1. In the Products section, click on the New Product button. 2. In the General area you will add the basic details on the product: a. SKU - Stock-keeping Unit. This is not a mandatory field. If you do not want to use SKUs in your store, leave the text box as is. b. Weight - Weight may be important for shipments of the product, price by weight calculations, etc. If you do not include weight details, your online store will regard your product as an intangible item, meaning it does not require shipping (such as downloadable media). To change weight units for your store, see the System Settings article in Appendix A of this user guide. c. Name - Add a name to the product. d. Categories - You can assign the product to a category or categories. If no category exists yet, you can click the Manage categories (global) link and add a category. If you do not assign the product to a category, it will display on its own in the store. e. Description - Add information on the product using the Description Editor. f. Product Image - Add an image of the product. You can add more images by clicking the Gallery tab or by clicking the Manage Galleries below the Product Image. g. Price - Give the product a price. h. Preview Product - Click the Preview Product link, located above the price area, to view the product before adding it to the store. i. Save / Save & Close / Ctrl+S - Click to save the product and add it to the store. j. To edit the product again, click on the products tab and click on the product s name or check the product in the filter column and click the modify button.

Important Note: There is a wealth of additional advanced features in the product management system, such as Availability and Stock, defining options for the product, gallery of images of the product, tax and shipping options and related products. To learn more about each option in the product area, visit Ecwid Products topics.

Removing a Product 1. In the Catalog tab, click on Products. 2. Click the X button next to the product. 3. Confirm the deletion by clicking Yes in the window that appears. Importing products The system lets you mass import products using a CSV file that can be worked on using a spreadsheet program, such as Excel, Open Office and Google Docs. The Import option is very handy for re-arranging or changing a large quantity and range of products. To import products to the Online Store: 1. Create a test product in your store. 2. Export it to a CSV file. 3. Open the file in a spreadsheet editor and use the testing product as a template to create a CSV file for all your products in the store. 4. Import the CSV file by clicking on the Import products button in the Products tab.

Adding a Category 1. Click on Categories. 2. Click the New root category button. 3. Add general details in the dialog box that opens Name, Availability, Category Image and Description. 4. You can add products to the category by clicking the Category products tab, then clicking the Add Products button and selecting which products to add. 5. Click Save. Note: You can add subcategories under each category by clicking on the category and clicking on the New Subcategory button. The process is the same as adding a category. The subcategory will be listed as a child of the category. Removing a Category 1. Click on Categories. 2. Select the category or subcategory you want to remove. 3. Click on the Delete category button. 4. Confirm the deletion by clicking Yes in the window that pops up. Note: Deleting the category will not delete its products, which will be available in the products page of the Catalog tab.

System Settings The System Settings tab holds important functionalities of the system, including shipping methods and payment methods. These must be defined in order to get the online store up-andrunning. Defining Shipping Methods 1. Click on the System Settings tab. 2. Click Shipping in the sub-menu. 3. In the Shipping Methods tab, click on New Shipping Method. 4. In the new window that pops up, define the following: a. Select shipping region Define where the product can be shipped to. To create a new region, click the Create new link. This will create a new zone. To manage existing shipping regions, click the Manage link. b. Select how you calculate shipping Flat rate One rate for all shipments to the region (free by default). Custom table - Calculate shipping costs based on number of items, weight or total cart price. Carrier-calculated Let the system calculate the shipping costs based on carrier rate tables (UPS, FedEx, UFPS, etc.). 5. Continue to the next steps by clicking the button at the bottom. The path is defined based on the calculated shipment method you selected. 6. Click Save at the last step.

Defining Payment Methods The Store Management system has many payment options to choose from. To setup the payment methods, follow these steps: 1. Click on the System Settings tab. 2. Click Payment in the sub-menu. 3. Activate/Deactivate a payment method: In the Payment Methods tab, each payment process can be enable or disabled from the online store. 4. Payment Processor: There are 3 main payment options Online methods (Credit cards and payment systems such as Paypal and Google Wallet), offline methods (Check, Fax order, Money order and Phone order) and Echecks. The online methods require you to setup an account with the relevant provider for each payment method. With these methods, payment is immediate. The offline methods require you to process the information the customer provided manually. 5. Customer Instructions: In the Payment Methods column, you can add a note that will appear under the payment method. Hover over the payment method and click on it when it becomes highlighted in green. You can add specific instructions for the customer on each payment method. Click Instruction for Customer and enter the instructions in the editor that pops up. 6. When completed, Click Save.

ORDERS Orders Page The Sales tab contains all the orders that were made in the Online Store. Orders Page The Orders page enables a view and update of each order. 1. Viewed By clicking on the order itself or on the See details button. 2. Update Payment Status Define if the order has been approved, declined, cancelled, queued, chargeable. 3. Update Fulfillment Status - Define the status of the order: New, processing, shipped, delivered, will not deliver. 4. Print Invoice Opens a new print window with the invoice. 5. Ship Add the order tracking number to the order. Uncompleted Sales This page displays all the ordering attempts that did not complete the payment process. The store manager can use the information on this page to contact customers to help them complete their orders.

CUSTOMERS The Customers tab allows the store manager to manage clientele (delete, modify), to search for a specific customer using the search or filter features, to view orders and to export the customers list to a csv file.

APPENDIX A - ADDITIONAL FEATURES There are many additional advanced features and settings that are available in the Store Management system. Store managers can use them to create a specialized online store. Discover these features on your own or visit Ecwid s Knowledge base for more details. Promotions Tab Add discount coupons with code, offer bulk discount pricing and add the store to Facebook. For more information on discount coupons, see Ecwid s discount coupons article. For more information on bulk discount pricing, see Ecwid s bulk discount pricing article. For more information on adding a store to Facebook, see Ecwid s Facebook article. To see a demo store on Facebook, Click here.

System Settings This User Guide explains the basic steps for creating and managing an Online Store. There are more features and settings available in the System Settings tab. In the General Menu, the store manager can make the following definitions to the store: Store Profile Define store profile details (Name, email, address, city, state, country and phone number) Formats & Units Define the currency, weight unit and date and time display format for the online store. Languages - Define multilingual translation for the storefront (Active by default). Cart - Define how the Catalog, Checkout and Product will look and behave for the site users. E-goods Digital or virtual products are uploaded to the store and offered to customers. After a customer purchases the product, they will receive a link to download the virtual product from. The lifetime of the link and the number of download attempts are defined in this tab. For more information, see Ecwid s E-good article. More definitions are available in the other menus of System Settings tab: Zones - Adding more destination zones for shipping orders. Shipping See Defining Shipping Methods chapter. Taxes - Adding taxes to products based on their destination zones. Payment See Defining Payment Methods chapter. Design - Customizing each part of the online store using custom CSS themes. Mail - Defining mail settings and notifications to customers. For more information, see Ecwid s Mail Notification article.