Two Ways to Add a Product

There are two ways to add products to your online store. You can use the Store Editor or the Catalog Manager. Every time you create a product in Catalog Manager, the product is also created in Store Editor. And vice versa, if you are using Store Editor to create a product, a product record is also created in the Catalog Manager. So whatever method you choose, the product data will be available in both Store Editor and Catalog Manager. Although you can create products in both, we recommend creating the product in Store Editor and using the Store Manager to manage your products. We'll show you how to create your product using both methods. In the following example, we'll create a product in the Zhou Dynasty section we created earlier.

Caution:

If you add a product before adding a section in Store Editor, a button will also be created with the product name in the menu column. This is fine if you have a few products and want them displayed in your navigation menu. If you have a lot of products and want to categorize them, you will want to create a section first before you create the product. If you make a mistake and create the product first, you can always move the product into its section later.

Store Editor

Using Store Editor will help you visually place the products where you want them to go. All you have to do is navigate to the particular section and add the item.

Before we get started, let's get to know the Editor Toolbar in Store Editor. To get to the toolbar, click on the Store Editor link in the Store Manager. The toolbar will appear on every page in Store Editor as shown in Figure 9.6.

Figure 9.6. Screenshot Editor toolbar.

Standard Edit Toolbar

• Edit: Edit the properties of the page or product you are on.

• Edit All: Allows you to edit all the products from this point down.

• Section: Create a section and a button will be created in the navigation menu.

• Item: Create a new item.

• Link: Create a hyperlink to an external or internal page.

• Image: Lets you upload an image.

• Look: Change the look of the site.

• Layout: Change the layout of the page.

• Variables: Change the overall properties of the site.

• Manager: Takes you back to the Store Manager page.

• Publish: Upload the development store to your live store.

Advanced Editor Toolbar

The advanced toolbar will appear as a second row underneath the standard toolbar when you click on the red triangle next to the Publish button.

• Contents: Takes you to the table of contents or tree of the site.

• Template: View all builtin and custom templates.

• Types: Takes you to the builtin and custom types page.

• Database Upload: Lets you upload data files to the store.

• Config: Lets you edit properties such as editor toolbar location, default templates, and default items in Store Editor.

• Controls: Set Store Editor properties such as mode and editor entry page, or access advanced features such as search, multiple image upload, and edit multiple items.

Creating Your First Product with Store Editor

1.	In Store Manager, click on the Store Editor Link as shown in Figure 9.7. Figure 9.7. Store Editor link in Store Manager.
2.	If you want to place the product in a section, navigate to that particular section.
3.	On the Editor toolbar, click on the Item button.
4.	Input the information for you product on the Add Item form as shown in Figure 9.8. You do not have to enter data into every field. As mentioned earlier in the chapter, the only required fields are ID, Name, Code, Taxable, Orderable, and Price. In Store Editor, the ID is automatically generated for you. Figure 9.8. Add Item form.
5.	To upload a product image, click on the Upload button next to the Image property. Another page will appear with a dialog box so you can browse and upload your image. Once you are done, click on the Send button. This will take you back to the Add Item form.
6.	Once you are done, click on the Update button at the top of the form.

Great! Now you have created your first product. To create additional products, just repeat the previous steps, starting with step 2.

To view a video on how to create a product with Store Editor, go to www.MyEcommerceSuccess.com.

Catalog Manager

Let's take a look at a few advantages of using Catalog Manager.

• Viewing and sorting products: You can view up to 100 products at a time. You can also sort your products by any of the fields. Want to sort by all your products by price? All you have to do is click on the price link.

• Organizing your products by tables: You can categorize your products by creating separate tables. Tables are perfect for seasonal products. You can create or upload a Christmas product line table and delete the whole table once the season is over.

• Deleting or moving multiple items: It's easy to delete or move multiple items with the item page.

• Downloading product data: Catalog Manager has an upload and download tool. You can download a CSV data file of all your products. In Catalog Manager, you can use the Add Item page to add a product, or add another product in the CSV data file and upload the file.

Creating Your First Product in Catalog Manager

Follow these steps to create a product using Catalog Manager:

1.	In Store Manager, click on the Catalog Manager link.
2.	Once you are in Catalog Manager, click on the Manage Your Item link. This will take you to the item's page, where you can add items or manage all your items as shown in Figure 9.9. Figure 9.9. Add Item page in Catalog Manager.
3.	To add an item, click on the Add Item button. As you can see in Figure 9.10, the Add Item page is very similar to the Add Item page in Store Editor. Figure 9.10. Add Item form in Catalog Manager.
4.	Once you are done filling out the form, click on the Save button.

You've now created a product in Catalog Manager. Although you have created a product, if you navigate to the Store Editor, you will not see the product. This is because the product has not been linked to the home page or any section. You will need to go into the content tree under the Content button on the toolbar in Store Editor to move the product to the area you want. For this reason, it is easier to use Store Editor to navigate and add your product.

Getting to Know Catalog Manager

Since you're already in Catalog Manger, let's take a look at the five tools to help you manage your inventory.

• Items: Add, edit, sort, and manage all your products.

• Tables: Create tables to separate and group products. Tables can be used to help organize your products.

• Inventory: Manage the availability of your products. You can manage the inventory levels of each product.

• Upload: You may use a CommaSeparated Value (CSV) file to manage your products, add products, and upload them to Catalog Manager. If you have a lot of products, you may also want to look into using the CSV file to add and manage them. You can also create sections and products within sections on the fly using the CSV upload feature.

• Publish Your Changes: Changes to your store do not go live until you publish the catalog.

Editing Your Product in the Store Editor

One of the key benefits to editing your product in Store Editor is that you get to see exactly what the page will look like. You can edit, remove, or add product details, images, pricing, and so on. To edit your product

1.	Click on Store Editor in the Store Manager.
2.	Just like a web page, navigate to the product you would like to edit.
3.	Click on the Edit button in the toolbar.
4.	Once you are done making the changes, click on the Update button on the top of the form. This will return you to the product page with the new changes. You can preview the changes before publishing the site.

Adding Product Options

You can create order options such as size, color, and incremental pricing. Once you add an option, a dropdown menu will be displayed on your product page, as shown in Figure 9.11.

Figure 9.11. Options are displayed as a dropdown menu.

Creating options can be done in either Store Editor or Catalog Manager.

Here are two examples of how the parameters must be entered into the Options field.

Size Small Medium Large

Color Red Blue "Dark Green"

You can also set up your options for incremental pricing. For example, say you are selling Tshirts and have 3 sizes. The Small is $10, the Medium is $15, and the Large is $20. Here's how you would enter the parameters in the Options field:

Size Small Medium(+5.00) Large(+10.00)

If the customer selects Small, no incremental price is added because the product price has already been set to $10. If the customer selects Medium, a $5 charge will be added to the already set price of $10, totaling $15.

Note regarding the Options field

• If the option has multiple words, you must enclose them between doublequotes ("Dark Green").

• You can have more than one set of options, but they have to be separated by a line break or double space in the Options field.

• You cannot add more than one space between the attributes.

• HTML is not supported in the Options field.

Adding Product Images

There are two ways to add product images: You can upload product images onebyone or you can upload multiple images at the same time.

If you upload images onebyone, you can select the Upload button shown in Figure 9.12 while editing your product or while adding a new product. After you click on the Upload button, you will be taken to another page where you can choose the location of your image to upload, as shown in Figure 9.13. This is a great option for stores with few products.

Figure 9.12. Image Upload button.

Figure 9.13. Image Upload form.

If you have a lot of products, using the multiple image upload will help you save time. This feature will upload all your images at once. How does the system know where to put the images? The name of each file must exactly match the ID of the product page. If you used the Store Editor to create your product, the product ID was created for you and you must go back into the Catalog Manager to find out what the ID is. If you used Catalog Manager to create your product, the product ID is something you entered. You can also go back into Catalog Manager to view the product ID.

The Yahoo! store supports both .jpg and .gif image formats.

For example, if your product ID is zd100, your image file name must be zd100.jpg. If it's a .gif, the image file name must be zd100.gif.

All images must be in a zip file in order to upload. This will help reduce the file size and speed up the file upload time. You may upload as many zip files as you wish, but only one zip file maybe uploaded at a time. If you don't have a zip program, you may download WinZip (winzip.com) or another zip utility program.

1.	Once you have added all the image files into the zip file, click on the Store Editor link in the Store Manager control panel.
2.	When the Store Editor homepage appears, click on the Red Triangle on the toolbar to display the advanced settings.
3.	In the advanced settings, click on the Controls button.
4.	Scroll down until you see the Multiple Image Upload link and click on the link, as shown in Figure 9.14.
5.	Once you click on the link, a dialog box will appear where you can browse and upload your zip file.

Figure 9.14. Multiple Image Upload link.

Although you can see all the images you've uploaded in the Store Editor, the changes will not be live until you publish the site.