Enhanced User Interface

Version 3 Configuration

Installation

The E-UI is a Merchant Store Module so it must be installed to each Store that will be utilizing it. Each Store will need its own, separate License. Because the E-UI is distributed as both an OUI Extension Module (one module) and as an MMUI modification (two modules), there are two different Installation procedures, each with its own Installation methods. 

By default, Merchant 3 installs itself to a directory called Merchant2 (same as version 2 of Merchant). If you, or your Hosting Provider, installed Merchant 3 to a different directory such as Merchant3, then you will need to upload/install the E-UI to that directory instead of the Merchant2 directory that is described here.

OUI Installation

These instructions are for installing the Enhanced User Interface as an OUI Extension module.

Before a Store can utilize the E-UI, it must be installed as a Domain (Mall) Module. The e-ui.mv file needs to be placed inside the modules/system directory, which can be accomplished via FTP or by using the Merchant Administration program.

The above diagram shows where the module needs to be placed. It should be noted that the SYSTEM Directory may not exist. If your particular installation of Merchant does not include this directory, under the MODULES Directory, then you must create it.

FTP Install Method

1. Log on to your Web Site via FTP and upload the e-ui.mv file to your Merchant2/modules/system directory. Remember that if the SYSTEM Directory does not already exist, you must create it.
2. Close your FTP program and Log on to your Merchant Administration program with your Web Browser.
3. In Merchant Administration, click on the Arrow next to Modules to expand the Modules section. Click on the Add Module link to Add the E-UI to the list of available modules.
4. On the Add Module screen, enter modules/system/e-ui.mv and then click the Add Button:

5. Click on the Arrow next to Stores to expand the Stores category. Click on the Arrow next to the Store that will be utilizing the E-UI. This will expand the Store categories so that you may install the E-UI for that particular Store.
6. Click on the System Extension Configuration link. Select E-UI from the next screen and then click the Update Button:

7. The E-UI has now been installed as a Master Module for the Domain (Mall) and as a Store Extension Module. Please see the Configuration section for detailed instructions on using the E-UI.

Administration Install Method

1. Log on to your Merchant Administration program with your Web Browser.
2. In Merchant Administration, click on the Arrow next to Modules to expand the Modules section. Click on the Add Module link to Add the E-UI to the list of available modules.
3. On the Add Module screen, click the Upload Button . In the Upload File Window, click the Browse Button and locate the e-ui.mv file on your local computer. Check the Overwrite box and then click the Upload Button.

4. After the file is uploaded, your Add Module screen should look like this:

5. Click on the Add Button to add the E-UI as a Master Module for the Domain (Mall).
6. Click on the Arrow next to Stores to expand the Stores category. Click on the Arrow next to the Store that will be utilizing the E-UI. This will expand the Store categories so that you may install the E-UI for that particular Store.
7. Click on the System Extension Configuration link. Select E-UI from the next screen and then click the Update Button:

8. The E-UI has now been installed as a Master Module for the Domain (Mall) and as a Store Extension Module. Please see the Configuration section for detailed instructions on using the E-UI.

MMUI Installation

The MMUI instructions are not yet complete and will be provided as soon as the MMUI version of the E-UI is finished.

Configuration

To configure the Full version of the E-UI, click on the System Extension Configuration link underneath the store that the E-UI was installed to. On the System Extension Configuration screen, click the E-UI tab to bring up the E-UI Configuration screen.

Note: The Lite version contains no configuration options.

The E-UI Configuration screen is divided into 3 separate sections, each one dealing with a different part of the User Interface.

Customer Signup and Checkout

This section allows you to set options that have to do with gathering Customer Information.

Save Button

The Save Button is used when a Customer creates a new account or updates an existing account. Choose from Left, Center, or Right placement.

Continue Button

The Continue Button is used during the checkout process. Choose from Left, Center, or Right placement.

Shipping

If products are not physically shipped, because you sell downloadable software or hotel reservations, for example, then you will probably want to remove the Ship To Information section. Remember that with the Enhanced UI, the primary customer information comes from the Billing section. Therefore, removing the Shipping Information section would be logical if there is no physical shipment. To remove the Shipping section, deselect the Prompt for Ship To Info check box. If the Shipping section is removed, you will no doubt also want to remove the Shipping Method Selection drop down list. If products are not to be shipped there is no sense asking customers for a shipping method. To remove the shipping method, select the Remove Shipping Method Selection check box.

Note that the above two fields are complementary. If one is checked, the other should be un-checked. To remove both the Ship To section and the Shipping Method drop down list, the top box should not be checked and the bottom box should be checked.

Bill To Text

This is the text that appears in the Header above the Billing Information section.

Ship To Text

This is the text that appears in the Header above the Shipping Information section. The first field (At Initial Checkout) is used on the first checkout screen where customers must enter shipping information if it is different from the billing information. The second field (At All Other Screens) is used on the rest of the checkout screens (Shipping method selection, Payment method selection, and Invoice).

Ship Country

If products are shipped only to (or within) a specific Country, you may specify that country here. If a country is specified, customers will not be allowed to select a shipping destination country. Instead, the Country Name that is configured here will be displayed.

If you designate a Shipping Country, you may also specify that you will accept orders only from a customer that lives in that Country. If the Make Bill To the same box is checked, customers will not be allowed to enter a Country for their Billing Address.

Keep in mind that if you force the Billing Address Country, you prevent customers from other Countries from placing orders even though the products will be shipped within your designated Country. For example, if you restrict shipping to the United States and you force the Billing Address to also be within the United States, you prevent somebody from a different country from ordering products as gifts to be delivered to a recipient within the United States.

 

Note that there is nothing to stop a customer from using your designated Country and continuing on with the order, even though the customer lives in another Country.

Other State/Province

Checking either of these two boxes will prevent a customer from entering a State or Province that does not exist in your State/Province drop down list. Customers will be forced to select a State or Province from the list.

Product Display

This section allows you to set options that control how the Thumbnail and Product pages are displayed.

Category GAP

To the right of the Category display is a gap of extra spaces (technically called a BLOCK QUOTE). Checking this option will remove the extra space that appears between the Categories and the Product descriptions.

Description

This option allows you to remove the extra blank line that appears after the Quantity - Add To Basket line and before the product description.

Quantity

Select this option to remove the Quantity in Basket display.

 

Merchant allows you to remove this field from the Category display, therefore this option applies only to the Full Product display.

Code

Select this option to remove the Product Code display.

 

Merchant allows you to remove this field from the Category display, therefore this option applies only to the Full Product display.

Weight

Select this option to remove the Shipping Weight display.

 

Applies to Full Product display and Category/Listing Display.

 

Note that if the Product Weight is 0, the Shipping Weight will not be displayed irregardless of the setting that is configured here. If you physically ship some products and provide other products for download, then you don't need to remove the Shipping Weight if the products are properly configured since the shipping weight will not be displayed if it is zero.

Weight Text

When a Shipping Weight is displayed, this Text will be used.

List Price Text

If a product is discounted, this field allows you to specify what the List Price should be named.

 

This could be:

 

List:
List Price:
Suggested Price:

 

This field is displayed only if there is a difference between the product price and the customer price. If this field is blank, a List Price will not be displayed, even if there is a difference.

Selling Price Text

This is the text that appears before the Selling Price.

 

This could be:

 

Price:
Your Price:
Discounted Price:
Our Price:

 

To display this text (as well as the price) in Bold Red, check the Red box.

Price Difference

If a product is discounted, you can have the discounted amount displayed. This will appear between the List Price and the Selling Price.

 

Example:

 

List: $100.00
Discount: $10.00
Your Price: $90.00

Attributes

Allows you to change the size of a Product Attribute that uses a Text Box. The Merchant default is 40 characters. The E-UI default is 25 characters. What you enter here will be used for the SIZE attribute of the Text Box. In addition to the Text Box size, E-UI also adds a Maximum Size of 254 to the Form Field since that is the database limit for the Text Box attribute.

Remove Buttons if Price is Zero

If a product does not have a price, this option allows you to remove all of the Purchase Buttons so that a customer cannot purchase the product online. Useful if you wish to show products that are out of stock or provide information for special order products or products that have a fluctuating price.

Add 1 To Basket

Link Button to Product Display

If this option is selected, then instead of Adding the product to the Basket, the customer will be taken to the full product description page. In effect, the button turns into a "More Info" button. When using this option, you should also change the button text and/or use an appropriate image.

 

Does not apply when using the Merchant "List" format because the Button is also used on the Search and Product listing screens.

Buy 1 Now

Link Button to Product Display

If this option is selected, then instead of Adding the product to the Basket and going to the check out page, the customer will be taken to the full product description page. In effect, the button turns into a "More Info" button. When using this option, you should also change the button text and/or use an appropriate image.

Note that only one of the Link Button options can be checked (either for Add 1 To Basket or Buy 1 Now). If both are checked, the Add 1 to Basket option takes precedence and the check mark will be removed from this option.

 

Does not apply when using the Merchant "List" format because the Button is also used on the Search and Product listing screens.

Add To Basket

Remove Add To Basket Button

Select this option to remove this button along with its corresponding Quantity input box.

Quantity Text

Allows you to change the text that appears before the Quantity Input box and the "Add To Basket" Button. If you book Hotel/Motel Reservations, you can change this field to "Number of Nights:" to give a better indication of what the customer is buying.

Other Options

This section allows you to configure general page characteristics and other global options.

Page Width

This option allows you to set the width of the Merchant generated pages. The Merchant default is 100% of the Browser width. Generally, you would only use this option if you need to set a pixel width (such as 600 or 700 pixels). Setting a pixel width will keep your pages at a predetermined size so that they will not grow larger as the Browser Window is expanded.

Extra Blank Lines

The Merchant User Interface uses a lot of extraneous blank lines (<BR> tags). Checking this option will remove some of these extra lines.

Category Display

The Category Tree is what appears on the left hand side of the screen when viewing Store Categories and Product listings. There are several options associated with the Category Display.

 

Put Footer at the Bottom and Center it will place the Category Footer at the Bottom of the Category display instead of underneath the last Category item. The footer normally displays at the end of the last Category item, and it aligns to the left. This option will place the Category Footer at the Bottom of the category display and it will center the footer horizontally within the display.

 

Always Expand Current Category keeps the current category tree expanded when a customer is viewing the full product description. By default, Merchant collapses the Category Tree when a product description is viewed. This option keeps the tree expanded so that customers know where they are within the list of categories.

 

Always provide a Link to Current Category keeps the Category Item "clickable". By default, Merchant removes the Link to a Category while a customer is viewing that particular category. Enabling this option allows a customer to easily click back to the main page for a particular category without having to traverse the entire category tree.

Default Discount

This option allows you to offer a default discount to all customers who are not already receiving a discount (i.e., they do not belong to a price group). Enter the discount amount as a whole number (i.e., 10, 20, etc). This is a global discount that applies to all products. It is not necessary to configure a price group and add products to it ahead of time.

Mall Page

Merchant provides very few options for formatting a Mall (or Select Store) page. Each store is listed as a text link and no method is provided to display store thumbnails, sample products, or even a store description. This option allows you to replace the Merchant generated Mall page with your own static HTML page. If you do not host multiple Stores or are comfortable with the Mall options that Merchant provides, then leave this field blank.

 

To replace the Merchant generated Mall page, enter the name of an HTML file to display (example: mallpg.html). This file must be placed inside the Merchant Document directory (the same directory where the admin.mv and merchant.mv files are located). The static HTML page will need to provide the links to the various Merchant stores. Store links can be obtained in the Merchant Administration program by clicking on a Store name, and then clicking the links graphic. The Store Front link is the URL that needs to be used to link a Store listed on the Mall page to the actual Store front.

 

Note: When using the OUI version of the E-UI you must set the Store Selection Layout to OUI, otherwise this option will have no effect.

Header Tags

Enter any text that is valid for the <HEAD> section. Examples would be linking to an external Style Sheet, inserting inline CSS information, JavaScript functions and Meta Tags.

Add'l Body Tag

Any text added here will be appended to the <BODY> tag. As an example, if you wish to remove the Top and Side Margins that Browsers normally display, you can add the following text to the <BODY> tag:

topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"

Image Buttons

Note: The Lite version does not include the Image Buttons.

Beginning with Merchant 3, you may now replace all of the Form Buttons with Image files. You do this by clicking on the Buttons link in the main Store configuration section.

When replacing the Form Buttons with your own Image files, these graphic files need to be placed within your Merchant Document Root Directory. For most people, this is the Merchant2 directory, somewhere within your own Document directory.

A Document Directory (or Document Root) is where your HTML files are located. The Merchant Document Root Directory is where the merchant.mv and admin.mv files are located.

If your Document Root is

web/mysite

then your Merchant files would normally be placed in

web/mysite/Merchant2

and your Image files should be placed inside of

web/mysite/Merchant2, or
web/mysite/Merchant2/graphics, or
web/mysite/Merchant2/ui/graphics

or any sub-directory of your choosing inside of the Merchant2 directory.

If your site supports multiple stores, you should keep your User Interface graphics separated so that each store has its own set of graphics.

The path you enter to the image file is "relative" to the Merchant2 directory. You only enter the name of the image file or a sub-directory\name to the image file.

Examples (relative to web/mysite/Merchant2)

add1b-01.gif
Physical location:
web/mysite/Merchant2/add1b-01.gif

graphics/ui/add1b-01.gif
Physical location:
web/mysite/Merchant2/graphics/ui/add1b-01.gif

gapdev/ui/graphics/add1b-01.gif
Physical location:
web/mysite/Merchant2/gapdev/ui/graphics/add1b-01.gif

staranet/ui/graphics/add1b-01.gif
Physical location:
web/mysite/Merchant2/staranet/ui/graphics/add1b-01.gif

It is not necessary to upload all of the Image Buttons that are provided with the E-UI. If a particular set is suitable for your Store, you need only upload that particular set of images.

Acrobat PDF version of this Manual (Click to View or Right Click to Save).

Product Features Screen Shots Admin Manual Tech Info