Click here for a printer friendly version

Tutorial Introduction

Welcome!

The Visual WebTools™ V4.1™ suite is a dynamic set of products designed to give small business owners the cutting edge needed to succeed in today's highly competitive e-commerce market. This latest edition of Visual WebTools has been extensively updated, providing much greater control over every aspect of creating an e-commerce enabled Web site.

 System Requirements

The following components are required to properly use the Visual WebTools suite:

• Windows 95 or higher operating system
• Microsoft Internet Explorer 5.0 or higher (Version 6 is recommended)
• A color monitor and video card capable of displaying a resolution of 800 x 600 pixel resolution and a minimum of 256 color capability.

• Internet connection with 28.8 modem or better
• 16 MB RAM (minimum)
• Visual WebTools is not designed for use with Macintosh; however, Mac users can use the Visual WebTools Extensions for Macromedia Dreamweaver and take advantage of all of the powerful tools Visual WebTools has to offer.

Note: If you are using a Macintosh and would like to install the Visual WebTools extensions for Dreamweaver login to your Visual WebTools account by clicking on the ‘Login to Visual WebTools’ link from the Visual WebTools home page located at http://www.pacificwebworks.com. Once you are successfully logged into your account click on the link located to the right of the tools menu. Dreamweaver version 4 or higher is required.

• A CD-ROM drive is not required but is recommended. If you do not have a CD-ROM the application will be downloaded for you when you log in for the first time.

Note: Visual WebTools has been engineered to work with Microsoft® Internet Explorer version 5.0 or above (Version 6 is recommended). If you do not have this browser please install it from your Visual WebTools CD or download it from http://www.microsoft.com/windows/ie/downloads/ie6/default.asp.

Acceptable Use Policy

Pacific WebWorks' terms and conditions prohibit the use of this software for certain activities. For a complete list, refer to the Additional Terms and Conditions within the Introduction section of the online help located at http://help.visualwebtools.com.

By using the Visual WebTools software you agree that you have read and understand the terms and conditions contained therein.

Registering Your Passkey

First you will need to obtain your username and password. If you have a passkey follow the steps provided. If you already have a username and password go to the next section of ‘First Things First!’.

Your passkey is a combination of letters and should be on a label titled "Your Passkey is:" Each Visual WebTools package should contain one.

Once you have located your passkey then complete the following steps:

1. Make sure your computer is logged into the Internet
2. Open your Microsoft Internet Explorer browser
3. Enter the location: http://signup.visualwebtools.com in your browser’s address bar
4. This will bring up a registration web site. Follow the easy instructions on-line to register your passkey. Remember to fill in everything completely and accurately

TIP: Verify you have entered in your correct email address. Once the signup form has been completely filled in and submitted your user name and password will be sent to the e-mail address you have provided.

Note: Depending on our server load your user name and password may take up to 30 minutes to be processed and sent to you.

First Things First!

Installing the WebWizard files:

1. Insert the Visual WebTools V4.1 CD into the CD-ROM drive on your computer.

• Click on the ‘Start’ button in the lower left corner of your screen and then click the ‘Run’ link.

• Type in your CD-ROM drive letter (X:/setup)
  Put your CD-ROM drive letter in place of the X.
• If you do not know what drive letter your CD ROM is, click on the operating system Start button and then choose Run. Another window will open and you will want to click on the Browse button, locate your CD ROM drive and select it.

2. Once the Installation menu appears click on Install Visual WebTools WebWizard. It will install the WebWizard and the Visual WebTools Tutorial onto your computer’s hard drive.

3. If you do not already have Microsoft Internet Explorer 5.0 or higher installed on your computer, you will also want to install it by clicking the ‘Install Microsoft Internet Explorer 5.5 Windows Edition’ located on the same CD-ROM.
   

The V4.1 Environment

To login to Visual WebTools, first make sure your computer is connected to the Internet. Next open your web browser and type http://www.pacificwebworks.com and click on the link of ‘Login to Visual WebTools’ under the Current Subscribers section. Every time you log in to V4.1™, you will see a screen asking for your username and password.

The V4.1 Log in screen

Your user name and password were assigned to you when you registered your Visual WebTools account. If you have not received your username and password or if you have forgotten them, you can contact technical support by submitting a username and password request.

You can submit a lost username and password request by going to http://www.pacificwebworks.com and click on the link of ‘Login to Visual WebTools’, you will then be brought to the login prompt where you will see the link to request your username and password. You can also call us at 1-801-578-9020.

If you have not registered your passkey refer to the section ‘Registering your passkey’ in the beginning of this tutorial booklet.

Once you have successfully logged in, you will arrive at the Tools Manager screen.

The V4.1 main menu screen

From this screen, you can access all the V4.1 tools that are on your account, as well as use the on-line Help and Live Chat Support features. You can also find V4.1 tips, access our Ideas Center and download Visual WebTools Extensions for Macromedia® Dreamweaver.

The V4.1 tools that are assigned to your account are also accessible from the Application Bar at the top of your computer screen.

The Application bar

My Account

From the Tools Manager you can access the My Account control box. This is where you set up all the preliminary items you will need to maintain your Web site and e-commerce account, open and close your site, change your personal information, change your password, set up your domain name, email address forwarding, and submit your site to search engines.

The My Account control box

Open/Close Site
This option allows you to open and close your live Web site. If your site is open, it can be viewed by anyone accessing your domain name on the Internet. If your site is closed, an "Under Construction" page will be displayed when your domain name is accessed.

Edit My Info
This option allows you to update your account data such as name, address, phone number, etc.

NOTE: This information is used by Visual WebTools for many things including the receipt displayed to your customers and domain name registration. It is important that this information is accurate and complete for these functions to work properly.

Change Password
This option allows you to change your Visual WebTools password to something easier for you to remember. We do recommend changing your password upon first time login.

NOTE: For increased security, we recommend that you change your password from time to time.

Edit Domain/Email Info
Your domain name is the unique address for your Internet web site. It’s like your home address that people use to find your house. This option allows you to make changes to your existing domain name, associate a domain name to your Visual WebTools account, register a new domain name or modify your existing email for use with your Visual WebTools account.

View License
Visual WebTools comes with many options and modules. Some of these options and modules may be licensed separately from Pacific WebWorks. This option will show you which options and modules are installed in your Visual WebTools account.

FTP Capability

FTP stands for File Transfer Protocol. It is the way several files at a time are transferred across the Internet. V4.1™ fully supports FTP, which means that you can upload any type of file to your WebWizard™ projects, including sound and multimedia files.

If you choose to use a 3^rd party FTP Client (FTP program) then you will want to use the FTP address of ftp.visualwebtools.com. Once connected to the FTP server you will want to access your space by logging in using your Visual WebTools username and password.

Tutorial

Introduction

The tutorial is designed to give you a quick introduction to the design and e-commerce capabilities of V4.1™. During the tutorial, you will be building a Web site for a fictitious company, TooWheelers.com, a store that sells different types of motorcycles.

While you were installing WebWizard on your computer you also installed the tutorial files. You will access these files later on in this tutorial. The tutorial will walk you through setting up your virtual storefront in WebWizard and implementing e-commerce into your Web site with ClipOn Commerce™. The time required to complete these sections will vary from person to person. Please allow yourself plenty of time to complete this tutorial.

For detailed instructions on any V4.1 component, see the online help. It is located at http://help.visualwebtools.com or visit our frequently asked questions located at http://www.pacificwebworks.com/support/faq_center.asp.

Part 1: Designing TooWheelers.com

Part 1 of the tutorial will show you how to:

• Login to your account
• Name/Rename your project
• Add additional pages
• Create a table
• Create a folder for your images
• Import an image file into a folder
• Create a Horizontal Line using nested tables

• Add/Edit text
  
  

Starting your site

1. In your browser window, point your address bar to: http://www.pacificwebworks.com
2. Click the ‘Login to Visual WebTools’ link under the Current Subscribers section:



Visual WebTools Login Screen

3. The V4.1™ login screen will appear. Enter your Username and Password and click the Login button.

The V4.1 Login screen

4. The next screen is the V4.1 Tools Manager. Click on WebWizard from the Tools Manager.

WebWizard link on Tools Manager page

5. You may also receive a security warning prompt asking if you want to install the ‘VWT ActiveX Control Module’, click on the ‘Yes’ button.



Visual WebTools ActiveX prompt

6. A prompt will appear to inform you that you are about to install the WebWizard Internet plug-in, click Continue.



Visual WebTools Internet plugin


7. If this is the first time you are logging in to WebWizard, a second screen will appear asking you to enter in your username and password to validate your account.




WebWizard account validation


8. The WebWizard will now install several application files to your computer. Download times of these files vary, so please be patient.
   

Creating a project in the Project Editor

1. Once you have successfully logged into WebWizard a prompt may appear to inform you that an index.html page has been created. Click OK.
   
   Note: You must have your first page named index.html for your website to be viewed correctly on the Internet.
2. The WebWizard editor will appear. You will need to rename your First Project to TooWheelers.com.
   



The WebWizard Editor

3. To rename your project click on the Local Files tab (these are called bottom tabs) located next to the Update tab in the lower left corner of the WebWizard screen.

The Bottom Tabs

4. You will now see the file directory windows.

Your first project titled" First Project", will be created automatically for you.

5. From the Tool Bar click on the icon that looks like a yellow folder.
   
   

The Change/Edit Project Editor

6. Select the project name First Project (by clicking on the name ‘First Project’). Then click RENAME.
7. A prompt will appear, asking you to rename your project. Enter TooWheelers.com and click UPDATE. You will be returned to the Project Editor window.
8. In the Project Editor, select TooWheelers.com (by clicking on the name ‘TooWheelers.com’).
9. Click DONE, This will take you back to the project so you can continue working on the tutorial.
   

Adding additional pages

1. From the Tool Bar select the icon that looks like a blue floppy disk.
   
   
2. Next select New Page from the menu (it is the first item at the top of the menu).
   
   

The Save, Import or Create Page Templates menu

3. A prompt will appear asking you for the new file name. Type products.html in the text box.

4. Click OK. The products.html page will appear in the bottom section of the file directory windows.

Importing an Image File

1. From the Tool Bar click the icon that looks like a blue floppy disk then click on the New Folder link (it is the second item from the top of the menu).
2. A prompt (another window) will appear, directing you to enter a name for the new directory. Enter Pictures and click OK. A folder titled Pictures will appear below the TooWheelers.com project title.




3. Open the picture folder by clicking on the yellow folder left of the Pictures folder name. The folder icon will open.



4. From the Tool Bar click the icon that looks like a blue floppy disk then click on the ‘Import File into Project’ link. Another window will open and the File Viewer will appear.
5. Enter c:\pweb\tutorial. This is where the tutorial files were installed on your computer. If this directory does not exist on your computer you need to either install the tutorial from the Visual WebTools CD or download it from the Internet by pointing your browsers address bar to http://www.visualwebtools.com/tutorial.exe.
   
   Note: If you download the tutorial from the Internet then you may need to obtain a zip program. We recommended WinZip. Download WinZip from http://www.winzip.com.
6. When you have located your tutorial files, highlight all of the files in the directory by selecting the first file, then while holding down the shift key on your keyboard select the last file. This should highlight all of the files in the list.
7. Click the Open button. You will be returned to the WebWizard Editor and your imported files will be listed in the file window.
8. Click on the Update tab and the left window will change. Click on the option of ‘Overwrite Live Site’.

Note: You will want watch the FTP Progress bar located below the tabs. The upload could take up to 5 minutes, so please be patient.

9. When the upload has completed click OK to the ‘Update Done’ message.
   

Creating a table

1. After you are returned to the WebWizard click on the Local Files tab.
2. From the top left window, click on the ‘P’ (P stands for project) to the left of the project name of TooWheelers.com.
3. Select the index.html page from the file window by clicking on the picture to the left of the name.
4. From the Tool Bar click the icon that looks like a grid.
   
   
5. Then click on Insert Table.
6.  The Table Editor window will appear within the left window.

The Table Editor window

7. In the appropriate text boxes enter the following information:

• Rows: 2
• Border: 0
• Width: 100 (Do not change the %)
• Columns: 2
• Cellpadding: 1
• Cellspacing: 0

Leave the V-align, H-align, and No Wrap functions at their default values. For information about these terms, see "Tables" in the WebWizard help section.

8. Click UPDATE. You will be returned to the WebWizard editor screen.
9. Number the cells as shown. Remember to erase the number as you work within that particular cell.

Adding an Image

1. Place your cursor in cell 1.
2. From the Table menu, select Increase Colspan. Cells 1 and 2 should merge.
3. Place your cursor in the merged cell 1 and 2.
4. Center your cursor in the merged cells by clicking the Center Justify icon from the toolbar.
5. Click on the Image Editor icon located in the toolbar. Then click on the SELECT button in the Image Editor. (another window will open with the File Viewer window will open).
   
   
6. Click on the Pictures folder then locate the image too_wheelers_logo.jpg and select it.
7. Click on the UPDATE button and you will be returned to the Image Editor with the logo you selected below.
8. Change the size of the image to a Height of 90 and Width of 750. Leave the Align, Border and Border Color at their default values.
9. Click your mouse in cell 1 and 2 so your cursor is within that cell.
10. Click Update in the left window. The TooWheelers.com image will appear in the top cells 1 and 2.

The too_wheelers_logo.jpg image in the table

Step 1: Inserting and Formatting Text

1. Click on the ‘Local Files’ tab.
2. From the top left window, click on the ‘P’ (P stands for project) to the left of the project name of TooWheelers.com.
3. Click on the ‘Pictures’ folder.
4. Select the menu.html file from the file list by clicking on the image located to the left of the file name.
5. Click in the editor window then press your ‘Ctrl’ key and the letter ‘A’ at the same time. This will select all of the text on the screen. Next, copy this text by holding your ‘Ctrl’ key and pressing the letter ‘C’.
6. From the top left window, click on the ‘P’ (P stands for project, as in the project name) to the left of the project name of TooWheelers.com.
7. Select the index.html file from the file list by clicking on the image located to the left of the file name.
8. Now place your cursor in cell 3 then, hold down ‘Ctrl’ key press the letter ‘V’. You should now have the menu text in cell 3.
9. Highlight all of the text (highlight the text by pressing and holding down the left mouse button and dragging it across the text) and click Edit Font from the toolbar. The Edit Font window will be displayed.

The Edit Font window

10. Make the following changes.

• Font: Arial
• Style: Bold
• Size: 12
• Color: Navy

10. Click OK.
11. Highlight the text About Us down through the text Bullet Bikes. Click the Underline button.

13. Highlight all of the Contact Information text. From the Edit Font screen, change the color of this text to gray.

The completed menu text and title

Step 2: Inserting and Formatting Text

1. Click on the ‘Pictures’ folder located in the directory window.
2. Select the main_text.html file from the file list by clicking on the image located to the left of the file name.
3. Click in the editor window, hold down the ‘Ctrl’ key and press the letter ‘A’ at the same time. This will select all of the text on the screen. Next, copy this text by holding down your ‘Ctrl’ key and pressing the letter ‘C’.
4. From the top left window, click on the ‘P’ (P stands for project) to the left of the project name of TooWheelers.com.
5. Select the index.html file from the file list by clicking on the image located to the left of the file name.
6. Place your cursor in cell 4 to the right of the image and then hold down the ‘Ctrl’ key and press the letter ‘V’ to paste. You should now have all of the main_text.html text in cell 4.
7. Inside cell 4 highlight About TooWheelers.com, click on ‘Edit Font’ and make the following changes:

• Font: Arial
• Style: Bold
• Size: 14
• Color: Navy

1. Click on the ‘OK’ button
2. Highlight the rest of the text and click on ‘Edit Font’ and make the following changes:

• Font: Arial
• Size: 12

10. Click the OK button for the changes to become effective.

11. Place your cursor in the top left hand corner of cell 4 in front of all of the text you just pasted in. Press your space bar then press the left arrow key so your cursor is back the first spot of the cell.
12. From your Pictures folder, click on the filename text mainpage.jpg and click the menu option Place in Editor. The image of the Honda Z50R will appear in cell 4.
    
13. Select the image by clicking on the image and eight small handles (squares) should surround it. With the right button on your mouse click on the image and select Open in Image Editor.
14. From the Image Editor menu, enter the following information:

• Height: 190
• Width: 225
• Align: Left
• Border: 0

15. Select the image again. Eight small handles (squares) should surround it.
16. Click UPDATE from the Image Editor.

The resulting page should look like this:

Inserting a Horizontal Rule

Tables are powerful tools for designing Web pages. It is possible, for example, to put a table within a table. When you do this, Web designers call it a "nested table". It is also possible to create a one-cell nested table, and to use it to place text or graphics exactly where you want them. This section shows you how to create a one-cell nested table.

1. From the Tool Bar select the Table Editor icon (it looks like a grid). Then select Insert Table. Enter the following information:

• Rows: 1
• Border: 2
• Width: 100 %
• Columns: 1
• Cellpadding: 1
• Cellspacing: 0

2. Place your cursor at the end of the Main text section and press the Enter key on your keyboard.

3. Click UPDATE and then click on Back at the top of the table editor menu.



The Table Editor window

4. Select the new table by clicking on the table border. Once selected it will be surrounded by eight small handles.
   
5. From the Tables menu, select Edit Table. The Table Editor screen will appear.

6. You can click the Border Dark Color radio button and then click on the color you want within the pallette and the color will automatically be applied. Repeat these steps with Border Light Color and with Background Color.
   
7. Click UPDATE

This table serves merely as a design feature and appears as a horizontal line on your page.

Inserting Text into Nested Table

1. From the Tool Bar select the Table Editor icon (it looks like a grid).
2. Click on ‘Insert Table’ and Enter the following information:

• Rows: 1
• Border: 2
• Width: 100 %
• Columns: 3
• Cellpadding: 1
• Cellspacing: 0

4. Place your cursor below the newly created nested table and press the Enter key on your keyboard.
   
5. Click UPDATE and then click on Back at the top of the table editor menu.
   
6. Select the new table by clicking on the table border. Once selected it will be surrounded by eight small handles.
   
7. From the Table menu, select Edit Table. The Table Editor window will appear.
   
8. In the Table Editor window, click on the radio button next to the Border Dark Color and then click on the ‘Choose a custom color’ and enter in #000000 and click on the ‘Create’ button.
   
9. Click on the radio button next to the Border Light Color and then click on the ‘Choose a custom color’ and enter in #6666CC and click on the ‘Create’ button.
   
10. Click on the radio button next to Background and then click on the ‘Choose a custom color’ and enter in #CCCCCC and click on the ‘Create’ button.
    
11. Click UPDATE

Return to the WebWizard Editor and number the cells as follows:

10. Place your cursor in cell 1 and click Center Justify. Type Street Cruisers.

 

The Center Justify button

11. Place your cursor in cell 2 and click Center Justify. Type Bullet Bikes.
12. Place your cursor in cell 3 and click Center Justify. Type Vintage Bikes.
13. Highlight the text in cells 1, 2 and 3 and click the ‘Edit Font’ button. The Edit Font menu will appear.
14. Make the following changes:

• Style: Bold
• Size: 14
• Effects: Check the Underline box
• Color: Navy

15. Click OK

Adding Images into Nested Table

1. Place your cursor in cell 1 at the end of the Street Cruisers text and press the Enter key on your keyboard.
2. Click on the Image Editor button from the toolbar.
   
   
3. Click Select. The file viewer window will open.
4. Click on the ‘Pictures’ folder.
5. Select cruiser.jpg and click UPDATE.
6. After returning to the Image Editor window, enter the following information to resize the picture:

• Height: 140
• Width: 155
• Align: leave empty
• Border: 1

7. Click UPDATE. You will be returned to the WebWizard editor. The image of a Honda motorcycle will appear beneath the Street Cruiser text.
8. Place your cursor to the right of the image and press the Enter key on your keyboard. A space will appear below the image.
9. Place your cursor in cell 2 to the right of the Bullet Bikes text and press the Enter key on your keyboard.
10. Insert bullet.jpg by following the steps outlined for cruiser.jpg. Enter the same information in the Image Editor.
11. Click UPDATE. The image of a bullet bike will appear beneath the Bullet Bikes text.
12. Place your cursor in cell 3 to the right of the Vintage Bikes text and press the Enter key on your keyboard.
13. Insert vintage.jpg by following the steps outlined for cruiser.jpg. Enter the same information in the Image Editor.
    
    Your page should now look like this.

Linking your pages

1. Click on the picture of the first motorcycle (Street Cruiser). It will have the square handles around it.
2. Click on the Hyperlink Editor icon in the toolbar and the Hyperlink Editor menu will open.

3. Click the link of Open Link Editor and the Hyperlink Editor will open.



Hyperlink Editor

4. Click on the Select… link located under the word "Internal" section. The File Viewer will open.
5. Under the Files window select the Products.html page, then click on the UPDATE button.
6. Repeat the steps 1 through 5 for the Bullet Bikes and the Vintage Bikes.

Completion of your website

To make TooWheelers.com to be a real live site, go through the following completion steps.

1. Click on the Update.



2. Select the Overwrite Live Site option from the left window.




3. A prompt will appear informing you that you are about to save unsaved files. Choose either OK to save or Cancel not to save any unsaved files.



4. An ALERT will then appear and inform you that you are about to make your current project a Live Internet web site. Click Continue.



5. After a few moments an Update Done window will appear when your site is completely saved and live. Click OK.

You now have web pages. You can view your site by clicking on the blue disk icon from the toolbar and then choose the "View Live Site" link.

Part 2: Adding E-commerce

Part 2 of the tutorial will show you how to:

• Add Products to your Website
• E-Commerce enable your Website
• Build a Product database
• Edit Payment and Tax Options
• Create Shipping Options

Because we have already created our web site we will now add the commerce information to sell our motorcycles.

Opening ClipOn Commerce

If you are coming from the WebWizard interface from part 1 of the tutorial.

1. Click on the blue disk icon located in the toolbar and then choose the last link of ‘To Visual WebTools 4.1’.
2. You now will be in the Tools Manager of the Visual WebTools screen.
3. Select ClipOn Commerce™ and the main menu will be displayed.

ClipOn Commerce main page

Adding Products

1. From the Product Manager, select Add/Edit Products and Categories. The Add/Edit Products and Categories window will appear.
2. Select the ‘Top Level’ from the left window.

3. Select Add a Subcategory from the category menu screen. The Add New Subcategory window will appear.
4. In the top text box, replace New Subcategory with Products.
5. Click ‘Create Sub-Categories’. You will be returned to the Add/Edit Products and Categories screen. In the left frame, a folder titled products will appear.
6. Select the Products folder and click Add Products to this Category. This will take you to an Add Products page.
7. Click Add a new product to this category. This will take you to the Edit Product screen. Fill in the information as follows.

Step 1: Enter Product Information

Product #1

• Leave the Disable option at its default checked status.
  
  Note: When you add your own products you will want to make sure the disable option is not checked.
• Product Sku: 750012
• Name: Honda CB750 KO
• Base Price: $7000.00
• Quantity on Hand: 1

Leave the other options set to their default values.

Step 2: Select Image of Product

1. Click Upload to open the File Viewer window.
2. Click on the Pictures folder.
3. Click on the file cruiser.jpg and click UPDATE.

The image will be placed under step 2.

Step 3: Enter Product Description and Keywords

In the text box titled Description, enter the following text:

A motorcycle ahead of its time, the 1969 CB750 KO was a manufacturing landmark for Honda. This bike is in perfect condition and is exceptionally powerful.

In the text box titled Keywords enter the following text:

Honda, motorcycle, vintage

Step 4: Define Options and Variants

Since no options are available for the motorcycle, skip this step. For more information on this section, refer to the ClipOn Commerce™ on-line help.

Step 5: Key Features

Enter the following key features. Separate each word or phrase with a semicolon. "1969 Model; Classic Bike; Powerful "

4. Scroll back to the top of the page and click on Update Add Product.
5. Click Add a New Product to This Category. The Edit Product screen will appear. Repeat the previous steps for this section with the following information:

Product #2

• Sku: 996012
• Name: Ducati 996
• Price: $8000.00
• Upload Image: bullet.jpg
• Description: Type What's not to love about the sleek and sexy looking Ducati? But this bike isn't just a pretty face; it's got the speed and power to match.
• Key Features: Type 2000 Model; FireEngine Red; Low Miles

6. Repeat steps 4 and 5 of Product #1

Product #3

• Sku: 77012
• Name: Honda CB77 Super Hawk™
• Price: 6000.00
• Upload Image: vintage.jpg
• Description: Type ‘The beginning of the Honda sport bike, this machine paved the way for speed and power on two wheels’.
• Key Features: Type Original Parts; Perfect Condition; Collector's Bike

7. Repeat steps 4 and 5 of Product #1

Edit Payment and Tax Options

1. From the ClipOn Commerce main page, select Edit Payment and Tax Options. The Edit Payment and Tax Options screen will appear.

Edit Payment and Tax Options

2. Click the check box next to the Visa and the MasterCard icons for Online payment Methods.
3. Under the Security Option, select the Yes option.
4. Enter in the tax that is for your state.
   (Always consult with your state sales tax authority)
5. Scroll to the bottom and click UPDATE. Your page will refresh and the changes will become effective.
6. Click BACK at the bottom of screen and you will return to the ClipOn Commerce main page.
   

Creating Shipping Options

1. From the ClipOn Commerce main page, select Edit Shipping Options from the Store Manager. The Edit Shipping Options screen will appear.
   

The Edit Shipping Options screen

2. Under the Add Option link check the checkbox to the left of the word Active.
3. Replace the text in the first New Shipping Method Text box with 2 to 4 Weeks.
4. Select the Dollar Amount radio button under Calculate By.
5. Click on the link of Add Range.
6. In the Amount box, change the $0.00 to $300.00.
7. Click UPDATE
8. Click BACK at the bottom of screen and you will return to the ClipOn Commerce main page.

Creating a Product Template

1. Now log back into WebWizard by clicking on the WebWizard link at the bottom of the screen.
   
   (You may receive a message stating you are about run the WebWizard Internet Plugin. Click on the Continue button to proceed into WebWizard.)
2. From the Menu Bar select the icon that looks like a package.
   
   
3. Scroll to the bottom of the Product Editor menu and choose Edit Product Template.

The Product Template Editor will be displayed.



The Product Template Editor

You will have 2 steps to modify.

4. In step 1 there are several item choices available to include in your product template. Next to each item is a radio button. To include an item in your template, click its radio button.

5. You can also select the font, text size, text attribute, and text color of each selected item. To edit each item's options, select its radio button. For this tutorial, choose the following options:

• Product name: Font=Arial Size=Regular Color=#003399
• Product Sku: Font=Arial Size=Regular Color=#003399
• Short Description: Font=Times Size=Small Color=#000000
• Base Price: Font=Arial Size=Small Color=#666666

6. Add-to-Cart Button: This is the shoppingcarticon.gif image available from your Pictures directory in the project window.
7. In step 2 click on the first dropdown list to the left of Change Template and choose Full product Template.

The element dropdown is where you would choose what you want to display about the product (product name, base price, product sku…)

8. Click on the dropdown list and choose the element you want to display within your product template on your webpage.
9. After you choose the element click on the Add Selected Element link to the right.
10. You will then be able to drag and drop the selected element into the preview window below.
11. After setting up your product template, click on the Commit link, located at the upper right corner of the Product Template Editor and you will be returned to the index.html page of your project.
    

Add E-commerce to your WebWizard page

1. From the Bottom Tabs, select the Update tab and choose the Product and Channels data option (you may be prompted for your password). This will download the information from the ClipOn Commerce database to your local project.
   
   NOTE: The FTP Progress Bar, below the left window will indicate progress of download. You will receive an Update Done message when the data transfer is complete.
2. From the TooWheelers.com project, open the products.html page by clicking on the icon located to the left of the file name.
3. From the Menu Bar select the icon that looks like a package.
4. Click on Add Category/Product option from the Product Editor menu.

5. The Add Product Tool window will open. This window will list the category you created in the ClipOn Commerce area.



Add product Tool

6. Click on the Products category.
7. Select the Honda CB750 KO
8. Click Place Product in Editor. The product will now appear on the products.html page in the format you created from the product template.

9. You will now want to repeat the steps 1 through 8. For the other 2 other products.

Please see the next page for the completion of your web site.

Complete Adding E-Commerce to Your Site

To update your TooWheelers.com site, go through the following completion steps.

1. Select the Update Tab and choose the Overwrite Live Site option.



2. Click on the Overwrite Live Site option from the left window.




3. When the Overwrite Live Site option is clicked a prompt will appear, informing you that you are about to save unsaved files. Choose either OK to save or Cancel not to save any unsaved files.




4. An ALERT will then appear and inform you that you are about to make your current project a Live Internet web site. Click Continue.



5. After a few moments an Update Done window will appear when your site is completely updated. Click OK.

Congratulations!

You have completed building your tutorial website.

Creating Your Own Custom Web Site

You will now want to change the content of your TwoWheelers.com tutorial website to your own personalized website.

1. From the Tool Bar click on the icon that looks like a yellow folder.
   
   
   This is the Project Editor icon and when clicked on it will open the Change/Edit Project Editor.

The Change/Edit Project Editor

2. Click on the button that shows NEW.
3. The window will change and will have you enter in a Project Description (name of project). This name is something for you only and will not be seen by the customer. Enter in ANY name you wish.
4. Click the CREATE button and you will be returned to the Change/Edit Project Editor window. Where you will see your new project name as well as the TwoWheelers.com project name.



The Change/Edit Project Editor

5. Click on the name of your new project.
6. Click the DONE button.
7. Your screen will now refresh and you will be returned to a blank WebWizard screen where you can build your own personalized website with the knowledge you have gained by learning the functionality of the Visual WebTools.

Thank You!
We really hope you enjoyed this guide!

For more detailed information about how to use any of the products you have, please visit:

http://help.visualwebtools.com

Pacific WebWorks, Inc.
180 South 300 West #400
SLC, UT 84101

Administration Office 801.578.9020
Fax 801.578.9019

For Sales, please email:
Info@pacificwebworks.com

For technical support on the Visual WebTools product, please visit:
http://www.pacificwebworks.com/support/