Change Store Layout

Introduction

After choosing your store colors (see the guide Change Color and Fonts for Your Store), you may want to add a few test products with their images (see Change and Add Images for Your Store), and add categories (assigning your few test products).

You should already have chosen which Layout you want to use, such as the Miva Merchant Look & Feel (often referred to as MMUI).

The Miva Merchant Administration Interface provides a way that you configure various aspects of your MMUI which can greatly affect the appearance of your store. These include:

Page Sections

By default, Miva Merchant enters the Navigation Bar images in the colors associated with one of the Look & Feel Configuration color schemes.

Note: Remember, these documents start from the Create Store and Look & Feel Configuration Wizards, and use the Miva Merchant Look & Feel User Interface (MMUI).

This store has both the Category Tree and the Navigation Bar turned on, which is the default state.

No Category Tree

In this store, the Category Tree has been turned off. So, Customer Login Link, Affiliate Login Link, and the category links have all been put into the Store Front Welcome message.

You might choose to have the category thumbnail images link to the respective categories instead of the text alone as shown in this store.

No Navigation Bar

The navigation bar contains the store links. Since it has been turned off in this store, these links may be placed wherever we want. In this case, some links are in the Global Header, and the “Search” and “Product Listing” links are in the Category Tree header and footer.


                  Store Links

Administration Interface Page Sections

To turn off one of the page sections:

    1. Click the link for your store's name in the Administration Interface menu.

    2. Click Page Sections link in the Edit Store form.

    3. Check off either or both items.

    4. Click Update.

Administration Interface Store Links

Turning off the either the category tree or the navigation bar means that you will have to create our own links. Miva Merchant lists the names URLs you need for all these links.

To locate the Store Links:

    1. Click the link for your store's name in the Administration Interface menu.

    2. In the top, right corner of the Edit Store form, locate the Links button.

    3. Click the button, and the links you need for each of the store pages are listed.
                                                                                            Links Button

To enter the Search link into the Category Tree Header:

    1. Click the link for your store's name in the Administration Interface menu.

    2. Click the Headers & Footers link in the Edit Store form.

    3. Enter the HTML reference for the Search link (or for any other link you want)

      .

Administration Interface Category Links

When you turn off the Category Tree, you may want to create links to categories elsewhere in your store.

To locate the Category Links:

    1. Click the arrow next to your store's name in the Administration Interface menu.

    2. Click the categories link, and locate the category you want from the list.

    3. In the top, right corner of the Edit Category form, locate the Links button.

    4. Copy the link for this category.

                                                                                   Links Button

The Category link:

http://pcelise:8001/merchant2/merchant.mv?Screen=CTGY&Store_Code=WS1&Category_Code=DI

You might notice that the first part of the Category Link is made up of the “Non-secure URL to Miva Merchant” from the domain settings:

http://pcelise:8001/merchant2/merchant.mv?

The next part of the link identifies that this is a category link.

Screen=CTGY

The next part of the link identifies your store:

&Store_Code=WS1

The final part of the link identifies the category code.

&Category_Code=DI

For the same domain and store, the difference from one category link to the next is the category code, which is at the end of the link. If you have a long list of categories you want to list, you might use a database editor or spreadsheet to concatenate the category code onto the first part of the link. Use this data to create your own HTML category list which replaces the category tree.

List Layouts

There are several options for the list layouts. You might choose to display the list with no product images, such as in the following Product List. (It uses the “List Alternate Background” color to delineate rows),

Or, you might choose to show thumbnail images in the line item format, such as the following Related Products layout. Use Related Products to list or show companion or coordinating products.

            Related Products Layout

Administration Interface Product List Layout

Tailor the Product List Layout to your particular products. If a thumbnail image of your product would be helpful to the shopper, include it. If your inventory level fluctuates, you might want to include the Short Inventory Level message.

Administration Interface Related Products Layout

After you've selected the Related Products when you edited a product, this layout will determine how the products are displayed on the product page in your store.

Modifying the Layouts

To modify the Product List, Related Products, or Search Layout:

    1. Click the link for your store's name in the Administration Interface menu.

    2. Click the applicable link (Product List, Related Products or Search Layout).

    3. Select the format and other items you want for the list.

    4. Click Update.

If you are not tracking product inventory using Miva Merchant, select “None” for the “Inventory Level Message.”

Category Product Layout

The layout you want for your products when a category is selected might depend on the type of products you have in your store, or in that particular category. If you don't need images, you can turn them off. Alternatively, you might want to show the full sized product image and/or description here.

This list is just a bare bones listing, using the Line Item format.

This category's Product Layout displays an expanded view, including the product description.

Administration Interface Category Product Layout

A new category has the default values set up for its products layout, including the Expanded format, product name, code, price, Add One to Basket, Buy One Now, Thumbnail image, and Long Inventory Message (if inventory is turned on).

To change a specific Category Product Layout

    1. Click the arrow next to your store's name in the Administration Interface menu.

    2. Select the Categories link in the Administration Interface menu.

    3. In the Categories listing, locate the category whose product layout you want to change.

    4. Select the format and other items you want for the list.

    5. Click Update.

Product Links

You may want to list featured products on your store front, or perhaps on a parent (or top level) category that has no products, only other categories. In the sample below, the Featured Specials show two products with each of their Add One to Basket links.

Administration Interface Product Links

The Product Links button includes the URL you need for the product itself, and also the associated buy one, and add to basket buttons.

                                                                                         Links Button

To obtain the Product Links:

    1. Click the arrow next to your store's name in the Administration Interface menu.

    2. Select the Products link in the Administration Interface menu.

    3. In the Products listing, locate the product you want.

    4. In the Product page, click the link button.

    5. Copy the link for the product and button(s) you want to display on your store front, or elsewhere.

Wrap a Store in a Table

This store is put into an additional table, allowing you to set a background outside the store (black) and another one for the store (yellow). The Store Welcome message also has a table in the image below, with a white background. (Also, in this image the top Navigation Bar has been turned off, and navigation links are in the global header and Category Tree)

                                                      Wrapped Store

Enter Global Header and Footer

In the Global header, you want to open a new table (in the previous sample store, we gave it a black background), row and cell (in the previous sample store, we gave the cell a white background), then close them in the Global footer.

  1. Click the link for your store's name in the Administration Interface menu.

  2. Click the Headers & Footers link.

  3. As the first item in the Global Header, enter the table data:

<center><table width="75%" bgcolor=black cellpadding=0 cellspacing=50><tr><td bgcolor=white>

  1. As the last item in the Global Footer, enter the closing table data:

</td></tr></table></center>

  1. Click Update.

Hiding Categories

Why would you want to hide a category? So it does not show up (either temporarily or permanently) in the category tree list, but provides a Miva Merchant page on which you could provide additional information for your customers. Put the link to this category anywhere, just as with any other category.

Temporarily Hidden Category Names

In this store, we did not want the Imported Products, Gift Items, Sale Items, and New Products permanently displayed in the category tree. So, these categories were placed under inactive categories. But, when one of these categories are selected, all subcategories having the same inactive parent will all display in the category tree, as will its siblings. See the next section, Imported Products.

Imported Products

When this link is selected from the store front page, the Imported Products category itself, its subcategories (France, Germany, and Italy), and its 'sibling' category (Gift Items) display in the category tree.

In the following store image, the subcategory, Italy, has been selected. You might want to include these subcategory links in the parent category header, creating a more obvious selection for your shoppers.

Creating Inactive Parent Category (in Admin)

The parent to the category you want to temporarily hide will be inactive.

  1. Create the category in the same way as other categories, just be sure to uncheck the box next to Active.

  2. Create the category, entering the code and name.

  3. Enter the category code for the inactive parent category, or use the Lookup button to locate it.

  4. Click Update.

Permanently Hidden Category Names

The categories Customer Comments, Collectibles Info, Link, and Help are assigned to inactive categories, and also have the Category Name as an HTML comment. When selected, the category will not show up in the category tree, although a blank area will display. See the next section, A Help Page.

A Help Page

In this store, the category names are actually HTML comments: Customer Comments, Collectibles Info, Links, and Help. These provide a Miva Merchant page whose header and/or footer can be used to enter data.

Caution: Only the Category Name is an HTML comment. Do not use this for the category code. Use only alphanumeric characters for the category code.

You might want to have a help page which could assist your shoppers in finding their way around your shop, tell them what payment and shipping options are available, or other FAQs (Frequently Asked Questions).

 

Creating Commented Category (Admin)

The Help category's parent is both inactive and its name is an HTML comment.

To create the parent category for Help:

    1. Enter the category code.

    2. Enter the Category Name as an HTML comment.

    3. Uncheck the box next to Active.

    4. Click Update.

To create the Help category:

    1. Enter the category code.

    2. Enter the Category Name as an HTML comment.

    3. Check the box next to Active.

    4. Click Update.