CLOSE this help screen to edit your page. To return to it, Click the "Help" link on your product page templates (while in "EDIT MODE")

All the help you need installing the Cart
Editing the Product Page Templates
Step by Step "How To" Guide to editing the product templates.

Change the following variables by clicking the [Edit File Now] button in the other browser window. Change each of the variables according to these instructions.
  1. Item Number (itemIDnmbr)
  2. Item Name (short) (itemsNamSt)
  3. Item Name (long) (itemLngNme)
  4. Long Description (itemLngDsc)
  5. More Link (moreDescPg)
  6. Stock Number (itemStockN)
  7. Item Price (itemSalePr)
  8. Item Taxable? (itemTaxabl)
  9. Item Weight (itemWeight)
  10. Item Size (itemsSize0)
  11. Item Color (itemsColor)
  12. Item Feature #1 (itmFeatur1)
  13. Item Feature #2 (itmFeatur2)
  14. Item Feature #3 (itmFeatur3)
  15. Item Feature #4 (itmFeatur4)
  16. Include Buying Tips (includeTip)
  17. Include Thumbnail Photo (thumbNailp)
  18. Tumbnail Type (thumbsType)
  19. Tumbnail Width (thumbNailw)
  20. Tumbnail Height (thumbNailh)
  21. Enable Zoom Image (enableZoom)
  22. Zoom Image width (zoomImagew)
  23. Zoom Image height (zoomImageh)
  24. Default Quantity (defaltQnty)
  25. Table BG Color (tableColor)

Back to Top of the page Back to top

After you have edited all of the variables and like what you see. Save this file and come back to itemIDnmbr and start all over again for item2.html, item3.html, item4.html, item5.html and so on until all of your items have a corresponding ITEMx.HTML page. IMPORTANT! Each time you save a file and begin a new one, SAVE AS the next filename before you change anything else. The most frustrating thing that can happen is accidentally overwriting a product page after working on it for several minutes.

Item Number

This is the cart's "item ID number" for your product. ALWAYS start with ONE (1) and NUMBER REMAINING ITEMS SEQUENTIALLY! This is NOT your stock number, this is the item number the Real Soft Shopping Cart uses to identify and keep track of which product is being bought.

IMPORTANT!: As soon as you have changed this number, SAVE THE FILE AS ITEMx.HTML Where "x" is the itemIDnmbr you just entered.

For example. If you are starting with your first page, leave this variable set to one and SAVE AS "ITEM1.HTML". When you start on your second page, change the itemIDnmbr to "2" and SAVE AS "ITEM2.HTML".

After you finish editing the remaining variable values for your first page "item1.html", save it and change this number to "2". Then IMMEDIATELY SAVE AS "item2.html". Modify the remaining variables and save that file. When you change the itemIDnmbr to "3", save as "item3.html" and so on, until you have created all of your ITEMx.HTML files.

Back to Top of the page Back to top

Item Name (short)

This is a SHORT version of your product name. This is the name that will appear in the actual shopping cart applet window on the left. KEEP THIS NAME SHORT!!! If you put in too long of a name a horizontal scroll bar will appear in the bottom of the applet window making it very difficult for your shopper to see what he has put in his cart.

Examples:

var itemsNamSt = "Smoke Detector";

var itemsNamSt = "Hi Fashion Barbie";

var itemsNamSt = "Item Editor 1.0";

None of these item names will cause the bottom of the cart applet to scroll. They will display beautifully with the price and extended pricing information visible without scrolling back and forth.

Back to Top of the page Back to top

Item Name (long)

This is the product name that will appear on the actual catalog (ITEMx.HTML) page. 30 Characters MAX. If you REALLY need more room for your item name we recommend utilizing the "(More... ) Link".

Examples:

var itemLngNme = "Family Photo Album";

var itemLngNme = "Men's Diamond Watch";

var itemLngNme = "Checkers 1.0 for Windows 98";

var itemLngNme = "Fiero Turbo Kit";



Back to Top of the page Back to top

Item Long Description

Enter a long (130 characters or so maximum) description of the product here. That may not seem like a lot of characters but keep in mind that the purpose of the catalog pages is to facilitate "Quick Browsing" and hopefully "impulse buying" of your products. We can't stress enough to leave this descriptiong fairly short (if you consider 130 characters or so 'short') The resulting page will not scroll leaving the [<< Prev] and [Next >>] buttons visible on the pages without having to hunt for them.

We admit the name of this variable may be a bit misleading because even though we're calling it a long description, keeping it around 130 characters in length or so will greatly enhance your shoppers experience with your catalog. Leave the detailed descriptions to your existing product pages.



Back to Top of the page Back to top

The (More...) Link

After referring to this link again and again I am sure you are ready to find out, finally, what it is and what it does. Simply put, the "(More... ) Link" ties your existing product pages into your catalog. When this value is present the word "More" followed by the three dots will appear in paranethesis at the end of your long product description. Make it easy on your customer and simply ADD your existing product description page URL to this variable. You are making things much harder on yourself and your shopper if you try to make these catalog pages fulfill the same function as your existing highly detailed product pages.

Leaving this link set at "/youritem.html" will cause the "(More... ) Link" not to appear on your product pages.

Examples:

var moreDescPg = "/products.html#jazzpager";

var moreDescPg = "buy/teeshirts.html";

var moreDescPg = "http://www.dsepc.net/services.html";



Back to Top of the page Back to top

Total Pages

This variable has been moved to the CART.HTML page.


Back to Top of the page Back to top

Your Company Name

This variable has been moved to the CART.HTML page.


Back to Top of the page Back to top

Home Page URL

This variable has been moved to the CART.HTML page.


Back to Top of the page Back to top

Item Stock Number

This can be whatever internal stock numbering scheme you may already have in place. This number can be any alpha numeric string so long as it doesn't exceed 15 to 17 characters in length. Going over this length may cause your page to display improperly.

Always include a stock number in these product pages. Even if you have to make up some new ones. This keeps your products organized and gives the impression to your shopper that you are an established company. It's not practical to leave out this item.

Examples:

var itemStockN = "1-875-1245";

var itemStockN = "AF-3120";

var itemStockN = "VAR 02179-A";



Back to Top of the page Back to top

Item Price

Use any price you want. Just be sure to include a decimal point and TWO decimal places. A price like 24.50 is acceptable, $24.5 is not.

Examples:

var itemSalePr = "22.95";

var itemSalePr = "10.00";

var itemSalePr = "11210.00";

var itemSalePr = "1.28";



Back to Top of the page Back to top

Is the item taxable?

New with version 1.21 the ability to assign taxable or non-taxable status to each item or service so your bookkeeping will come out right and your customer doesn't end up paying tax on a service where no tax would apply. This is a true or false value. Simply change the value to true or false small case only and no quotes! Since this is a Boolean value there are no quotes (") surrounding this value. Edit it just like we have indicated below:

Examples:

var itemTaxabl = true;

var itemTaxabl = false;


Back to Top of the page Back to top

Item Weight

New with version 1.21 the ability to assign weight values to each item so you can accurately add shipping cost based on the universal constant in shipping prices: How much does it weigh?. By adding the weight of each product that is added to the cart we can "get" a "total weight" of the contents of the cart at checkout time.

Via JavaScript (and smoke and mirrors) you can determine what your order weighs and assign shipping costs within the PAY.HTML file that will carry over based on the order's entire weight. Now you won't have to worry about charging enough for shipping ever again! Check the USPS for the cheapest shipping in the business.

The USPS Priority Mail package is especially good for small and home based businesses because they come to your home or office every day without charging a pick up fee. Also their rates are based more on rate than different "zones" until you get into heavier orders weighing over 30 pounds. I feel for our users out there that sell heavy stuff. Your shipping JavaScript is going to be a sight to see.

Basically you can "round off" the top shipping cost in each range and charge the same cost if a package weighs 10 pounds vs if a package weighs 15. There is so little difference in the price you should be able to charge say, 5 bucks extra on average for each order. Or you can fine tune the profit out of your handling charges. It is up to you. Saving your customer money on shipping will make life a little more difficult on yourself but HEY! Isn't that why you got on the web? To server your customer? This shopping cart may seem a little hard to install by about now. Let me assure you that the pain and agony you endure by customizing this cart will pay off in the long run because this shopping cart is so easy for your shopper to use. THAT is what it's all about if you are going to succeed at electronic commerce. In a recent study 65%!! of people who had tried placing an on-line order finally gave up because it was so hard. With THIS cart you can make sure that nobody is leaving money on the table where YOUR merchant experience is concerned because our cart is intuitive. It's as easy as using the real thing: A grocery store cart. (except without the screamin kids standing on the end! =o)

Play around with your shipping method. One other easy alternative is to simply add the dollar cost of the shipping for each item with this variable. Since this variable is not visible to your shopper you could use it to store the dollar value of shipping PER QTY PURCHASED. DO keep in mind that this value is multiplied by whatever quantity they select. So use this alternative with caution. Here are a few examples of weight values. (Remember, this is a NUMBER so NO QUOTES are needed!)

Examples:

var itemWeight = 0;

var itemWeight = 0.018;

var itemWeight = 1.52;

var itemWeight = 12.00;





Back to Top of the page Back to top

Item Size

If you are selling clothing or some type of apparatus that comes in different sizes like hammers or screwdrivers you can optionally include a size in these templates. If you want to use the size feature of these product pages simply change the default value next to this variable to something other than "null".

If you leave itemSize0 = "null" then a size caption will not appear on the page. If you need to include a size in your product description do it here so it is set apart from the other text on the page. EXPERIMENT if you want, try changing this value to "Large" and reload this page to see the results. Change it back to "null" (all lower case) to remove the size listing from the page.

Examples:

var itemsSize0 = "Large";

var itemsSize0 = "10 Gallon";

var itemsSize0 = "8 mm";

var itemsSize0 = "12 pound bag";

var itemsSize0 = "20 count";

var itemsSize0 = "36 exposure";



Back to Top of the page Back to top

Item Color

Item Color is similar to Item Size in that it will not appear unless you change it's value to something other than "null". Change this item to "Blue" and reload the page. You will note that now there is a "Color heading" with the word "Blue" next to it.

Change it back to "null" (all lower case) to remove the color listing from the page.

Examples:

var itemsColor = "Red";

var itemsColor = "Tan over Mauve";

var itemsColor = "Orange and Black";

var itemsColor = "Clear";



Back to Top of the page Back to top

Item Feature 1

This and the following three variables all control whether or not a feature list is displayed on your catalog pages. Changing this item to anything other than "null" will cause the feature list to be displayed. Adding subsequent features to the variables itmFeatur2, itmFeatur3 or itmFeatur4 will make their respective "Feature Bullets" appear with what ever text you have assigned to them following.

Try not to get carried away with the features list. Cramming every single detail into the feature list will make this page scroll off the screen making it harder for your customer to navigate your catalog and BUY from you. Trust us on this one -- KEEP YOUR FEATURE LIST SHORT! There is a "(More... ) Link" designed specifically for linking to your EXISTING PRODUCT PAGES. Let your detailed and well designed existing product pages tell the whole story. That's why there is a "(More... ) Link". If your customer wants to know "More he or she can click the "(More... ) Link".

Examples:

var itmFeatur1 = "Stainless Steel";

var itmFeatur1 = "Windows 98 Compatible";

var itmFeatur1 = "Resists Fading and Stretching";

var itmFeatur1 = "Veneer Top and Laminated Sides";



Back to Top of the page Back to top

Item Feature 2

Changing this item to anything other than "null" will cause the second feature on the feature list to be displayed. The feature list will not work properly unless you have already entered a new value for itmFeatur1 described above.

Back to Top of the page Back to top

Item Feature 3

Changing this item to anything other than "null" will cause the third feature on the feature list to be displayed. The feature list will not work properly unless you have already entered a new value for itmFeatur1 and itmFeatur2.

Back to Top of the page Back to top

Item Feature 4

Changing this item to anything other than "null" will cause the fourth feature on the feature list to be displayed. The feature list will not work properly unless you have already entered a new value for itmFeatur1, itmFeatur2 and itmFeatur3.

Back to Top of the page Back to top

Include Buying Tips

This setting "turns on" and "turns off" the "Shopping Tips" at the top of your catalog pages. There are more reasons to leave it off then turn it on. But you know your clientele best. If you think they may need a little extra help figuring out how to buy your products then toggle it's value to "true" (without the quotes.) If not, leave it at "false". Try turning it on and off and see for yourself if you want to include the tips or not.

Back to Top of the page Back to top

Include Thumbnail Photo

This setting "turns on" and "turns off" the "Thumbnail image" in your catalog pages. For best results in lower screen resolutions (some shoppers still run 640 x 480) try sticking as colse to the default height and width values as possible. Some additional variables have also been added that control the way this feature displays by allowing you to set the height and width variables for the Thumbnails as well as the optional ZOOM pages. Setting this value to "true" will display a Thumbnail image called ITEMx.JPG where "x" is the product ID that matches the thumbnail image. The file type is also configurable.

Example:

var thumbNailP = true;

var thumbNailP = false;


Back to Top of the page Back to top

Thumbnail Type

This setting controls what filetype of Thumbnail imagethe shopping cart will look for. These files should be stored in your /img directory. Setting this variable to ".gif" will cause the template to load a GIF file named according to it's item ID. Setting it to ".jpg" will load a JPEG file for the thumbnail.

Examples:

var thumbsType = ".gif";

var thumbsType = ".jpg";


Back to Top of the page Back to top

Tumbnail Width

This setting changes the width the Thumbnail is displayed at in your product page template. FOR BEST RESULTS WE RECOMMEND SIZING THE ACTUAL FILE TO THE SAME WIDTH YOU SPECIFY HERE.

Examples:

var thumbNailW = 100;

var thumbNailW = 98;


Back to Top of the page Back to top

Tumbnail Height

This setting changes the height the Thumbnail is displayed at in your product page template. FOR BEST RESULTS WE RECOMMEND SIZING THE ACTUAL FILE TO THE SAME HEIGHT YOU SPECIFY HERE.

Examples:

var thumbNailH = 125;

var thumbNailH = 118;


Back to Top of the page Back to top

Enable Zoom Page

This is for intermediate and advanced users. If you are not real comfortable editing HTML files you may want to leave this feature disabled. This setting allows you to tie a zoomed image hyperlink to the thumbnail image. To use this feature Thumbnails must be enabled. Here's how.

Example:

var enableZoom = true;

var enableZoom = false;


Back to Top of the page Back to top

Zoom Image Width

This setting changes the width the ZOOMed image is displayed at in your product page template ZOOM PAGE. This value is also used to calculate the size of the ZOOM Page. FOR BEST RESULTS WE RECOMMEND SIZING THE ACTUAL FILE TO THE SAME WIDTH YOU SPECIFY HERE.

Examples:

var zoomImagew = 250;

var zoomImagew = 400;


Back to Top of the page Back to top

Zoom Image Height

This setting changes the height the ZOOMed image is displayed at in your product page template ZOOM PAGE. This value is also used to calculate the size of the ZOOM Page. FOR BEST RESULTS WE RECOMMEND SIZING THE ACTUAL FILE TO THE SAME WIDTH YOU SPECIFY HERE.

Examples:

var zoomImageh = 250;

var zoomImageh = 129;


Back to Top of the page Back to top

Default Quantity

This setting changes the number that comes up in the Quantity box. If you have a special on a product, for example, and offer FREE shipping when buying quantities of 5 or more you might set the default value to "5". Your shopper can always change this number to the actual quantity that he or she wants to buy. Change this value at your descretion. It's best in most situations to just leave it at "1" unless you sell some items in minimum quantities.


Back to Top of the page Back to top

Table Background Color

This setting changes the color of the table where the product description is. Our default value of #EEEEEE is a very pale silver color. If you wish, you may change this to one of the allowed word names or use hex codes. The Dark table color at the base (where the buttons are) is controled by the CART.HTML's bgColor as specified in the <BODY...> tag.

Examples:

var tableColor = "Tan";

var tableColor = "#EDEDED";


Back to Top of the page Back to top

Edit Mode

This variable has been moved to the CART.HTML page.


Copyright © 1998, The Real Soft Shopping Cart