Miva Merchant® 5.5 Quick Start Guide for Integrating Miva

Quick Start Guide for Designers using Miva Merchant 5—Published 10/21/2009

Miva Merchant® 5.5 Quick Start Guide for Integrating Miva Merchant into Your Existing Site

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 demonstra-tion, 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 TermsDreamweaver® Layout Versus Miva Merchant’s® Admin Interface LayoutCreate your site in Dreamweaver®; create your store in Miva Merchant®

Step #2 Set Up and Build Your StoreSet up your business rulesSet up your attributesSet up and import your categoriesSet up and import your productsUpload your images and Dreamweaver® pages

Step #3 Preview Your WorkWork in a split screen environment

Step #4 Customize the Look and Feel of Your SiteImport 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.

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.

Category Code: Any unique combination of letters and/or numbers to identify your category (i.e. FG for Frogs, SP for Supplies, etc.)

Category Name: A name for your category (i.e. Frogs, Supplies)

ProductsA 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.

1

2

Miva Merchant’s Admin Interface


Product Code: any unique combination of numbers or letters, (typically your SKU)

Product Name: the name of your product; i.e. Softchips.

Product Price: retail price

Product Cost: wholesale price

Product Weight: what the item weighs, including packaging necessary to ship it

Product Description: a description of your item

5

6

7

8

3

4

Example:

Softchips are 1/2” coconut husk chunks. These chunks are great as a soil additive for just about any terrestrial plant.

Add Product

Product Code 01Product Name Softchips

Category Code SPPrice 50.00Cost 19.99Weight 1

Description

Miva Merchant Administration

Add

Look Up

Add + Reset

2

8

1

34

56

7

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.

Note: Category Name does not show up on this screen


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 Dreamweav-er®. 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.

Global Header

Logo/Navigation Bar

CategoryTree

Main ContentArea

Page Footer

Page Header

Header (Library Item)

Global FooterFooter (Library Item)

Miva MerchantPage Layout

Dreamweaver®

Page Layout

Main ContentArea

Edit Store: Jungle Box Identification Owner Settings Frameworks Maintenance Mode

Order Minimums Customer Fields Dreamweaver Settings Affiliate Links BODY Tag

Buttons Category Tree Template Misc. Colors Customer Links Fonts

Messages Navigation Bar Global Header & Footer HEAD Tag Content/CSS HTML Profile

META Tag Settings State Based Sales Tax Shopping Interf. Settings

Manager:

Store Code:

Store Name:

LOOK UP

Update Delete Reset

Category

Appearance

Links

Headings

Title/Encoding

Tracing Image

Format Style LinkFont Size Target

Page Properties

Link font:Size:

Link color:Visited links:

Underline Style:

Rollover links:Active Links:

Page Properties

Always underline

Dreamweaver’s® Toolbox Miva Merchant’s Admin Interface


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.

Home Page

Products/Services

Contact Us ImagesAbout Us

Mission Statement

Partners Supplies

CheckOut

DirectionsVivariums

Invoice

StaffFrogs

Cart

Site Map

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®.

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)


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 Set-tings. This is where you will set up the following business rules:

aUnits of Measurement (Weight): pounds or kilogramsaBasket Timeout (Minutes): how long until the basket expiresa 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. aSales Tax Calculation: Specify how sales tax is calculated for customer purchases.a Currency Formatting: Select the appropriate currency formatting option from the

drop-down list. The choices are European, generic, and U.S. currency formatting.aOptions for: Require Shipping, Require Tax, Require Shipping for Free OrdersaAllow Modules Used by Store Morph Items to be Uninstalled (Not Recommended)

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, Fulfill-ment and Payment. To get to these wizards, click on the + signs to the left of Stores, then Your Store Name, then Wizards.

B. Set up ShippingMiva 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 TaxDo you want your sales tax based on the shipping state or billing state?

D. Set up FulfillmentMiva 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 PaymentMiva Merchant® makes it simple with Innovative Merchant Solutions®, an Internet payment ser-vice that routes orders from your Miva Merchant® storefront to the banking system for process-ing. Innovative Merchant Solutions® is pre-configured to connect seamlessly to Miva Merchant® with no need for complex technical documentation, coding or testing. Innovative Merchant Solu-tions® 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.

Global SettingsMiva Merchant LinksJungle Box Wizards Set Up an Affiliate Pro Add a Product Attribute Add a Category Set Up Fulfillment Add a Product Set Up Payment Set Up Shipping Set Up Sales Tax Set Up Miva Submit Design Your Look Groups [Add] Countries States Pages [Add] Categories [Add] Products [Add] Attribute Templates [Add] Upsale [Add] Inventory Affiliate Settings Shipping Settings Payment Settings Order Fulfillment Settings

Welcome to the Miva Merchant Affiliate Wizard. This wizard will assist you in configuring an Affiliate Program for your store.

This wizard is divided into three sections:

1. Affiliate Options (Required)2. Lost password email recovery (Optional)3. New affiliate email notification (Optional)To begin, press the Next button.

Restart Close


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 longCategory Name—name of your categoryActive—place a 1 if this item is currently available, or a 0 if it’s not currently availableParent 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).

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

Sample Product List for Categories

Parent Category Code Parent Category Category Name Active (Contains other categories)

SPL Supplies Tanks yes

Pumps yes

FRG Frogs Novice yes

Advanced yes

KTS Kits Starter yes

Upgraded yes

Category Template—Choose the format you’re most comfortable with.

• Excel format • Text Editor format

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

PARENT CATEGORIES


G. Set up your Products

Your product file will contain these twelve columns:Category Code—use the code you created for your categories previouslyProduct Code—typically your SKU, up to 50 characters longName—name of your productDescription—description of your product (you can use html)Price—retail priceCost—wholesaleWeight—what the item would weigh, including packaging necessary to ship itTaxable—enter a 1 if the item is taxable and a 0 if it is notActive— 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 on page 11) to make adding common attributes to your products easyThumbnail URL—use the URL to point to the smaller image (thumbnail) within your images folder, i.e. images/frog_thm.jpgImage URL—use the URL to point to the larger image within your images folder, i.e. images/frog_lg.jpg

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

Sample Product List for Products

Cat. Prod. Product Description Price Cost Weight Taxable Active Attribute Thumb. LargeCode Code Code Image Image

TKS 1 Acrylic Tank Acrylic Tank w clear 30 20 1.5 1 1 images/atank_thm.jpg images/atank.jpg

PMP 2 Pump Powerful interior 30 20 1.5 1 1 images/intpmp_thm.jpg images/intpmp.jpg

BED 3 Softchips 1/2” coconut husk 5 3 1 1 1 Qty images/sftchp_thm.jpg images/sftchp.jpg

BED 4 Softblend A slightly more coarse 5 3 1 1 1 Qty images/sftbld_thm.jpg images/sftbld.jpg

NOV 101 Dendro. P. Easy to maintain 30 20 1.5 1 1 images/denp_thm.jpg images/denp.jpg

ADV 102 Dendro. T. Requires extra care 30 20 1.5 1 1 images/dent_thm.jpg images/dent.jpg

STR 201 StarterKit Yourfirstkit 30 20 1.5 1 1 images/skit_thm.jpg images/skit.jpg

Product Template—Choose the format you’re most comfortable with.

• Excel format • Text Editor format

If you have attributes that re-peat 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 next page.

ATTRIBUTES


H. Set Up Your Attributes

The 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, num-bers, 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 on page 12.

• 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 To set up your Attribute Templates, in your Admin Interface click on [ADD] next to At-tribute 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) ifyour client is required to choose one ofthese attributes in order to be able topurchase this product.

Manually Entering AttributesAgain, 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.

Add Attribute Template Template

Attribute Template Code: QTY

Attribute Template Prompt: Quantity

Coconut husk chips Quantity in Basket: None Code: 101Price: $5.99Shipping Weight: 1.00 pounds

Quantity: 5 Quart Bag 10 Quart Bag

Quantity 1

Quantity Attribute

Attributes and Options

Code Prompt Image Type Price Cost Weight D R ADD ATTRIBUTE

5QT 5 Quart Bag UPLOAD Radio Buttons 5.99 3.99 1

Edit Attribute Template: QTY


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. aManually (for <20 categories) aUploading 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.

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 tem-plate, 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.

Category Code

Category Name

Parent Category

Active

Add Category Category Title Category Tree Header & Footer META Tag Settings

TKS

Tanks

SUPPLIES Look Up

click on:

UtilitiesImport Data

Import Categories from Flat File


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 catego-ries. Click Next.

J. Import your Products to your storeThere are two ways of importing your products to your store as well.

aManually (for <20 products) aBy creating a flat file (for 20+ products)

1. Manually enter your productsIn your category tree, click on (Add) next to ProductsA 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.

click on:

UtilitiesImport Data

Import Categories from Flat File

a<Select One>

CodeNameActiveParent Category Code

Import Categories From 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. Active4. Parent Category Code


2. Upload a flat fileThe 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 sam-ple 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.

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

Now that you have uploaded your categories and products, upload your images folder using Dreamweaver’s® ftp/publish option using the login information you received from your hosting company. You’ll place your images folder in the httpdocs folder along with your informational pages created in Dreamweaver® (i.e. Index, Contact us, About us, etc.).

Existing Products: Keep Existing Products Updating Existing Products Replace Existing Products

Custom Fields: Retain Existing Data When Imported Data Is Empty Delete Existing Data When Imported Data Is Empty Attribute Templates Use Copy Fields:

Import Products From Flat File

a<Skip>

Product CodeNameCategory Code

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

ACTIVE FIELD

Site Jungle Boxanon_ftpbincgi-binerror_docshttpdocs

imagespdfsfilenotfound.htmljavacontactus.htmlindex.htmlmissionstatement.htmlmap.htmlstaff.html

web_userssubdomainsstatisticsprivatepdhttpsdocshttpdocs

index.htmlmap.htmlmissionstatement.htmlfilenotfound.htmlstaff.html

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

IMPORTING IMAGES


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.

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

PREVIEW TIP

User Interface (the front end)http://www.yourdomain.com/mm5/merchant.mvc

Administration Interface (the back end)http://www.yourdomain.com/mm5/admin.mvc

• 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 navi-gation bar on your Miva Merchant® store front page. (see diagram below).

LOOK UP

A

Edit Store: Junglebox

Store Links For Store: Jungle Box

Store Front: http://www.junglebox.net/mm5/merchant.mvc?Screen=SFNT&Store_Code=JBSearch: http://www.junglebox.net/mm5/merchant.mvc?Screen=SRCH&Store_Code=JBProduct List: http://www.junglebox.net/mm5/merchant.mvc?Screen=PLST&Store_Code=JBBasket Contents: http://www.junglebox.net/mm5/merchant.mvc?Screen=BASK&Store_Code=JB

Store Links

To find your navigation links:

Click on Your Store Name

Click on Links in the upper right hand corner.

Links


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.

Miva Merchant Storefront after customizing

Miva Merchant Storefront before customizingHeader from Dreamweaver® Design

A. B.

C.

EXAMPLE:

Using flash headers/menus will slow down your store’s loading time. Using standard HTML would provide the quickest loading results.

FLASH FACT:


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

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.

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.).

12

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

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

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

Make sure you only copy the Header Code, not the code from the body of your Dream-weaver® pages.

Note

#BeginLibraryItem "/Library/Header.lbi" --><table border="0" cellpadding="0" cellspacing="0" style="width:100%; height:100%"> <tr>  <td height="333" style="width:766px; height:333px;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24" width="766" height="333"> <param name="movie" value="flash/header2.swf?button=0" /> <param name="quality" value="high" /> <param name="menu" value="false" /> <object data="flash/header.swf?button=0"width="766" height="333" type="application/x-shockwave-flash"> <param name="quality" value="high"> <param name="menu" value="false">

101112131415161718192021222324

7. Click update

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

Edit Store: Jungle Box Identification Owner Settings Frameworks Maintenance Mode

Order Minimums Customer Fields Dreamweaver Settings Affiliate Links BODY Tag

Buttons Category Tree Template Misc. Colors Customer Links Fonts

Messages Navigation Bar Global Header & Footer HEAD Tag Content/CSS HTML Profile

META Tag Settings State Based Sales Tax Shopping Interf. Settings

Manager:

Store Code:

Store Name:

LOOK UP

Update Delete Reset


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.

Miva Merchant® 5.5 Quick Start Guide for Integrating Miva

Documents

Transcript of Miva Merchant® 5.5 Quick Start Guide for Integrating Miva