Enhanced User Interface

Version 2 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. 

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.

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.

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. The Button Text is the text that will appear on the standard form button and is also used as the ALT attribute when using an Image button. To replace the standard form button with a Button Image, enter the Relative Path to the Image File. The Image File needs to be placed in the Merchant directory (or sub-directory thereof). This is the directory where your merchant.mv and admin.mv files are located. For most people, this is the Merchant2 directory.

Continue Button

The Continue Button is used during the checkout process. Choose from Left, Center, or Right placement. The Button Text is the text that will appear on the standard form button and is also used as the ALT attribute when using an Image button. To replace the standard form button with a Button Image, enter the Relative Path to the Image File. The Image File needs to be placed in the Merchant directory (or sub-directory thereof). This is the directory where your merchant.mv and admin.mv files are located. For most people, this is the Merchant2 directory.

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.

Code

Select this option to remove the Product Code display.

Weight

Two options are provided. The first is to remove the Shipping Weight display and the second is to add the Shipping Weight to the Thumbnail pages. These options are mutually exclusive in that if the Weight is removed, it cannot be displayed on the Thumbnail pages. Note that if the Product Weight is 0, the Shipping Weight will not be displayed irregardless of the settings that are 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

Remove Add 1 To Basket Button

Select this option to remove this button.

Use this Text

Select this option and enter text to replace the default "Add 1 To Basket" text that appears on the Button.

Use this Image

Select this option and enter the Relative Path to an Image File to replace the Add 1 To Basket Button.

The Image File needs to be placed in the Merchant directory (or sub-directory thereof). This is the directory where your merchant.mv and admin.mv files are located. For most people, this is 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 (see the 3rd and 4th examples below).

 

Example:

 

add1b-01.gif
graphics/ui/add1b-01.gif
gapdev/ui/graphics/add1b-01.gif
staranet/ui/graphics/add1b-01.gif

 

Note that the "Use this Text" field (previous option) is used for the ALT attribute when a customer moves their cursor over the replacement button. A graphic image can also display Alternate Text as the mouse is moved over the image. When replacing the standard Form Button with your own image, use the previous field to provide the Alternate Text.

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.

Buy 1 Now

Remove Buy 1 Now Button

Select this option to remove this button.

Use this Text

Select this option and enter text to replace the default "Buy 1 Now" text that appears on the Button.

Use this Image

Select this option and enter the Relative Path to an Image File to replace the Buy 1 Now Button.

The Image File needs to be placed in the Merchant directory (or sub-directory thereof). This is the directory where your merchant.mv and admin.mv files are located. For most people, this is 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 (see the 3rd and 4th examples below).

 

Example:

 

buy1-01.gif
graphics/ui/buy1-01.gif
gapdev/ui/graphics/buy1-01.gif
staranet/ui/graphics/buy1-01.gif

 

Note that the "Use this Text" field (previous option) is used for the ALT attribute when a customer moves their cursor over the replacement button. A graphic image can also display Alternate Text as the mouse is moved over the image. When replacing the standard Form Button with your own image, use the previous field to provide the Alternate Text.

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.

Add To Basket

Remove Add To Basket Button

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

Use this Text

Select this option and enter text to replace the default "Add To Basket" text that appears on the Button.

Use this Image

Select this option and enter the Relative Path to an Image File to replace the Add To Basket Button.

The Image File needs to be placed in the Merchant directory (or sub-directory thereof). This is the directory where your merchant.mv and admin.mv files are located. For most people, this is 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 (see the 3rd and 4th examples below).

 

Example:

 

add2b-01.gif
graphics/ui/add2b-01.gif
gapdev/ui/graphics/add2b-01.gif
staranet/ui/graphics/add2b-01.gif

 

Note that the "Use this Text" field (previous option) is used for the ALT attribute when a customer moves their cursor over the replacement button. A graphic image can also display Alternate Text as the mouse is moved over the image. When replacing the standard Form Button with your own image, use the previous field to provide the Alternate Text.

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.

Navigation Bar

The Navigation Bar is the Top section of each Merchant page. It provides links to Customer Accounts, Searching, Product Listing, Shopping Cart, and Checkout. You may wish to remove this Navigation Bar if you provide the appropriate links elsewhere (either via a Framed site or via Page Headers and/or Footers).

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.

 

Remove Category allows you to remove the Category Tree in its entirety. If links are provided to products via HTML or if the Merchant store is run within a framed site, then the Category Tree is probably not needed.

 

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.

Navigations Buttons

The Navigations Buttons are used when a Customer is viewing the results of a Search or Product Listing. They are also used when viewing the Category (Thumbnail) listings if a page length (number of products to display) has been configured for a particular Category.

Previous Button

This Button will take the customer back to the Previous listing, if one exists. The first page of a product listing will not display this button. The Button Text is the text that will appear on the standard form button and is also used as the ALT attribute when using an Image button. To replace the standard form button with a Button Image, enter the Relative Path to the Image File. The Image File needs to be placed in the Merchant directory (or sub-directory thereof). This is the directory where your merchant.mv and admin.mv files are located. For most people, this is the Merchant2 directory.

Next Button

This Button will take the customer to the Next listing, if one exists. The last page of a product listing will not display this button. The Button Text is the text that will appear on the standard form button and is also used as the ALT attribute when using an Image button. To replace the standard form button with a Button Image, enter the Relative Path to the Image File. The Image File needs to be placed in the Merchant directory (or sub-directory thereof). This is the directory where your merchant.mv and admin.mv files are located. For most people, this is the Merchant2 directory.

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"

Page Header

Enter any HTML text that you wish to appear at the Top of each page.

Page Footer

Enter any HTML text that you wish to appear at the Bottom of each page.

Image Buttons

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

When replacing the Purchase 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. When configuring the Enhanced User Interface, 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