Call: (623) 322-6066

Glendale Designs News

Do you need to get a fresh new look for your site or added functionality to your Miva Merchant store?
Is your website ranking stuck like a message in a bottle?
We will get your message out and get you ranked on Google, Yahoo, MSN and social networking sites!

Miva Merchant 5.5 Quick Start Guide

for Integrating Miva Merchant into Your Existing Site
Courtesy of Miva Merchant

Welcome to Miva Merchant® 5.5! This guide will walk you through setting up your Miva Merchant® store using your usual website design program, such as Dreamweaver® . In most cases, you will be creating an e-commerce store to have the same look and feel as an existing website. Because Miva Merchant® offers many powerful tools for managing your store, the installation process requires a careful and methodical approach.

Don’t worry, though, this guide will make the process as simple as possible. And because Miva Merchant® is completely supported, you can contact your service rep at any point in the process for assistance.

In this guide you’ll be viewing actual screenshots of a Miva Merchant® storefront for demonstration, a store which sells dart frogs, Tropical terrariums, plants and supplies.

Here’s an overview of the steps to setting up your Miva Merchant® store:

Step #1 Get Familiar with Miva Merchant®

Explanation of Terms Relating to Categories and Products
Glossary of Design Layout Terms
Dreamweaver® Layout Versus Miva Merchant’s® Admin Interface Layout
Create your site in Dreamweaver®; create your store in Miva Merchant®

Step #2 Set Up and Build Your Store

Set up your business rules
Set up your attributes
Set up and import your categories
Set up and import your products
Upload your images and Dreamweaver® pages

Step #3 Preview Your Work

Work in a split screen environment

Step #4 Customize the Look and Feel of Your Site

Import Dreamweaver® elements to your store

Step #1: Get familiar with Miva Merchant®

Here’s a quick guide to walk you through some of our store terminology. Below is a close up of
Miva Merchant’s® Page Menu which shows you the options you can use to customize the look of
your store pages.

Miva Merchant’s Admin Interface

Miva Merchant’s Admin Interface

These options include:

  • Categories
  • Customer Fields
  • Fonts
  • HEAD Tag Content
  • Products
  • Header & Footer
  • Navigation Bar
  • Pages
  • Buttons
  • Global Header & Footer
  • Items
  • Misc. Colors
  • BODY Tag

Explanation of terms relating to Categories and Products:

Categories

In Miva Merchant® you group products into categories to organize your store for easier shopping. A very simple store with just a few products might use only one category. Larger stores, with a variety of products, can create many categories and subcategories.

Categories are the primary way of organizing and displaying products. Products that are not assigned to any category appear only on the Product List screen, which the shopper can access from the top navigation bar in your store.

  1. Category Code: Any unique combination of letters and/or numbers to identify your category (i.e. FG for Frogs, SP for Supplies, etc.)
  2. Category Name: A name for your category (i.e. Frogs, Supplies)
    Products
    A product can be assigned to multiple categories. For instance, a musical instrument store might categorize products both by type of instrument (guitars, keyboards, etc.), and by manufacturer.
  3. Product Code: any unique combination of numbers or letters, (typically your SKU)
  4. Product Name: the name of your product; i.e. Softchips.
  5. Product Price: retail price
  6. Product Cost: wholesale price
  7. Product Weight: what the item weighs, including packaging necessary to ship it
  8. Product Description: a description of your item

Example:

Explanation of terms relating to Categories and Products

Glossary of Design Layout Terms

Pages:

Pages are the screens shoppers will see in your store. Pages include the Product List, Basket Contents and Invoice pages. Pages are made up of collections of graphical and functional elements called Items or components. These pages will be automatically generated as you enter or import your product information. You may use them as provided, modify them, or remove any you do not need.

Items:

Items, also known as components, exist on a page, such as header, footer, category tree, nav bar, product display, etc.

Global Header and Footer:

This is where you can edit or import your own header/footer (e.g. from Dreamweaver®) into your Miva Merchant® store and have it repeat on every page.

Header & Footer:

Every page and product can have its own header and footer if you’d like. Or, you can choose to remove this option and use the global header/footer on each page of your store.

Buttons:

Miva Merchant® provides you with standard buttons for your shopping cart and checkout pages, but if you prefer, you may replace them here with your own customized buttons.

Misc. Colors:

You can change the colors of your links or text using this selection.

Fonts:

You can change the fonts of your links or text using this selection.

Category Tree:

If you don’t already have a category navigation system designed in your web layout program, then by entering your categories into the store Miva Merchant® will automatically generate Category Tree navigation.

Navigation Bar:

This is the bar across the top of your screen in Miva Merchant® that provides links to your storefront, account, search, product list, basket contents and checkout features. It can either be modified with your own custom fonts, colors and buttons or can be turned off and replaced with your own nav bar.

Store Morph Technology:

Miva Merchant’s® Store Morph Technology™ (SMT), gives you full control over the contents and layout of each store page. SMT page templates define the appearance of each page, and control the functionality. You can add/remove components on a page, or make changes to globally affect the entire store.

Working with these templates is much like creating Web pages. Familiar HTML (HyperText Markup Language) code can be used, including text, links, tables, lists, and so on. Experienced Web designers will be immediately comfortable with the structure of template code.

Dreamweaver® Layout Versus Miva Merchant’s® Admin Interface Layout

Miva Merchant’s® page layout tools are similar to the page properties toolbar in Dreamweaver ®. To change the page properties in your Miva Merchant® store, click on your store name in the category tree and Edit Store will appear. This is where you can make global changes to your site. For changes to individual pages, click on Pages in your Admin Interface, then select your page name and click Edit.

Dreamweaver Toolbox

Miva Merchant’s Admin Interface

Dreamweaver® Page Layout

Miva Merchant Page Layout

Create your site in Dreamweaver®; create your store in Miva Merchant®

Site Map: This is how a graphical site map would look from a designer’s perspective.

Purple: Informational pages created in Dreamweaver®
If you’re not working from an existing web site, design your informational pages (those which do not contain product, i.e. Index, contact us, about us, map), in Dreamweaver®.

Gold: Product pages created in Miva Merchant®
Match the look and feel of your Dreamweaver® pages by importing design elements into Miva Merchant storefront. (See Step #4)

Site Map: This is how a graphical site map would look from a designer’s perspective.

Step #2 Set up and build your store

A. Set up your Business Rules

Business Rules are pre-set parameters which control several aspects of your store’s operation. To set up these rules, open your Administration Interface, click on the + signs to the left of Stores, then Store Name. A screen will come up that looks like the diagram below. Click on Settings. This is where you will set up the following business rules:

  • Units of Measurement (Weight): pounds or kilograms
  • Basket Timeout (Minutes): how long until the basket expires
  • Price Group Overlap Resolution: When a customer belongs to more than one price group, specify whether you want the customer to be offered the higher or lower price.
  • Sales Tax Calculation: Specify how sales tax is calculated for customer purchases.
  • Currency Formatting: Select the appropriate currency formatting option from the drop-down list. The choices are European, generic, and U.S. currency formatting.
  • Options for: Require Shipping, Require Tax, Require Shipping for Free Orders
  • Allow Modules Used by Store Morph Items to be Uninstalled (Not Recommended)

Set up your Business Rules in Miva Merchant

When you’re done setting up these business rules, click update.

Miva Merchant® has created step by step wizards to help you set up Shipping, Sales Tax, Fulfillment and Payment. To get to these wizards, click on the + signs to the left of Stores, then Your Store Name, then Wizards.

Miva Merchant Wizards

B. Set up Shipping

Miva Merchant® calculates shipping costs using a Shipping Module. Some shipping modules support services offered by a third-party company, and some shipping modules calculate shipping costs based on a formula you specify.

C. Set up Sales Tax

Do you want your sales tax based on the shipping state or billing state?

D. Set up Fulfillment

Miva Merchant®, upon processing an order, has the capability of sending a receipt to a customer and an invoice to the store owner. This process is done via an email which has a configurable format. It is recommended you set up both options.

E. Set up Payment

Miva Merchant® makes it simple with Innovative Merchant Solutions®, an Internet payment service that routes orders from your Miva Merchant® storefront to the banking system for processing. Innovative Merchant Solutions® is pre-configured to connect seamlessly to Miva Merchant® with no need for complex technical documentation, coding or testing. Innovative Merchant Solutions ® provides everything you need to process credit cards over the Internet including a Virtual Terminal for manual transactions, powerful fraud screening capabilities, and comprehensive reporting through a single easy-to-use package.

F. Set up your categories

First, organize your store inventory into two separate files: one for categories, one for products and the categories they belong to. Templates for categories and products have been provided for your convenience.

Your category file will contain four columns:

  • Category Code – any combination of letters or numbers up to 50 characters long
  • Category Name – name of your category
  • Active – place a 1 if this item is currently available, or a 0 if it’s not currently available
  • Parent Category – the code of the category under which the current category is to be placed.
    For instance, our terrarium store might list their categories like this: Supplies (Parent Category),
    Tanks (Category), Acrylic Tank (Product).

Parent Categories:

In your flat file, Parent Categories are categories which have other categories under them, (i.e. in our sample store, SUPPLIES is a Parent Category which contains 2 sub categories, TANKS and PUMPS). All parent categories must be entered first before you enter the categories they contain.

Category File: This file should include a hierarchy of top level and subcategories.

Sample Product List for Categories
Parent Category Code Parent Category
(Contains other categories)
Category Name Active
SPL Supplies Tanks
Pumps
yes
yes
FRG Frogs Novice
Advanced
yes
yes
KTS Kits Starter
Upgraded
yes
yes

Category Template – Choose the format you’re most comfortable with. Excel format or Text Editor format

G. Set up your Products

Your product file will contain these twelve columns:

  • Category Code – use the code you created for your categories previously
  • Product Code – typically your SKU, up to 50 characters long
  • Name – name of your product
  • Description – description of your product (you can use html)
  • Price – retail price
  • Cost – wholesale
  • Weight – what the item would weigh, including packaging necessary to ship it
  • Taxable – enter a 1 if the item is taxable and a 0 if it is not
  • Active – place a 1 if this item is currently available, or a 0 if it’s not
  • Attribute Template Code – Allows you to identify Attribute Templates you’ve already created (See section H) to make adding common attributes to your products easy
  • Thumbnail URL – use the URL to point to the smaller image (thumbnail) within your images folder, i.e. images/frog_thm.jpg
  • Image URL – use the URL to point to the larger image within your images folder, i.e. images/frog_lg.jpg

Attributes

If you have attributes that repeat for many of your products, for instance, small, medium and
large for a clothing store, then you need to set up an Attribute Template first, following the instructions on the below.

Product File: This file should contain each product’s information including the code of the category
it belongs to.

Sample Product List for Products

Sample Product List for Products

Product Template – Choose the format you’re most comfortable with. Excel format or Text Editor format

H. Set Up Your Attributes

Set Up Your AttributesThe attribute is shown during the checkout process. For example, size, color or quantity. The code is plain text only and can contain upper and lower–case letters, numbers, dashes, and underscores.

If you have global attributes that repeat for many of your products, set up an Attribute Template before uploading your product list to your store (see Attribute Template example below). You will need the code you created for your flat file which we’ll talk about in Step I-2.

If each of your products has different attributes, you can enter those after importing your products to your store. (see Manually Entering Attributes example below.)

Attribute Template

Attribute TemplateTo set up your Attribute Templates, in your Admin Interface click on [ADD] next to Attribute Templates. Type in a Template Code for your Attribute (i.e. QTY), type in a prompt for your customer (Quantity), click Add. Now click on Attributes and Options, click Add Attribute, type a code (i.e. 5QT), type in a Prompt (5 Quart Bag), upload an image if you’d like, choose Radio Buttons, a drop down list, etc. The Price, Cost, and Weight fields only need to be filled out if the price changes if they choose this attribute. Check the “R” box (Required) if your client is required to choose one of these attributes in order to be able to purchase this product.

Attribute Template

Manually Entering Attributes

Again, this process can be done after you upload your products to your store. In your Admin Interface click on Products, select the product you want to add an attribute to, click Edit, click on Attributes, click on Add Attributes, click Update. Enter the same information explained above, but it will only be applied to the selected product.

I. Import your Catgories to your store

Now that you’ve used our templates to complete your product list, you’re ready to stock your store.

There are two ways of importing your categories and products into your store.

  • Manually (for <20 categories)
  • Uploading a flat file (for 20+ categories)

1. Manually enter your categories

If you have fewer than 20 categories, it is easier to enter them manually. In your Admin area, one at a time click on the + signs to the left of Stores, Your Store Name, then click on [Add] next to Categories.

Manually enter your categories

A screen called Add Category will appear. In the appropriate fields, type in your Category Code, Category Name, check whether it is active (currently available), and then click the Add+ button to enter another category, or the Add button if you’re done.

2. Upload a flat file

By using our templates, you can now take your Product List and turn it into a flat file which Miva Merchant uses to quickly import your products into your store. Before you upload your file though, make sure you delete the sample rows that were at the top of the template, then under FILE, select SAVE AS and choose Text (Tab delimited). This list is now your flat file.

If you’re not already there, login to your website using the following links: Administration Interface (the back end) http://www.yourdomain.com/mm5/admin.mvc
(You’ll need the username and password you specified during the installation process.)

To get to the import menu, click on the + signs to the left of Stores, Your Store Name, Utilities, Import Data, then click on Import Categories from Flat File.

Upload a flat file

A drop down menu will appear over each column of your flat file. Click to select the column headings in the following order left to right:
1. Code (Category Code)
2. Name (Category Name)
3. Active
4. Parent Category Code

An Import Categories from Flat File screen will appear. Upload your flat file with the Upload button, choose Tab Delimited. Since this is your first time uploading categories, leave the Existing Categories selection at the default of Do not replace existing categories. Click Next.

J. Import your Products to your store

There are two ways of importing your products to your store as well.

  • Manually (for <20 products)
  • By creating a flat file (for 20+ products)

1. Manually enter your products

In your category tree, click on (Add) next to Products
A screen called Add Product will appear. In the appropriate fields, type in your Product Code, Product Name, Category Code, Price, Cost, Weight, Description, Taxable, upload your thumbnail and large images, check whether the product is active and taxable, and then click the Add+ to enter another product, or the Add button if you’re done.

2. Upload a flat file

The quickest way to enter a large number of products into your store is to use a flat file and import it using Miva Merchant’s® import tools in your Admin Interface.

Again, to convert your Product List you created with our Product Template file, delete the sample rows, save the file as a Text (Tab delimited) file, and save to your store folder. Your Product Product List is now your Product Flat File.

To import your Product flat file into your Miva Merchant® storefront, click on the + signs to the left of Stores, Your Store Name, Utilities, Import Data, Import Products from Flat File.

An Import Products from a Flat File screen will appear. Upload your flat file with the Upload button, choose Tab Delimited. Click Next. Since this is your first time uploading products, leave the Existing Products selection at the default of Keep Existing Producs.

Import Products from a Flat File

Active Field:

If you have categories that are seasonal or intermittently available you can turn the active field on (1) or off (0) for those items.

K. Upload your product images and Dreamweaver® pages to your Miva Merchant® storefront

Upload your product images and Dreamweaver® pages to your Miva Merchant® storefront

Importing Images:

Place all of your images in an image folder just as you would within a Dreamweaver® site.

Step #3 Preview your work

For previewing your work, a split screen environment works best. Open one browser window for your Admin Interface, and open another for your User Interface. As you make changes in the Admin area, you can then switch to the user window, hitting refresh to see your changes as you make them.

Preview your work

Preview Tip: Keep both windows open for future changes so you can easily preview them.

Miva Merchant® provides you with a storefront page which may be used for an index page. You can use this page (in order to do this you’ll want to create a JavaScript redirect in your index. html file that points to your Storefront page, http://www.yourdomain.com/mm5/merchant.mvc)., or upload your index page from Dreamweaver®.

If you have your own header/navigation bar created in a program such as Dreamweaver®, you’ll need your navigation links to assign to your buttons. Get the links by clicking on your navigation bar on your Miva Merchant® store front page. (see diagram below).

Get the links by clicking on your navigation bar on your Miva Merchant® store front page

To find your navigation links:
Click on Your Store Name -> Click on Links in the upper right hand corner.

Step #4 Customize the Look and Feel of Your Site

For this example, we have a navigation menu designed in Flash® and incorporated into our Dreamweaver® website. We’ll import this menu/header into our Miva Merchant® storefront so it will appear at the top of all our store pages and have a look consistent with the rest of our site.

Customize the Look and Feel of Your Site

The quickest and easiest way to add your Dreamweaver® design elements to your Miva Merchant® storefront is through Miva Merchant’s Admin Interface screen. Here’s how to get there.

1. Login to your Miva Merchant® Account and then click on Your Store Name

2. Miva Merchant’s Admin Interface screen will appear. This is the menu where you make all of your global site changes, (i.e. background colors, link colors, site fonts, buttons, etc.).

Miva Merchant’s Admin Interface screen

3. To add your custom header or footer into your Miva Merchant® store pages, look for the selection, Global Header and Footer.

Global Header and Footer

4. Now switch over to Dreamweaver® and copy your header or footer code from your index page.

switch over to Dreamweaver® and copy your header or footer code from your index page

Note: Make sure you only copy the Header Code, not the code from the body of your Dreamweaver ® pages.

5. Switch back to Miva Merchant® and paste your code into Miva Merchant’s® Global Header and Footer section.

paste your code into Miva Merchant’s® Global Header and Footer

6. Click update

7. Preview your work to make sure everything is working correctly.

You can use the same method to customize other design elements in your Miva Merchant® storefront. Other items that you can customize would be fonts, colors, buttons, etc. As you make these changes, use your split screens to preview your work as you go. Because of Miva Merchant’s® many powerful customizing options, your store pages can duplicate the look and feel of your Dreamweaver® design.

Download the Miva Merchant Quick Start Guide in PDF format.

Share and Enjoy:
  • Twitter
  • Facebook
  • LinkedIn
  • Sphinn
  • Digg
  • del.icio.us
  • StumbleUpon
  • Google Bookmarks
  • Mixx

Posted in Hacks & Patches. Tagged with .

3 Responses

Stay in touch with the conversationRSS feed for comments on this post.

Your turn to talk

  1. Tweets that mention Miva Merchant 5.5 Quick Start Guide for Designers | Glendale Designs News -- Topsy.com linked to this post on 11/06/2009

    [...] This post was mentioned on Twitter by Matt at CybrHost and Chuck Lasker, MT, glendaledesigns. glendaledesigns said: Miva Merchant 5.5 Quick Start Guide – Courtesy of Miva Merchant http://tinyurl.com/yzjnwxn [...]

  2. uberVU - social comments linked to this post on 11/06/2009

    Social comments and analytics for this post…

    This post was mentioned on Twitter by glendaledesigns: Miva Merchant 5.5 Quick Start Guide – Courtesy of Miva Merchant http://tinyurl.com/yzjnwxn...

  3. miva merchant - StartTags.com linked to this post on 01/28/2010

    [...] on Monday, April 20, 2009 at 5:45 AM. Filed in Announcements and tagged HTML, Miva Merchant …Miva Merchant 5.5 Quick Start Guide for Designers | Glendale …Quick Start Guide on how to stock your Miva Merchant Store and integrate your customized look and [...]

Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.

Free Quote

  1+1 =

Copyright © Universal Commercial Services, Inc., dba Glendale Designs, Glendale, Arizona. All rights reserved.

MIVA / MIVA Merchant and related terms used on this site are registered trademarks of Miva Merchant. © 2010

Follow us on LinkeIn Search Spring Development and Interation PartnerMiva Merchant Business Partner