Creating Catalogs

From Documentation
Jump to: navigation, search

Creating Catalogs

Using the E-commerce Catalog tool, you can easily create an online store and offer site visitors an enjoyable shopping experience. You add products, images and descriptions, and choose from an assortment of display options. Your store looks great on the Web and site visitors can easily find what they are looking for.

Add a store engine to process online transactions and further manage products. Choose from several providers that offer cost-effective solutions as a means to doing business on the web. Your store engine may include components that must be published for your catalog to perform correctly on the web. See Publishing Components.

About Catalogs

Each catalog you add to your site includes two types of pages a List page and Detail pages.

The List page shows a short summary of each product in the catalog displayed in a format that you select. You can choose to add a thumbnail image of your products so that site visitors can click to see the full Detail page.

Each Detail page can display a large image of the product. You can also display product items such as name, price and description.

When you add a catalog object to the List page, NetObjects Fusion automatically adds the Details page for you. On the Site Navigation panel, the List page is displayed as a single icon that contains multiple pages.

Adding a Catalog

You can create a new catalog or add an existing catalog to your site. You can insert an existing catalog or add catalogs that you removed from the site. See Removing a Catalog.

You add the catalog object to the page where you want to display the list of products. You can add a new page or use an existing page.

Creating a New Catalog

  1. In Page view, display the page where you want to place the catalog object. This is the page where the product list appears.
  2. Choose the Catalog tool from the Advanced toolbar and click in the upper left corner of the Layout area.

Start in the upper left corner to allow as much space as possible for the thumbnail images.

The Add E-Commerce Catalog dialog appears.

Current catalogs and catalogs that were added to the site and then removed are listed in the Insert an existing catalog section at the bottom of the dialog. If no other catalogs were created, you do not see this list.

  1. Type a name for the new catalog.

NetObjects Fusion uses the name you enter as the name of the Detail page. This name appears in the banner at the top of each product Detail page. You can rename the page in Site view just as you rename any other page, or you can display the product title in the banner or edit the text on the Banner Properties panel. See Renaming Pages, Selecting a Photo Page Layout or Changing the Banner Text.

You cannot use the name of an existing catalog.

  1. Choose a Store. If you intend to offer online credit card processing, you must have a store. Click the Add Store option from the drop-down list to select a store engine. See Configuring the Store.

NetObjects Fusion allows you to add a catalog without a store. You can save your settings and add a store engine at any time.

  1. Choose a Profile.

NetObjects Fusion allows you to reuse settings each time you add a new catalog. You may choose a profile containing all information associated with an existing catalog, or choose Default to create a new profile. See Saving a Catalog Profile.

Current profiles and profiles of catalogs that were added to the site and then removed are included in the Create a new catalog section at the top of the dialog. If no other profiles were created, you can only choose Default.

  1. Click OK.

Inserting an Existing Catalog

  1. Display the designated List page in Page view.
  2. Choose the catalog tool from the Advanced toolbar and click in the upper left corner of the Layout area. Start in the upper left corner to allow as much space as possible for the thumbnail images.

The Add catalog dialog appears. Available catalogs are listed in the Insert an existing catalog section at the bottom of the dialog.

  1. Select Insert an existing catalog.
  2. Select the catalog you want to insert and click OK.

Adding Products

You add products on the Products tab of the E-Commerce Catalog Properties Editor.

  1. Open the catalog Properties Editor.
  2. Enter in product information by navigating to the sub-tabs located on the Products tab.

Attributes. Add detailed information that will identify your product, such as a name or part number. To assign specific characteristics such as color and size. See Adding Options.

The attributes field will depend on the store being used. Refer to your Store's user manual for further information regarding these options.

Description. Provide your customers with a brief and extended product description. The descriptions can be shown on the List page and Detail pages of your catalog. See Formatting the List Page and Formatting the Detail Page.

Also, you can add product comments and keywords related to a specific product that is viewable only in the E-Commerce Catalog Properties Editor.

Detail Image. Upload an image associated with the selected product. Use the options on the Detail Image tab to configure the output settings. For information about image output settings. See Controlling Download Time.

Thumbnail Image. Display the product detail image as a thumbnail image that links to the Detail page. See Controlling Download Times.

Related Products. Related products can be used to promote similar products in your catalog. You can display products that customers may be unaware of on the Detail page of a related product.

You can also import a product list. See Importing Products.

Adding Options

You can create product attributes without having to add separate product records. For example, adding options allows you to include variations, such as size or color, to one item without having to create additional products.

  1. In Page view, display the List page or Detail page of the catalog you want to work with.
  2. Open the E-Commerce Catalog Properties Editor.
  3. Display the Products tab.
  4. In the Product Name column, select a product you want to add options to.
  5. Click on Add Option.

The Add Group Dialog will appear:

  • Add a Group name and label.
  • Click Add Another to add more than one group or click OK.
  • The Edit Product Options dialog will appear.
  • Click New Option to add a value, such as size or color. Click Add Another to add additional values or click OK.
  1. Click OK. You will see the newly created group in the Options field.

To edit a group, highlight the group in the Options field and click Edit Option.

Arranging Products

Products are listed in the Name column on the List Page tab of the E-Commerce Properties Editor in the order in which you add them to the catalog. This is also the order in which they appear on the Detail pages. This may not be the order in which you want to display the products, so you must rearrange them.

You can rearrange the products on the List Page tab of the E-Commerce Catalog Properties Editor.

Moving Products on the List Page Tab

  1. In Page view, display the List page or a Detail page of the catalog you want to work with.
  2. Open the E-Commerce Catalog Properties Editor.
  3. Display the List Page tab.
  4. In the Name column:
    • Select a product and drag it into a new position in the list. An indicator displays as you move the photo.
    • Select a product and click Move Up or Move Down to shift it into the proper position.

Sorting Products

  1. In Page view, display the List page or a Detail page of the catalog you want to work with.
  2. Open the E-Commerce Catalog Properties Editor.
  3. Display the List Page tab.
  4. Click Sort.
  5. Select the product item and choose Ascending or Descending.
  6. Click OK.

Resizing Product Images

  1. In Page view, display the List page or the Detail page of the catalog you want to work with.
  2. Click an image. The properties panel appears.
  3. Resize the image.

You can change the image size by dragging the slider on the properties panel, by entering the width directly in the properties panel, or by dragging the image.

  • To change the image size by dragging, select the image and drag the small white box until the image is the size you want. When you release the mouse button, the image is resized. If you are on the List page, all images are resized.
  • To change the image size by dragging the slider on the properties panel:

Drag the slider on the properties panel to the right to increase the image size, or to the left to decrease the size. A dotted line rectangle increases or decreases proportionally as you drag and the size of the image is displayed in a ScreenTip.

When the image is the size you want, release the mouse button.

  • To change the image size by entering the width directly in the Catalog Properties panel, type a number in the Width field.
  1. Apply the change.
  • If you are on the List page, click Apply to all to resize all thumbnail images.
  • If you are on a Detail page, click Apply to resize only the current photo or Apply to all to resize all photos in the catalog.

Removing Products

You can remove products from the catalog on the Products tab of the E-Commerce catalog properties editor.

  1. In Page view, display the List page or Detail page of the catalog you want to work with.
  2. Open the E-commerce catalog properties Editor.
  3. Display the Products tab.
  4. In the Product Name column, select a product and click Remove.

Duplicating Products

You can easily duplicate products that share similar characteristics.

  1. In Page view, display the List page or Detail page of the catalog you want to work with.
  2. Open the E-Commerce Catalog Properties Editor.
  3. Display the Products tab.
  4. In the Product Name column, select a product and click Duplicate.
  5. You will see the duplicate product listed with (copy) in the name.

Filtering Products

You can filter your product list by finding products with similar attributes.

  1. In Page view, display the List page or Detail page of the catalog you want to work with.
  2. Open the E-Commerce Catalog Properties Editor.
  3. Display the Products tab.
  4. Click on Filter. You will see the Product Filter dialog appear.
  5. Choose the attribute you want your product list to search for.
  6. Choose a parameter to narrow your search and type in a value.

For example, to search for mountain bikes, you could set your filter up as:

  • Attribute = Name
  • Parameter = contains
  • Value = mountain
  1. To further narrow your search, click the check box and add additional parameters.
  2. Click OK

To remove the filter, click Show All to display all products.

Importing Products

If you have an existing product list or prefer to work with a .txt, .csv, or .xml file, you can import your products into the E-Commerce Properties Editor. When setting up your .txt, .csv, or .xml file, remember:

  • The first row must contain the row headers. The row headers will be used to match the row to the appropriate field in the E-Commerce Properties Editor.
  • The image path is relative to the folder which contains it.
  • Up to 16 fields can be imported and matched to the fields listed in the E-Commerce Properties Editor.

Sample product files are located in the \NetObjects Fusion\Tutorial folder.

To import products into the E-Commerce Catalog Properties editor:

  1. In Page view, display the List page or Detail page of the catalog you want to work with.
  2. Open the E-Commerce Catalog Properties Editor.

Display the Products tab.

  1. Click on Import.

The Open file dialog appears.

  1. Browse to the file you want to import. You can import:
  • Tab Delimited Files (.txt). These are plain text files using tabs to separate each text string in a row.
  • Comma Delimited Files (.csv). These are plain text files using commas to separate each text string in a row.
  • Extensible Markup Language Files (.xml). These are plain text files using tags to separate each text string in a row.
  • Excel Files (.xls). These are Microsoft Excel spreadsheet files.
  1. Click OK.

Formatting the List Page

On the List page, you determine how your site visitors will view your products.

Selecting a Layout for Your Catalog

You can select a layout that showcases your products in an attractive way. Text can be placed above, below or beside images in columns and rows.

  1. In Page view, display the List page or a Detail page of the product you want to work with.
  2. Open the Catalog Properties Editor.
  3. Display the List Page tab.
  4. Click the Layout tab under the product list.
  5. Select a layout.
  6. Select the number of columns to display.

You can place up to 3 columns on a page.

  1. Select "Thumbnail Image links to Detail Page" to automatically open the product detail page when a user clicks on the thumbnail image.
  2. Continue formatting or click Done to close the editor.

Displaying Products

You choose which product items you want displayed on the List page. Labels can be placed by each item so that site visitors are aware of what each field represents.

  1. In Page view, display the List page or a Detail page of the catalog you want to work with.
  2. Open the E-Commerce Catalog Properties Editor.
  3. Display the List Page tab.
  4. Click the Display Items tab under the products list.
  5. In the Product Item field, highlight an item you would like to display with the product listing. If you want to display all items, click "Add All".
  6. Highlight the item in the Product Items to Display field and click Format to:
    • Link the item label to the Detail page and format the text.
    • Edit the item label and format the text.
    • Remove the item label.
  1. To change the order in which the items are displayed, highlight the item in the Product Items to Display field, then click Move Up or Move Down.

To remove an item from the Product Items to Display field, highlight the item and click Remove. To remove all items, click Remove All.

  1. Continue formatting or click Done to close the editor.

Displaying Purchase Options

You can set up links that site visitors can use to add products to their shopping carts or begin the checkout process.

  1. In Page view, display the List page or a Detail page of the catalog you want to work with.
  2. Open the E-Commerce Catalog Properties Editor.
  3. Display the List Page tab,
  4. Click the Purchase Option tab under the products list.
  5. Select "Display Buy" to provide site visitors a link that will take them to your store and begin the purchase process.
    • To display the link as text, choose Text Link and type the text you want to link.
    • To display the link as an image, choose Button Image and browse to navigate to the folder containing the image you want to add.
  6. Select "Display Add to Cart" to provide site visitors a link that will allow them to add products to their baskets and continue shopping.
    • To display the link as text, choose Text Link and type the text you want to link.
    • To display the link as an image, choose Button Image and browse to navigate to the folder containing the image you want to add.
  7. Continue formatting or click Done to close the editor.

This tab will only be available if you have configured a store engine. If you are using the catalog without a store engine, you will not have the option to add purchase items.

Formatting the Detail Page

NetObjects Fusion makes it easy for you to present the catalog in a professional and pleasant way. You can choose a layout for the product image, items and descriptive text and add images that link to your store. The format options you select apply to all Detail pages.

  1. In Page view, display the List page or a Detail page of the catalog you want to work with.
  2. Open the E-commerce Catalog Properties Editor.
  3. Display the Detail Page tab.
  4. In the Detail Page Layout section of the tab, select a layout.

In the samples, the boxes with and X represent the product and the lines are the text.

  1. In the Detail Page Display Items section, highlight the product items you would like displayed on the Detail page and click Add.

If you want to view all product items, click Add All.

  1. Highlight the item in the Product Items to Display field and click Format to:
  • Edit the item label and format the text
  • Remove the item label
  1. In the Detail Page Purchase Options:

Select "Display Buy" to provide site visitors a link that will take them to your store and begin the purchase process.

  • To display the link as text, choose Text Link and type the text you want to link.
  • To display the link as an image, choose Button Image and browse to navigate to the folder containing the image you want to add.

Select "Display Add to Cart" to provide site visitors a link that will allow them to add products to their baskets and continue shopping.

  • To display the link as text, choose Text Link and type the text you want to link.
  • To display the link as an image, choose Button Image and browse to navigate to the folder containing the image you want to add.

The Store Engine Settings will depend on the account being used. Refer to your store's user manual for complete information regarding these settings.

  1. Continue formatting or click Done to close the editor.

Configuring the Store

A Store Engine is a complete secure transaction processing system. It is a convenient and easy way to take care of your shipping needs with a variety of helpful shipping tools.

You can use a Store Engine to submit, authorize, process, capture, and settle credit card transactions without the need for separate transaction terminal or processing software. Credit card transactions are authorized in real time (immediately upon submitting). A Store Engine offers you the possibility to take secure credit card and electronic check payments 24 hours a day, 7 days a week real time without ever needing to speak to customers.

Depending on your Store Engine's settings, you can create a professional online business presence. You can:

  • offer customers a choice of shipping options at checkout.
  • customize how sales tax will be calculated for your products
  • use design tools to create a unique store

Refer to your store's user manual for further information about these settings.

  1. In Page view, display the List page or a Detail page of the catalog you want to work with.
  2. Open the E-commerce Catalog Properties Editor.
  3. Display the Store tab.
  4. The current store engine is listed in bold. Click Change Engine to use an existing store or sign up for a new store account.
  5. Configure and administer your account under "Store Engine Settings".
    • Online Administration: Click Launch to open your Store Engine administration panel.
    • Advanced: Customize your shopping cart's default settings for the selected store engine.
    • Monetary Format: Choose the monetary unit to be used with your products.
    • Weight System: Choose the weight measurement to be used with your products.

The Store Engine Settings will depend on the store being used. Refer to your Store's user manual for further information regarding these settings.

  1. Continue formatting or click Done to close the editor.

Control Download Time

When you configure a catalog, be considerate of site visitors by minimizing the time it takes for the images to download. Image quality and size both affect download time. You can use the output settings in the Catalog Properties Editor and the file size information on the properties panel to keep track of and adjust download time while maintaining image quality.

To control the image format

  1. In Page view, display the List page or a photo page of the catalog you want to work with.
  2. Open the Catalog Properties Editor.
  3. Display the Products tab.

The output settings for detail images and thumbnail images are separate.

  1. Click the Thumbnail Image tab or Detail Image tab at the bottom of the Images tab. On these tabs you set the quality of the thumbnail and detail images for the selected product. As you make changes, NetObjects Fusion displays the approximate download time for the file.

You may choose to save and apply previously defined settings. See Saving Output Settings.

  1. Select the File type. Most photos will be JPEG format.
  2. Set the Quality and Percent.

These fields both affect image quality. 100% is the highest quality, 0% the lowest quality.

  • Set the Quality field first. Each setting corresponds to a range of percents. Low corresponds to 0-39%, Medium to 40-75%, High to 76-99%, and Maximum to 100%.
  • Use the Percent field to fine-tune the quality setting. As you adjust the settings, the image in the Preview field changes. If the Preview image is scaled down, you can close the editor and check image quality in Page Design view.
  1. Select a download speed. The most common download time is 56.6.
  2. To apply these settings to all the product images, click Apply to All. This affects all thumbnail images or all detail images, depending on the selected tab.
  3. Set image rotation. This setting affects only the selected image.

To control the image sizes

  1. In Page view, display the List page or a Detail page of the catalog you want to work with.
  2. Select a thumbnail or detail image. Notice the image size on the properties panel. If you selected a thumbnail image, you can choose to see the size of the current image or of all thumbnail images.
  3. Resize the image. See Resizing Photos. As you resize, the Properties panel shows the effect on the file size.

Saving Output Settings

To save your output settings:

  1. In Page view, display the thumbnail page or a photo page of the gallery you want to work with.
  2. Open the Photo Gallery Properties Editor.
  3. Display the Images tab. The output settings for the thumbnail images and the photo images are separate.
  4. Click the thumbnail Image tab or Photo Image tab at the bottom of the Images tab.
  5. Click on the Output Settings menu and choose Save Setting. Note that a change must be made to the default settings in order to create a new setting.
  6. Type a name for the new output setting.
  7. Edit File Type, Quality and Percent, if necessary.
  8. Click OK.

Removing Output Settings

  1. From the properties editor, click the Thumbnail image tab or detail image tab at the bottom of the Properties tab.
  2. Click on the output settings menu and choose Save Setting.
  3. Highlight the setting you want to delete from the Existing Output Settings list.
  4. Click Remove.

Setting Up Navigation for Site Visitors

NetObjects Fusion automatically inserts navigation buttons with smart links on the photo pages. Site visitors can use these buttons to go to the next and previous photo pages and to return to the thumbnail page.

The images used for these buttons SPNavLeft.gif, SPNavRight.gif, and SPNavUp.gif are in the NetObjects\NetObjects Fusion\NetObjects System folder.

If you do not want to use these buttons, you can delete them and set up your own smart links between pages. See Adding Navigation Buttons to Stacked Pages.

Saving a Catalog Profile

NetObjects Fusion allows you to save the settings associated with your newly created catalog so it can be the basis for the next catalog created. When you save a profile, you save the

  • Detail Page layout
  • List Page layout
  • Displayed Items
  • Purchase options

To save a profile:

  1. In Page view, display the List page or Detail page of the catalog you want to work with.
  2. Open the E-commerce Catalog Properties Editor.
  3. Click Save Profile.

Note that the output settings displayed at the time you save your profile will be stored in your profile. These settings will apply to all catalogs created with this profile in the new catalog.

  1. Type a name for the new profile. If you choose the name of an existing profile, it will replace the existing profile.
  2. Click OK.

Not all settings are saved in your profile. Products, images associated with products, List page text links and Detail page text links are not included in a saved profile.

Removing a Catalog

To remove a catalog:

  1. In Page view, display the List page of the catalog you want to remove.
  2. Select the catalog object and delete it.
  3. Go to Site view.
  4. Delete the Detail page associated with the catalog. When you add a new catalog, the name of the catalog you just removed still appears in the Insert an existing catalog list in the Add catalog dialog.

To delete a catalog completely from your site:

  1. Go to Assets view.
  2. Select the Data Objects tab.
  3. Select the catalog you want to delete.
  4. Press Delete.

You can delete a catalog only if you have first removed it from your site as described above.