*Note: This document will cover the actual use of Microsoft FrontPage to integrate with your Miva Merchant store. If you are unsure of how to obtain specific links to your products, categories, or storefront links within the Miva Merchant admin, then please visit the How To Guide entitled "Integrate Miva Merchant into and Existing Website". This will walk you through navigating the Miva Merchant admin to find these links.

This document uses Miva Merchant 4.14 and Microsoft FrontPage 2002 for the examples.

Intro to Miva Merchant Links
As you may already know, you may link directly to any page within Miva Merchant. Every page Miva Merchant generates has it's own unique URL that you may hyperlink to from your own HTML page. This includes the StoreFront, Basket Contents, a Category, or a Product Display Page.

Whenever you see the link button , that means that you can click on this button to get a list of links for whatever you are looking at. You can find these link buttons on the Edit Store screen, Edit Category screen, and Edit Product screen.

Edit Product Links
If you are editing Product #1 and you want to create a link to this product on your homepage (usually index.html), you would click on the link button in the upper right hand corner of the Edit Product screen to display the list of links. See below for what this list looks like:

As you can see, there are three things you can link to for this product: Product Display, Add One To Basket, and Buy One Now. The link names are pretty self-explanatory. However, it is important to know that the Add One To Basket link will take the customer to their Basket Contents while the Buy One Now link will take the customer automatically to Checkout.

Edit Category Link
If you would like to take a customer to a specific category within your store from your homepage, you would want to use the Category Link. This will take the customer to a screen that will display a list of all products in that Category. Clicking on the Link Button on the Edit Category screen will display the following:

Edit Store Links
On the Edit Store screen in your Miva Merchant admin, you will find another Link Button. This list of links has the most options. You would use these links if you wanted to navigate your customer to a specific section or function within your screen. You would also use these if you were going to disable the automatic Miva Merchant navigation bar and replace it with one you created on your own. You would need to use some of these links in the HTML for your navigation bar.

These links are fairly self-explanatory as well. One to note is the Order Form link. This is the same as Checkout. If you are making your own navigation bar, you will use the Order Form link for your Checkout button. If you are not sure what any of these other links do, the best way to find out is by clicking on them. That way, you can see firsthand what happens on the storefront.

Intro to Customizing the Miva Merchant Storefront
As you may have noticed, when you first start building your store, your storefront is pretty dull looking. The main empty screen you see is called the Storefront Welcome Message. By default, this section is empty in your Miva Merchant admin. To view this section:

1. Click on the triangle next to Stores
2. Click on your Store Title
3. Over to the right, click on Messages
4. You will see the box for Storefront Welcome Message

You can type a message or welcome into this box, however, it will show up as just plain text on your storefront. It will not do any formatting without HTML. This is where Microsoft FrontPage comes in.

FrontPage has this great feature for those of us who aren't HTML geniuses where you can design the page just like you would a Word document and then click on the little tab called HTML and viola! You have all the HTML for the page you designed. All you have to do now is copy this HTML, paste it into the Storefront Welcome Message box, and click on Update. When you view your Miva Merchant storefront, your page will be displayed on the storefront just as you designed it.

Checkout the screenshots below:

1. My current storefront. Pretty boring, huh?



2. I designed my new storefront in FrontPage as a new HTML file.



3. I clicked on the HTML tab at the bottom to get the source code.



4. I copied the HTML and pasted it into the Storefront Welcome Message box.



5. Now, when I view my storefront, I see what I designed in FrontPage.

It looks better now, but it's still a bit drab. I bet some pictures would spruce it up a bit. This will take some more work in FrontPage. Go back to the page you designed in FrontPage. If you lost it, that's alright. You can just do what we did above...backwards.

1. Copy the HTML out of the Storefront Welcome Message in your admin.
2. Open a new file in FrontPage.
3. Go to the HTML tab and paste the code from your admin into here.
4. Go to the Normal tab and your page should be back.

Now, to add an image, the first thing you need to do is make sure the image file is already on your website. A customer in your store will not be able to see a picture that you have only on your computer. They can only see what exists on your website. You will want to FTP the image file into the Merchant2/graphics folder inside of your website's home directory. If you need assistance with FTP or finding that directory, your Host Provider should be able to help you out.

In FrontPage, place your cursor on the spot you want to have the image displayed. In the menu bar, click on Insert >>> Picture >>> From File… In the screen that pops up, browse to that image that you want to display and click on Open. You should now see that image displayed on your page.

We need to make a few changes to that image, though, before it will actually work properly. Right now, that image is being pulled from your desktop. People going to your website will not be able to see a picture from your desktop. So, what we want to do is Right-Click on the image and select Picture Properties. In the window that pops-up, go to the tab General. The first field, Picture Source, needs to be changed to reflect where it is located on your website. However, we're going to use a Relative Path to that image. This means that we won't link directly to that image file, start with http://www.YOURDOMAIN.com. Rather, we will be starting from the /graphics directory inside of Merchant2 on your website. The Miva Merchant software will fill in the rest of the path when it displays the page in a web browser. We do the relative path in the event that you change your domain name at some point or if you are using a Secure Site for a secure checkout.

So, we want to change that Picture Source to be: graphics/image.jpg

Make sure you replace image.jpg with the actual image filename. Once changed, click on OK at the bottom. When you get back to the page, you may notice the image disappear. This is ok. Once we get the HTML into Miva merchant, it will work great.

So now, click on the HTML tab down at the bottom, copy the new HTML, and paste it into the Storefront Welcome Message box in your Miva Merchant admin. When you go to your storefront, you should see your message along with your image.

Checkout these screenshots below:

1. I click on Insert >>> Picture >>> From File...



2. Selected my image and clicked Insert. Image comes up on page.



3. Right-clicked on the image and chose Picture Properties. Went to General tab.



4. Made changes to Picture Source and clicked OK. Image disappears from page.



5. Went to HTML tab and copied HTML



6. Pasted HTML into Storefront Welcome Message and clicked Update.



8. Storefront now has my image displayed. Looks much better

Now, what if you already have a homepage and you want to add a link to your Miva Merchant store to that homepage. Well, that parts pretty easy.

Making a Hyperlink in FrontPage

In Microsoft FrontPage, open up the HTML file you wish to add links to. In this example, we will be using index.html, which is usually the homepage, or the first page a person sees when they visit www.YOURDOMAIN.com.

Now, what if you already have a homepage and you want to add a link to your Miva Merchant store to that homepage. Well, that parts pretty easy.

Place your cursor on the index.html page where you would like to place a link to your Miva Merchant storefront. If you already have some text for the link, like in the example above, highlight it. Right click on the screen or highlighted text and choose Hyperlink… A window will pop-up with some options.

In the Text to Display field, enter in the name of this link. This will be displayed on the page as clickable text. If you highlighted existing text, this will already appear filled in. The next field is the Address field. This is where you will type in the URL to your storefront. What you can do is just pull up the edit Store Links and copy/paste the Storefront Link into this box.

In my example, the link is:
http://localhost/Merchant2/merchant.mvc?Screen=SFNT&Store_Code=demo

Once finished, click on OK. You will now see your text highlighted as a new Hyperlink. If you are online, you can click on this link to test it out.

You can do this hyperlinking with any of the links from any of the link lists in the Miva Merchant admin. Those lists were talked above earlier in this document.

For example, if you wanted to create a link directly to a product in your store, you would go to that product in your admin, click on Edit, click on the Link Button, and then choose the Product Display link to make your Hyperlink.

1. Right-clicked on my text and chose Hyperlink. Pasted in the URL to Product #1 from my Edit Product Links list.



2. Clicked OK and now the text is linked to my Product #1.



3. My homepage now has a link on it going directly to Product #1. Clicking on it takes my customer to the Product Display page for Product #1.

You can also use these links to create your own Navigation Bar in Miva Merchant or on your existing homepage.

For Miva Merchant, you would need to go into your admin, click on the triangle next to Stores, and then click on your Store Title. Over to the right, click on the tab Headers and Footers. In this section, you will see several empty boxes. For a navigation bar, you will want to use the Global Header box. This will place the bar at the top of every page within Miva Merchant. Use the same procedure talked about above for your Storefront Welcome Message to copy and paste the HTML for your own navigation bar you created.

Now, you need to turn our default bar off. To do this, click on the tab Page Sections in the edit Store section in your admin. Uncheck the box for Show Navigation Bar and click on Update. You want to make sure that the navigation bar you created has some of the basic links. These include Checkout and Basket Contents. The only place the customer can get to these is through the navigation bar. If you turn ours off and don't replace it with buttons of your own in your navigation bar, customers would be able to buy anything from you.

Once updated, you can go to your storefront and see your new navigation bar.

Important Notes regarding Microsoft FrontPage

Microsoft FrontPage has the ability to automatically FTP, or "publish", your HTML pages you created with it to your website. This is a great, useful tool that can save you lots of time. However, it is very important to note that this publish utility built-in to FrontPage is not a replacement for a standard FTP client, such as LeechFTP or CuteFTP. You do not ever want to upload or publish any of the Miva Merchant software files to your website through Microsoft FrontPage. These are files that end with ".mv" or ".mvc". Since our software is written in a proprietary language, FrontPage does not understand it and will try to rewrite the files. This will corrupt the software and cause your store to no longer work.

This is not the end of your store, though, so don't worry if this happens by mistake. You may contact Miva Technical Support and get instructions for replacing the software files with a new copy.

Miva Merchant How To Guides provide great assistance with learning and using the Miva Merchant software. These are always available online for free at: http://www.miva.com/docs/merchant/howto41.html

[top]