iCat                      

For use with NetObjects 4.0

This Tewtorial teaches you how to create and use an iCat Commerce Cart in order to commerce-enable your Web site and transform it into a fully-functional online business.

1.  What is iCat?
The who, what, where, when, why, and how much of iCat.  Everything you need to know before getting your commerce cart into action.

2.  Registration with iCat:  Step-by-step instructions for setting up your iCat store.

3.  Editing  your iCat store: Step-by-step instructions for customizing your iCat store.

4.  Connecting iCat with your Web site: Step-by-step instructions for placing iCat components onto your Web site.

5.  Using iCat's Daily Sales Reports: Step-by-step instructions for using iCat sales reports to process, track,  and research orders.

1

  
  What is iCat?

A set of NetObjects Fusion components for iCat Commerce Online.  Using an interactive wizard, site-builders can connect to iCat Commerce Online.

iCat offers many features:

• Ability to sell up to 1,000 items.
• Full on-line ordering capabilities.
• Shopping cart functionality.
• Several payment options.
• Automatic tax and shipping charge calculations.

Imagine a popular street in the City; we'll call it "Web Street."  On Web Street there are two stores where you can buy jewelry. One is from a guy on the corner in a trenchcoat and the other is a nicely designed location that not only looks safe, but when you enter, you are greeted by a professional looking salesperson.  Ok, which store would you feel more secure buying from?  The same is going to happen on-line.  If you don't have a respectable looking establishment, you will not be able to sell your product or service.  Since iCat offers you this professional look, it is obviously a great choice for creating your on-line store.

How much does it costs?

 $  99.95 a month for up to 100 items
 $149.95 a month for up to 250 items
 $199.95 a month for up to 500 items
 $249.95 a month for up to 1,000 items

All Commerce Carts are  free for the first 30 days.  So why not try it out - if you don't like it, cancel your Cart with no obligations.

 

Now that you have the basics, let's learn how to set it all up.

2

  
  Registration with iCat

Make sure your display is set to at least 800x600 resolution and that you are using at least a 4.0 version Web browser.

Don't have the latest version of your browser?  Click one of these and you will.

Okay, sign on to iCat's Web site at www.iCat.com. 

That will bring you to this page:

We will be building a Commerce Cart.

Click on the "Show me more button" below and to the right of the guy with the funky mustache.

You are then taken to a page titled "iCat Commerce Cart."  This page tells you more about the ins and outs of building and managing your cart.  Feel free to read the information for more motivation toward your decision. 

If you are going to read:

When you are finished reading, click on the Build your Commerce Cart now link. 

If you already know all you need to know and just want to get started:

Click on the "Build It Now!" button on the top left navigation bar.

This brings you to a page titled "iCat Commerce Online." 

Click on the "Create New Store" button.

This brings you to the "Registration" page.

From this page you go through five steps to provide iCat with enough information to create your Commerce Cart.  You can tell what section you are on by looking at the red box in the "Steps" list, located at the top right of the page:

From this point you're on your own - don't worry, the forms are easy to fill out and iCat gives you detailed instructions above each entry.  But, I do want to touch on a couple of things before you continue.

Promotional code
On the first page at the bottom you will notice this:

The promotional code field is used for customers who have received special offers or promotions from different parties.  If you do not have a promotional code, you may leave this field blank and continue with the registration process. 

HTML editor
On the page titled "Web Retail Service," at the bottom, be sure to select NetObjects Fusion as your HTML editor.

When you have completed your registration, you have the option to continue with editing your store.   Instead of clicking on the "Edit My Store" button:

Exit the Web site and go check your e-mail for confirmation of your registration.  When you are done, continue to Step 3.

 

3

  
  Editing your iCat store

Ok, now it's time to finish setting up your store.  After you have read the e-mail confirmation from iCat,  it's time to sign back on to their Web page. 

Sign on to iCat's home page at www.iCat.com .

Notice the sign in the area at the top left of the page.

Type in your User Name and Password, then hit the "Log-In" button.

This brings you to the "iCat Commerce Online" page.

This is the page from which you conduct all of your future iCat and Commerce business.  There are five areas you will be working with:

1.  Store Design
2.  Item Entry
3.  Checkout Options
4.  View Cart Links
5.  Sales Reports

The first four will be used the day you set up your store and in the future when you want to edit items or links from your Web site.  The fifth selection, "Sales Reports," is the one you will be using daily. 

Ok, let's get started.

Click on the Store Design button.

This brings you to the "Store Design" page.  You don't have to make any changes here, but if you want more control over the look and feel of your shopping cart, then this is where you go.  I highly suggest you at least edit the background so it is the same as your Web page - otherwise, people feel as if they are leaving your site.  Better to maintain the same look and feel.  Consistency is key!

On the Store Design page, you can upload your own images to replace those on iCat. 

If you haven't finished building your Web page - then come back to this page later. 

You can change either your "Custom Graphics" (background, navigation buttons, and cart graphics) or "Ordering Pages" (font, color, and privacy policy).

You are automatically on Step 1 - "Custom Graphics."

Find the drop-down box.

If you select "Store Graphics," you will be changing the style/color of the background.  If you select "Shopping Cart," "Navigation Buttons," or "Shopping Cart Graphics," you will be customizing your own buttons and page headings.

Scroll down farther to view the default background and the link to customize your own graphic.

Click Upload Custom Graphic.

A File Transfer page appears. 

Browse your hard drive for the graphic background used on your Web site.  Once found, click "Go."  

Your background will be uploaded to iCat and appear under "Custom Graphic." 

Now, choose "Shopping Cart Navigation Buttons" from the drop-down box.

You will be shown all of the buttons used in iCat.  To use a custom button, click Upload Custom Graphic and follow the same steps as described for uploading a background.  Since you will need to create these buttons in a graphics editor - you will need to return to this page later.

Now, let's go to "Ordering Pages."

Click on the link found under "STEPS." 

Here you can choose which font and color you want throughout your shopping cart. 

Click "Yes" to select a new font. 

You will then be given font options.  The same works with changing font color. 

To customize your Privacy Policy, click "Yes" under that option and insert your privacy policy.  If you are interested in iCat's policy, click the small "Privacy Policy" link under "Tell Me How."

Make sure you test the new look of your pages after any and all uploads.

 

The last step, "Summary," just lets you know what you have customized.  Ok, let's move on to "Item Entry."

Click on the "Main" button.
 

This will return you to the "iCat Commerce Online" page.

Click on the Item Entry page.

Before you start on this page, make sure you have a list of all of the products and related information.  Each item will need the following information:

1.  Item Name
2.  Manufacturer (optional)
3.  SKU #
4.  Price
5.  Item Description (Promotional)
6.  Item URL (Promotional)
7.  Styles or Colors

Once you have your product list and information.

Click on the "Add Item" button from the "Item Entry" page.

You will be taken to the "Specify Item Information" page.

Fill out the boxes with the related information.

In the price field, you are not required to enter a dollar sign ($).  Also, the Description and Item URL are not listed on your shopping cart.  They are only used if you plan to join iCats Promotional Services.  In other words, there is no need to waste time entering information that you won't use....Skip It!

 

Item options how-to
If you have different options for your items (i.e.,  styles and colors), you will need to enter them under: Option #1, #2, and #3. 

On the first line, type in the description name, such as color or size.

Below that, list the actual options, such as red, blue, large, small, etc.

Combinations how-to
Let's say an item comes in blue, size large but not in size medium, you then need to do the following:

Click the "Specify Combinations" link. 

You will be taken to the "Item Option Combinations" page. Here, you can remove all options that do not apply to your products.

Click "Finish" once you have completed the information for an item. 

Repeat this process until you have completed your items list.

To edit your items, simply click on the item name and the "Specify Item Information" page will appear and you can make your changes.  To delete an item from your list, click the red Delete link.

 

Let's move on to "Checkout Options."

Click the "Checkout Options" button.

You will be going through the following steps:

You are automatically on Step 1, the "Payment Options" page.

Next, simply choose the forms of payment you offer by clicking Yes or No.

If you don't already have a company to process your credit card transactions, you can research iCats services from this page.

 

Use the "Currency Format Options" table if doing business outside the United States.  If not, skip it!

Click the "Next" button to move on to Step 2, "Specify Shipping Options."

Here, you will enter the amount charged to your customers for shipping.  If you want to charge the customer by each item purchased, click "By Item."

Fill in each chart relating to the method of shipping (standard, two day, or next day).

Select "Yes" if you want to "Apply International Shipping Surcharge."

Place an amount in the "Default Surcharge" field to have every country charged the same amount.  To select specific countries, such as the United States or Canada, scroll down to find the country and place an amount in the box to the left.

Click the "Next" button to continue on to the "Specify Tax Rates" page.

You can charge tax by Zip Code, state, or item.

Click "Save" when you're done.

Click the "Next" button to move on to "Specify Required Info." 

This form is defaulted with iCat's required info, but you can edit it to your own liking.

Click the "Next" button to "Specify Options." 

If you click "Yes" for any of these options, be prepared to enter custom information.

Click the "Next" button to view a summary of your store's options. 

Click "Finish" to go back to the main page.

Ok, we're pretty much done with the basic setup for our store.  Now we need to create links between our Web pages and iCat.

4

  
  Connecting iCat with your Web site
 

Click on the "View Cart Links" button.

What you see is your "Cart Links List," which comprises all of the items you have entered into your store. 

Since you are working with NetObjects Fusion and iCat components, the only thing you have to worry about is the "Item #."  This is the number code you attach to your "Add to Cart" button on your Web page.  We will get to that soon.

Scroll down to the end of your list and click the "E-mail links" button.

Adding iCat components to your Web site

Open NetObjects Fusion.

In "Page View," go to the Home Page on your Web site.

Open iCats Components toolbar: View>Toolbars>Component tools>iCat E-Commerce Components.

The iCat e-Commerce Components toolbar will open.

If you do not have the iCat Commerce Components, go to the e-mail sent to you from iCat and download an updated version of components. Click here for iCat components.

 

Click the "Built with iCat" technology button, and then click on any area on your Web site.

A "Built by iCat" button appears.

You must place one of these buttons on your first/home page for the rest of the buttons/links to work.  This links your site directly to iCat's Web site.

Click the iCat button to bring up the "iCat Built Properties" palette. 

Now, retrieve the e-mail sent to you by iCat.

Find and copy your "Commerce Cart URL." 

Paste this URL in the "iCat Built" field in the "iCat Built Properties" palette.

Now, let's place an "Add to Cart Button" to your Web page.

Navigate to a page that describes one of your products.

Here is an example from my Web site.

Click the iCat "Buy Now" tool from the iCat E-Commerce Components toolbar and click on the  area in your Web site you want it to appear.

An "Add to Cart" button appears.

This will be the button shoppers will click when they want to purchase an item from your Web store.

The default " Add to Cart" button may not match your site style; we will show you how to change this in just a bit.

Click on the "Add to Cart" button.

The "iCat Buy Now Properties" palette will appear.  You will see three things: Item ID, Return URL, and Image. 

Select Item ID in the "iCat Buy Now Properties."

Fill in the field with the item number for that product. 

You can get this from the e-mail with the list of your links and ID numbers.  The ID tells the iCat Commerce Cart which product to add to the cart when the button is clicked.

Select "Return URL" and fill in the field with the appropriate address.

This is the Web page you want your customers to return to after ordering that particular item or to continue with shopping.

If you want to change the button graphic:

Select and highlight "Image" then click the box with the three little dots (browse).

Navigate to and select your image and hit "Open."

You can easily copy one custom "Add to Cart" button and paste it next to each item on your Web site.  This way the "Image" and "Return URL" are already entered in the Properties palette.  All you need to do is change the Item ID.

 

Now, let's add a "View Cart" button.

Click on the iCat Shopping Cart tool and then click on the Web page where you want it to appear.

A very interesting (some might say "ugly") shopping cart button will appear.

This button will give the shoppers the ability to look in their cart, without adding new items to it.

Click on the Shopping Cart button to bring up the "iCat Shopping Cart Properties" palette.

Make adjustments using the same steps as discussed for editing the "Add to Cart" button. 

Click "Preview" and click on the "Add to Cart" and "View Cart" buttons to make sure they are working correctly.

This also will give you a chance to see what your shopping cart will actually look like. 

Follow the ordering process and be the first to place an order.

This will allow you to see and experience exactly what happens when a shopper visits and makes a purchase from your site.  When you are done and everything is working properly:

Repeat the process and place "Add to Cart" and "View Cart" buttons on all of your product pages.

When you are done and the Web site is good to go, Publish the site to your server. 

Be sure to test it again on-line to make sure everything is working properly.

Now, let's move on to the last step in our tutorial - the Sales Reports page.

5

  
  Using Daily Sales Reports

Go to the iCat Commerce Online page.

Click on the "Sales Reports" button.

You will be taken to the Reports Page.  On the left  side of the page, you will see a Calender.   Here, you select the dates or Reporting Period you want your reports to cover.  iCat will only show you information for the From and To dates selected.

You can view a variety of reports:

Customer List
Lists the personal information (including the customer ID, name,  address, and date when first ordered) for all customers.

Best Customer List
Lists a summary of total sales for each customer who has made a purchase within the time frame requested.

Orders by Item
Lists number of times each item in your list was ordered within the requested reporting period.

Orders by Customer
Lists a summary of orders for each customer, registered or not, who has made a purchase.

Orders by Payment Method
Shows how many orders, percent of sales, and total amount of sales for each available payment method.

Order Summary
Lists a summary of all orders by invoice number (easiest way to research and track orders).

Delete Orders
Be very careful, all your of orders for the selected time period will be deleted if this option is clicked!

The Order Details report shows customer information, items, quantity, and payment method for each order placed.

How you choose to process and file your reports is up to you.  The "Order Details" report is great to use for all of your business needs.

Once you have shipped your customers their items, you can update the "Order Details" report with shipping information.  You also can have an Update e-mail sent to your customer,  just click the "Save" button at the bottom of the page.

That's it for the iCat Tutorial.  I hope this lesson was helpful and you are now well on your way to creating a successful on-line Web store.

Have a great day!

About the Author Rick Tew is the founder of Tew Ryu the Martial Science.  His programs focus on three areas of human development: Mind- personal development seminars Body- physical energy through martial arts  Spirit- team travel and adventure When he isn't busy with the above, he enjoys expressing his creative talents through writing and web site creation.