Reference Guide

User Interface

Settings

Misc Color Section

Specify the colors to be used in selected areas of your store. You can enter the color in each field as a hexadecimal value (such as #ffffff for white), or by clicking on the color picker icon . Note that the fields in this tab do not work with CSSUI, only with the older MMUI. Similar changes to a CSSUI store are made in the cssui.css file.

When you make a change to a color, it's a good idea to view your on-line store and verify that the results are what you expected. You might also want to view your on-line store with a few different browsers or browser versions.

Fonts

Use the font settings to change the typeface, size, and color of fonts throughout your store. Note that the fields in this tab do not work with CSSUI only with the older MMUI. Similar changes to a CSSUI store are made in the cssui.css file.

Affiliate Links

See also Marketing > Affiliates Tab.

If you have enabled the Affiliate Links Program (Activate Affiliate Program checkbox) a new link will appear at the top of your on-line store.

The Affiliate Login link in your on-line store allows affiliates to login to their account, or to create a new account. Note that, after an affiliate creates an account in your on-line store, you can edit that account in the admin interface. ( Marketing > Settings > Affiliates).

Use the User Interface > Settings Tab > Affiliate Links section to edit the HTML of both links. You can change the text of the link, the background color, add an image, etc.

Buttons

Customize the wording or look of buttons in your store, such as the Add One To Basket or Search buttons. When you finish making changes, click the Update at the bottom of the screen.

Text

You can change the wording of each button in the store. The button size will be adjusted to correctly display the text that you enter.

Show Code

Click on the Show Code button to view the HTML for each button. You can change the text, image, alt text or action of the button directly

Category Tree Template

View and edit the code that controls the category tree in your on-line store.

Template Code

Note that the category tree template code can be edited in different places in the Miva Merchant admin interface, for example: > User Interface > Pages tab > Edit SFNT (Storefront). It doesn't matter which screen you use in the admin interface to edit the category template code. Editing the category tree template code in one location, changes it in all locations.

Custom Fields

If you have created Custom Fields and you would like to reference a custom field in the category tree template code:

1. Check the box next to a custom field.
2. Click the Update button. You can now reference the custom field in the category tree template code.

Notes / Versions / Recall / Clear History

Please see Appendix 2: Common Fields in the Admin Interface.

Category Tree Header / Category Tree Footer

Use the Category Tree Header/Footer to add content, such as trust marks, logos, etc, above or below the category tree.

Customer Links

Use this screen to modify the HTML for the Customer Login Link and Customer Account Links.

When customers visit your on-line store, they can click on the Customer Login Link to sign into their account, or to create an account if they don't already have one. When customers are logged in, Miva Merchant can display any special pricing (based on Price Groups) or products (based on Availability Groups) you have created. Note that you can also edit and create customer accounts in the admin interface. See Customers.

After customers login, the link changes to the Customer Account Link. Customers can click on this link to go to their account info or order history.

Navigation Bar

Allows you to customize the navigation bar in your on-line store.

When you first click on the Navigation Bar tab you will see the "point-and-click" mode. In this screen you can only change the names of the buttons.

But if you click on the Advanced Mode link at the bottom of the screen, you can directly edit the HTML of the Navigation Bar.

In advanced mode you can change the background color, add logos and links, and replace the default button images, such as Product List, or Basket Contents, with your own images. The height of the bar will expand to accommodate the size of the images you upload. For best results, the logo and button images should usually be the same height. Images of varying heights will be aligned by the bottom edges.

Remember that file names for images cannot include spaces. So prod list.gif, would be accepted, but no image would be displayed. If your file names contain spaces, rename the files before uploading them in Miva Merchant.

It is a good habit to check your results by looking at the store screen to be sure the images are appearing as you intended. Remember to click Update after uploading new images, and refresh the store browser window.

Notes / Versions / Recall / Clear History

Please see Appendix 2: Common Fields in the Admin Interface.

Smart Breadcrumbs

Smart Breadcrumbs appear in your on-line store, not in the Miva Merchant admin interface. For information about breadcrumbs in the admin interface, please see Breadcrumbs.

Smart Breadcrumbs show customers how they navigated to the current store page, and have clickable links so that customers can easily go back to previous pages along that path. Smart Breadcrumbs are only supported for CSSUI stores.

                                                                                         

Smart Breadcrumbs:	In this section you can directly edit the code that will affect how breadcrumbs are displayed throughout your store.
Max Category Name Length:	The default is 0 which means that the category name will be fully displayed no matter how long it is. If you set the max category name limit to 10 and you have a category name that is 15 letters, the category name will be truncated to 10 letters.
Max Product Name Length:	The default is 0 which means that the product name will be fully displayed no matter how long it is. If you set the max product name limit to 10 and you have a product name that is 15 letters, the product name will be truncated to 10 letters.
Max Number of Link Levels to Display:	This setting only affects you if your store has sub-categories, sub-subcategories, etc. The default is 0 which means that entire breadcrumb path will be displayed, no matter how long it is. However, if you set the max link levels to 3 and the breadcrumb has 5 levels, only the first level and the last 2 levels will be shown to the customer Breadcrumb contains 5 levels, max levels to display is set to 0. Breadcrumb contains 5 levels, max levels to display is set to 3.
Notes: Versions: Recall: Clear History:	Please see Appendix 2: Common Fields in the Admin Interface.

Global Header and Footer

Content that you add (such as images, links and text) to the global header appears at the top of every screen in your on-line store. Content that you add to the global footer appears at the bottom of every screen.

The notes and versions for the global header and global footer are separate. See Appendix 2: Common Fields in the Admin Interface. You can save and recall each one independently. If you make changes to both, and then click Update, each is saved as a new version.

HEAD Tag Content

This tab is used for two purposes: modifying the HEAD tag for your store.

Editing the HEAD Tag for Your On-line Store

You can customize the contents of the tag in your store html code (using different META tags, keywords, title, description, tracking code, script declarations, etc.), by making changes to the HEAD Tag Content field. Do not include the and tags in this field, just the information that goes between them. If you leave this field blank, a simple HEAD tag is automatically created.

Note that the HEAD tag is not the same as the global header. See User Interface > Settings Tab > Global Header and Footer.

If you are using the MMUI Framework and you upload a CSS file, you must manually reference that file in your HEAD tag. For other Frameworks the CSS file call will be placed automatically into your page templates.

Notes / Versions / Recall / Clear History

Please see Appendix 2: Common Fields in the Admin Interface.

Mini-Basket

This section does not appear in the admin interface until you install the mini-basket feature.

Mini-basket lets you view the contents of your basket without navigating away from the current page. The mini-basket feature adds a special link to store pages called "Basket Contents", which shows you the number of items in your basket. If you click on the link, a basket popup window appears.

To Install the Mini-Basket Feature

1. Go to > Utilities > Add/Remove Modules > Available Modules section.
2. In the box "Mini-Basket", click Install.

To Add Mini-Basket to Your Store Pages

You can have the mini-basket appear in different locations on a page. For example, you can add the mini-basket to a header or a footer. In our example, we'll add the mini-basket to our store's global header.

1. Assign the mini-basket item to your store pages

In our example, we are going to add the mini-basket feature to every store page.

1.1. Go to > User Interface > Items tab.

1.2. In the Items tab, enter the string "mini" in the Search text box and click the Search button.



1.3. Click on the global_minibasket item to edit it.

1.4. In the Edit Item: global_minibasket screen, select the Pages tab. In our example, we're going to make the mini-basket visible on every store page.

1.5. In the Pages tab, press "control-a" to select every page, then click Assign Record(s) .



2. Modify the template code.

In our example, we're going to add the mini-basket link to the global header.

2.1. Go to > User Interface > Settings Tab > Global Header and Footer Section

2.2. Scroll to the bottom of the Global Header text box. We're going to add a line of code between the last two lines.

This:

Becomes this:

2.3. After you change the template code, click Update.

To Customize the Mini-Basket

1. Go to > User Interface > Settings tab > Mini-Basket section.
                                                     

Maximum Product Name Length:	Use this field to limit the length of product names in the mini-base popup. For example, if you have a product name "Xylophone" and you set the name length to 5, the product name will display as "Xylop" in the mini-basket popup. Set this field to 0 to allow product names of any length.
Image:	If you have already created an Image Type, you can select it here. Images of that type will appear in the mini-basket popup. For example, if you created an Image Type called "Front", the "Front" image type will appear in this list box. If the customer adds a product to their basket that has a "Front" image, the image will appear in the mini-basket popup. Using Image Types is the only way that you can have product images appear in the mini-basket.
Advanced Mode:	Click on the Advanced Mode link to display the template code that controls the mini-basket popup.

2. When you finish making changes to the mini-basket settings, click Update.

Mini-Basket Image Dimensions

The mini-basket image dimensions section gives you some control over the size of the mini-basket in your on-line store. However, the mini-basket image dimensions section won't show up in the Settings tab until you complete these steps:

1. Install the mini-basket. See To Install the Mini-Basket Feature.
2. Add the mini-basket to at least one of your store pages. See To Add Mini-Basket to Your Store Pages.
3. Go to > User Interface > Settings tab > Mini-Basket section.
4. Click on the Advanced Mode link.
5. Select the Product Images > Main checkbox and click Update.



6. The mini-basket image dimensions section will appear in the settings tab.
                 

Product Image:

No constraints: If you select this option, your product images will appear full-size in the mini-basket popup. The mini-basket popup will increase in size, if necessary. Resize to fit within bounding box: If you select this option, product images in the mini-basket will be scaled down if they are larger than the dimensions that you enter. The mini-basket popup will always display at its default size (approximately 377 x 134 pixels).

Packaging Rules

HTML Profile

Define the doctype for your on-line store. The doctype declaration ends up being included in the page source code for every page in your on-line store. The doctype tells the browser what kind of markup language the page uses, so that the browser can correctly display the page.

Please note that this is the only place in your store where you should declare a doctype. Including a doctype declaration in any other page will cause conflicts and errors.

Shopping Interface Settings

If this checkbox is checked, when a customer clicks the checkout button, they will be prompted to either sign in or to create an account. If this checkbox is not checked and the customer clicks the checkout button, they go right to the checkout screen.

Checking this box can be useful if you offer special pricing to selected customers using Price Groups. It can also encourage shoppers to create an account, which can make their future visits to your store more convenient.

Template Import/Export Settings

Using the admin interface, you can export your store pages to an external HTML editor, such as Dreamweaver. You can use your external HTML editor to change the look and feel of your store pages, and then re-import them back into the admin interface. Use the fields in this tab to select the folder on your server where your store pages will be exported to, and imported from.

To Set the Import/Export Folder

1. In the Import/Export Settings tab:

1.1. Select either Data or Webroot from the Import/Export folder.

1.2. Enter the name of a subfolder that you want to use for importing and exporting. This folder will be created if it doesn't already exist.

2. Click Update.

To Export Store Pages

1. Use the fields in the > User Interface > Settings > Import/Export Settings tab to select your import/export folder.
2. Go to > User Interface > Pages tab.
3. In the Pages tab, select the pages that you want to export, then click Export Pages.

A copy of the store pages you selected will be placed in your import/export folder. For each store page there will be one more .htm files.



4. Some HTML editors have a built-in FTP that will allow you to connect to your store server and edit the exported pages where they are. If your HTML editor does not have built-in FTP, you can use a stand-alone FTP package to download your store pages from the import/export directory on the server to your local machine, and then edit them.

To Import Store Pages

1. Use the fields in the > User Interface > Settings > Import/Export Settings tab to select your import/export folder.
2. Using FTP, copy the store pages that you edited from your local machine to your import/export folder on the server. Remember to copy both the .html file and the .css file.
3. Go to > User Interface > Pages tab.
4. In the Pages tab, select the pages that you want to import, then click Import Pages.

The store page(s) will be copied from the import/export folder and will overwrite your current store page. If you accidentally overwrite one of your store pages, you can restore a previous version of the page. Please see Versions and Recall.