How to add products to your Digital PressWorks Shopping Cart

How to add products to your Devil's Advoc8 Modified Version of Digital PressWorks' Shopping Cart

by Taureth

Before you start adding products, you need to have your picture images in an accessible folder. If they are larger than 150 pixels wide x 200 pixels high, you need to also have a smaller resized version of them that will fit inside those dimensions. If the picture name is “Item10223.jpg”, rename the smaller version “Item10223sm.jpg” and this will help keep them together in the folder/ file list. If you do not wish to add pictures as you add products, you may skip this step and add the photos at a later time.

While entering or editing a Product, do NOT use the ‘Enter’ key to move between fields, use the arrow keys, or the ‘Tab’ key. Pressing ‘Enter’ will ‘Submit’ the changes you have made so far. The one exception to this is inside the Long Description box, inside it, you may use the ‘Enter’ key to move down to the next line ‘inside’ the Long Description box. Note: using the ‘Enter’ key will not put a carriage return in the Products Description, you must use a  tag to do that.

Example:

------------------------------

First Line

Second Line

Gives :

First LineSecond Line

-------------------------------

First Line

Second Line

Gives :

First Line

Second Line

-------------------------------

Step 1: Log into your store’s administrator panel

If you are unsure how to do this, contact Customer Service.

Step 2: Select the ‘Products’ link to go to product management

Step 3: If this is the first product in your store, or the first product of its type, you need to select the ‘Add a product to your store’ link (proceed to Step 4). If you have a similar product already in your store, you may be able to save time by copying an existing product. To do this, find the drop down box with ‘Select a product to copy.’ above it. Click the down arrow, find the product you want to copy and click on it. It will now be the product showing (and highlighted) in the dropdown box. Click the ‘Copy’ button. You must enter a new Product Code (see Step 4), but all the rest of the information is copied from the other product and you only need to change the fields that are different.

Step 4: Enter the ‘Product Code’. Each product must have its own unique product code; this is the database key to find all the information about each product. If you already have a separate inventory system in place, or all of your products come from one manufacturer, you should use your inventory product code or the manufacturer’s product code for your ‘Product Code’. If you sell, or may later sell, products from more than one manufacturer or distributor, it would be a good idea to use a two letter code before each manufacturer’s product code to help you remember where to order that product from. (Manufacturer : Acme, Product Code : 123456 = Your Product Code : AC123456) If you want to further clarify your product list, you may even want to add a category character or two to the beginning (B for books, or C for CD’s, or T for t-shirt, etc.) this will also help keep products from different manufacturers grouped by type of product. BAC123456 would be a Book from ACme with a product code of 123456.

One final note: Product Codes are CaSe SeNsItIvE. BAC123456 and Bac123456 are two different products.

Step 5: Enter the ‘Product Name’. You want the product name to be somewhat descriptive, as this is used by the cart program as the page title and will help with search engine rankings.

Step 6: Enter the ‘Short Description’. This will be used on the categories page along with the Product Name and a small picture. It needs to be concise and to the point, but descriptive; it is also used as the anchor text for the link to the product page and will help with search engine rankings. To better format the way the category page looks, you may want to add the following tag before and after the Short Description (specifies a carriage return before and after and just looks nicer).

Step 7: Enter the ‘Long Description’. This is the most important of all the fields in the Product. Here is where you get to tell a potential customer all about the Product. Think about it, they came to your site, went to your store, chose a category, and picked this product to look at… that’s 4 clicks already!!! And, they already knew the price when they came to this page, because it was on the category page with a small picture and your Short Description. The potential customer getting to this point in your eCommerce store is the same as them picking the item up in a retail store. It’s time to close the deal. We need to answer any questions they may have, and ask for them to BUY the item!!

You can enter over 2000 words into this box. That doesn’t mean you should, it just means there is plenty of space to enter all the information you want the customer to know. It should be a sales pitch, point out all the great things about the product, how versatile it is, how many wonderful colors it comes in, etc etc. The description should contain lots of words that add to the potential customer “feeling” the item. It should also use phrases like “This PRODUCT-NAME would look great in your APPROPRIATE-ROOM” or “with the rest of your collection of COLLECTION-NAME”. Notice the use of YOUR in the examples, it gives the potential customer a sense of OWNERSHIP. And once they “feel” they “own” the Product, it is easy to get them to pay to take it home (or in this case – to get it shipped to their home).

Okay, that was the hype. Now here are a few tools to make your job a little easier:

NOTE: Many of the following HTML helps have been changed under the new web guidelines. An update to this page is coming soon... until then, if you need to use HTML in the description, please call us and we will help you through it. Thank You.

You can use basic HTML tags in your Product Description to emphasize certain points or format the description so it is more appealing. If you are familiar with HTML tags, there are a few changes in Syntax that MUST be observed, as well as a few tags that will not work properly.

 : The   tag is used to force a carriage return (start a new line on the screen). Unfortunately, because of the way the cart stores data, if you ever go back to edit an item, it strips all of the   tags out of the Long Description. So if you ever edit a Product with   tags, you must go back into the description and replace them even if you did not change the description. A   tag does not have a closing tag, it is used by itself.

<center> and </center>: Any text placed between these tags will be centered in the product description area of the screen, not the screen itself. Make sure you use the closing tag to return to normal.

 and : Any text placed between these tags will show up in  bold  print. Make sure you use the closing tag to return to normal print.

 and : Any text placed between these tags will show up in  underlined  print. Make sure you use the closing tag to return to normal print.

 and : Any text placed between these tags will show up in  italics  print. Make sure you use the closing tag to return to normal print.

The  tag is never used by itself, it always has at least one other parameter with it.

 will change the color of the text to blue. You can use most common color names for all of the basic colors, if you know the HEX code for a color, you may also use it like this . If you are familiar with HTML, you will notice that there are no quote marks (“) around the value, if you include them, it will not be recognized. The closing tag to return to normal is .

 will change the text size to 16 pixels high. The closing tag to return to normal is also .

If you would like to make several changes at once, you can combine them:

 text to be changed 

Or even <center>Changed Text</center> It is important however, that you close the tags in the order they were opened.

An image may be placed into the product description as well. The Syntax for doing so is:

<img src=http://www.mywebsite.com/images/picture.jpg>

An image may also be a .gif file. In order to help with search engine optimization, each image should have an <alt> tag as well (this will also help those who have older browsers or those who are using text to speech translators such as the vision impaired) Unlike normal HTML, you may only use one word for your <alt> tag because the cart creator ignores anything after a space, however, you can use a hyphenated word. Like so:

<img src=http://www.mywebsite.com/images/picture.gif alt=descriptive-words-about-the-picture>

You may also include a Hyperlink to another page in your description (a related product? Or a page with more information about the Product) Like so:

<a href=http://www.mywebsite.com/html/moreinfo.htm>Text that describes and makes the visible part of the Link</a>

You can even make a picture a link to another page:

<a href=http://www.mywebsite.com/html/moreinfo.htm><img src=http://www.mywebsite.com/images/picture.jpg alt=descriptive-words>Text to display next to the picture that is also a link</a>

And if you use a   tag in the descriptive text it will display under the picture:

<a href=http://www.mywebsite.com/html/moreinfo.htm><img src=http://www.mywebsite.com/images/picture.jpg alt=descriptive-words> Text to display under the picture that is also a link</a>

, , and  tags may also be included, just remember to close everything in the order it was opened, with the </a> tag being last.

One way around the problem with   tags, is to use the <table> tag. This one gets a bit involved, but here is a brief overview.

A Table is created by a <table> tag, several things may be included in the creation of the table:

align=center (right and left are also valid options).

width=400 (sets the table width to 400 pixels, you may also use a percentage. width=100%).

height=300 (same as width, except percentages have no meaning to an entire table, more later on how to use height within the table).

border=0 (a border of 0 means the border is invisible, any value other than 0 is the number of pixels wide that the border will be).

bgcolor=red (specifies the background color of the table, same as with the font tag, you may use names or HEX codes).

bordercolor=yellow (specifies the color of the border, has no effect if the border width is set to 0, same as with the font tag, you may use names or HEX codes).

Example of opening a table:

<table align=center width=80% height=400 border=3 bordercolor=yellow bgcolor=red>

You cannot put things directly into a table, you must specify a format:

<tr> specifies the beginning of a table row.

Within each table row there are cells.

<td> specifies the beginning of a table cell.

You may put any pictures, text, or links into a table cell.

Each table cell must be closed with a </td> tag.

Each table row must be closed with a </tr> tag.

If you have more than one table row <tr> </tr>, you MUST have the same number of table cell <td></td> tags in each table row.

You close a table with the closing tag </table>.

An example of using a table to show the description in two columns:

table align=center width=80% height=400 border=3 bordercolor=yellow bgcolor=red>

<tr>

<td width=50%>

Text for the left column

</td>

<td width=50%>

Text for the right column

</td>

</tr>

</table>

The widths of a <td> are in relation to the width of the table, and must add up to 100% of the table.

You can also use any of the other tags inside a table cell definition:

<td width=50% height=30 border=1 bordercolor=black bgcolor=white>

Text for the cell

</td>

That is probably more information than you need to enter a description for a Product, but if you want to format the description to make it more appealing to the customer, the general information is available.

Just be sure you match up all of your opening tags with a closing tag.

Step 8: If you have a separate web page with information about the Product, enter it’s URL into the More Information URL box. Don’t forget to use a full URL tag:

( http://www.mysite.com/html/products/item123more.htm )

Step 9: If there are other products in your store that are similar to the Product you are entering, you can enter their Product Code into the Related Items box. If there is more than one, you need to separate them with a comma. ( Item123, Item124, Item125)

Step 10: Select Category / New Category. If there is no existing category for the Product you are entering, you need to enter the name for the Category in the New Category box, if there are other Products already in your store that are in the same Category, you can select the Category from the Select Category drop down menu.

Step 11: Price. Enter the price in the Price box. Do not use a Dollar Sign or Commas, but it is a good idea to use the Decimal Point even if the Price is a whole Dollar amount ( $3 gets entered as 3.00 ).

Step 12: Rebates. If you plan on offering Rebates, you need to create a printer friendly HTML page that contains all of the Rebate information, including your Rebate Coupon. You then enter the amount of the Rebate in the Rebate Amount box, and the full URL to the Rebate Page in the URL to Rebate Info. The cart program will then display:

A $10.00 rebate is offered on this item. Click here for more information on obtaining a rebate for this item.

Our price: $20.00

$10.00 after rebate

in the price area of the Products Item page.

Step 13: Enter Shipping Weight. Enter the shipping weight of the product here in full pounds, round up, and you may estimate as long as you are willing to make up the difference at the time of shipping if you are wrong. If your Shipping is not set to charge by weight, you may skip this entry.

Step 14: Taxable. Most physical Products are taxable, most services are not. This will depend entirely on the state in which you reside, and you are responsible for abiding by the tax laws in your state. Even if you mark a Product as Taxable, the cart will not charge tax unless you have entered a Tax Rate into the Tax Table.

Step 15: Uploading Photos or URL to Photos. You have one of two choices, Upload a Photo or list a URL to a Photo. If you have the Photos on your computer, you can select to ‘Browse’ and find the Photo to Upload. If the Photos are on a website, and you know the full URL, you may list it here and the cart program will link directly to it. URL’s MUST be a FULL URL (http://www.sitename.com/path/photo.jpg) The Small Photo is the one that will be displayed on a Category page, and the Large Photo will be displayed on the Product Item Description page.

Step 16: Options. The number of Options you have available and the number of Choices within each Option are set in the config file of the cart program when it is set up. Changing them after any Product has been entered WILL result in a SCRAMBLED Product Database.

Enter an Option Name, such as Size or Color into the first Option Name box.

Enter each Choice for that Option into one of the boxes below the Option Name.

If the Option changes the Price or Weight of the Product, enter it into the boxes in the appropriate column. In order to avoid confusion, we recommend you enter zeros into these boxes for any Choice you list that does not alter the Price or Weight.

Let your customers know if an Option is going to change the Price. Unless you put the new Price or the change in Price into the Option Choice description, the customer will not know there is an additional charge until they checkout… and that is the wrong time for them to find out!!

Example:

Regular Price $15.00

Option 1 Name:

Size

Option	Add to Price	Add to Weight
Small ($13.00)	-2.00	-1
Medium ($15.00)	0	0
Large ($15.00)	0	0
X-Large & XX-Large ($17.00)	+2.00	+1

As you can see, you can enter a negative amount as well. Do not use commas or dollar signs in the ‘Add to’ columns. And enter weights in full pounds.

Continue on with the next Option Name until you have entered all the Options and Choices you need.

There are Free Form Options at the bottom, these are for Options where the customer inputs text for the Option Value instead of selecting it from a drop down menu. These are great for entering inscriptions, or comments. All you need to do is Enter the Option Name into the box and the cart program will display the Option and an input box on the Product Description Page.

Step 17: Click the ‘Submit’ button. You should receive a confirmation that the Product was Added Successfully.

If you are editing a Product, clicking on the ‘Reset’ button will restore all the values from the Database prior to any changes you submitted.