Today we're going to talk about how to take a Photoshop design, slice it up and put that design into Miva Merchant. Now this is going to be a multiple part series.
Today we're going to talk about the homepage and how to manage global elements such as the global header and footer and top navigation. When building a Miva Merchant store it's important to know where different elements go. A rule of thumb is to make sure all the global elements, meaning elements that are shared across multiple pages, are stored in the global header and footer. This way there's a single location to edit them any time you need to make changes. For this video, we have a demo store that we're going to work with. Here we're looking at the homepage. So this page started out as a Photoshop file. It was designed in Photoshop. We then took that Photoshop file and sliced it up into a static html file. Now in this video we're not going to go into the details of slicing up the Photoshop file into the html, but that would be the first step of this process.
There's nothing special about this page. It's a totally static html page that uses html and css for the styling. You'll see it's broken up into a few different components. It has a global header up here, a nav bar and then a couple of homepage images; one big hero image here, followed by a smaller image here. Then a simple footer. Anytime you're working with a design and putting it into Miva it's going to be important to identify the different components of the design. What parts will be the global header, global footer and the page specific content.
So this is the htm source that makes up that page. I'm going to jump back to it and inspect the element here so we can look at the homepage graphics. So we can see that this graphic here is the header graphic and you can see over here on the right the image is called in as a background image. Then this index-placeholder is this bottom graphic and the image again is a background image.
The first step into putting this in Miva Merchant, is to split this page up into its different logical sections in the global header if possible. So if I'm going to split this up, I'm going to take everything from the nav bar all the way to the top and that's going to become my global header. These two images for the storefront page are going to be specific to the storefront page, so those will be on the page content of the storefront page. Everything below that down here will become the global footer. So this page gets split up in three distinct pieces at a very high level. Global header, global footer and some store specific content. So let's actually put those sections into Miva and let's see if we can get it to work.
So here I am back at the Miva Merchant Admin. I'm going to go find the global header. It's under User Interface settings. So here it is. This is code for a CSSUI store. If I go look at the front end here's what it looks like. So this is a blank installation of Miva Merchant. I have a few categories set up here. Other than that, there's been no customization to the store. This is the default template. Now, what our end goal is, is to make the output of the html from Miva match the output of the output of that static page that we have coded. If those two things are the same, we have the css referenced, we should have the exact same look and feel as our static page, but driven by Miva Merchant.
Let's take this global header for our content and we're going to erase all of it except the top part which is the maintenance mode warning message. It's recommended that you keep that in there. I'm going to paste in my code into the global header. Now let's do the same thing with the global footer. We'll come down here and grab everything that's in the global footer, and paste it over here. Go ahead and hit update and save. So now, if I go back and refresh this page It's not going to look like my design, because I haven't uploaded the style sheet yet. However, you will see some of the elements on the homepage now. Now let's take this one step further. Let's jump back to our global header and footer and let's look at what we pasted in. Here we have the DOCTYPE, the html opening tag and then the head tag.
So here we have the nav bar. Now, the nav bar by default is defined in every individual page template. However, the nav bar is usually a global element. It's usually global across the entire site. So a common practice in order to keep the global things global is to move the nav bar into the global header. So I'm going to take this out of here, go ahead and click update to save our changes and we'll come back to this in a second. Let's actually go to the global header again. If I expand this, right here is where a nav bar is defined. So we already have it in the global header, it's just not in the nav bar location. Let's actually change that. We want things to live in their logical locations. This is for maintenance and ease of use. I paste in the nav bar item and then I'm going to remove the actual code for the nav bar. I'll just leave the item there and I'll go ahead and hit update. Then let's go to the nav bar and lets update the code. Miva is going to have some default code in here, which you can simply just remove. So here's our nav bar which has some links to our category navigation. So we'll go ahead and update this. Now let's jump back to the storefront page again and see what else we need to do to put things into their logical place.
So we have our global header and footer, and if we come down even further the next thing is a table that contains two pieces. It has the left navigation of the category tree, and then it has the content section which is where the content lives for the homepage. Now, if you remember correctly from our design, there is no cat tree in this design. There's no left navigation over her. So that makes it simple. We can simply delete that from the storefront. The other part too is we don't need this table, so we're going to get rid of that too. We do want to leave this page specific header and footer. We're not currently using it, but we may use it in the future. So I'm going to get rid of everything up to here. Now we have a stripped own version of this page. We have all of our core elements that we need, our global header and footer which is where most of the global elements live, and then we have our closing body and closing html tags. So let's save this and then jump back to the global header and footer again and you'll notice you do that quite a bit when first building the store. The global header and footer is where a lot of elements live, so you'll be jumping back and forth from the page you're working on to the global header footer quite a bit. Now let's make sure our global header and footer has everything we need. So our global header now has the header with the header links, our shopping bag, our search and it also calls in the navigation bar.
Now let's look at the global footer. The global footer has some footer links and a link to jquery and originally we had the body and html closing tag behind the global footer, however if you notice the storefront page itself is actually a place where these live and that's a much better place for them. A page specific level. So we can get rid of them from the global footer and let the page control that part. I'm going to go ahead and update this. Now let's jump back to the front end and refresh one more time. Now you'll see we still don't have our full design, but it changed quite a bit more. The only thing we're missing right now is our images and our style sheet. Let's take a look at where to upload those.
If I come back to the HEAD Tag Content/CSS Tab, you'll see that a path to my CSS is located at css/layout.css. Now this file would normally be relative to the root. However, because Miva rewrites the root, to the mm5 folder using the basehref, this file actually lives in the mm5 folder and then css and then layout.css. So over here in my ftp program I'm logged into the server, into my web root. You'll see I have my mm5 folder. This is the folder we want to add our css and images. Now, this css folder might not already exist. If it doesn't, you'll need to create it. Now let's go inside the css folder, I have two sub folders, which is what Miva creates to store its CSS, and I'm going to add layout.css, which is the main css file for the site. Now the actual location of the css file doesn't matter so much. You just want to make it consistent. So if you want to use Miva's default folder and put it in the sub folder for the store, you can do that as well. You can put it here in the main folder. Or you can even put it outside the mm5 folder in its own css folder parallel to the mm5. All these will work. You just need to keep it consistent and make sure a path you are referencing references the right path to the file on the server. So now I have my css file here. The last thing I want to do is add my images folder.
Now the images folder is different than the graphics folder. The graphics folder contains all your product related images. The images folder contains all the images specific to the web site, so icons, buttons and things like that. Now you'll see I don't have an images folder here, so I'm just going to upload this folder here so it will automatically create one. Now, all my images are uploaded and my css is uploaded. Let's jump back to the front end and if we did everything correctly, when we hit refresh we should see a full functioning web site. Hey, look at that. We have our global header, we have our nav bar and we have our global footer. However, we're missing the content section that contains the two images. So let's go grab those.
I'll jump back to my original html for the page. If you remember these two divs have background images which control the homepage graphics. So I'm going to copy those and come back to Miva, I'm going to go to the storefront page, and these two divs can live right here. I can just paste them in and that would work just fine. It's not the best place for them. We want to keep them organized and separated out, so a content item is the best place to put this. This content item creates a tab section down here for content. Really, it's just to keep things more organized so you don't have this huge giant page template. So I can paste this in here and hit update and now I go back to the front of the web site and hit refresh one more time, you'll see I have my two images being called in. Perfect. So this is a dynamically generated page from Miva. You can see I'm on the Miva SFNT page and it looks exactly the same as my static page that we were looking at earlier.
So originally we had our Photoshop file, we then sliced it up into html and css and we took that and put it into Miva Merchant and we took the code and put it into its appropriate places.
In the next video we're going to dig into the category page and how to display a list of products that match the exact same look and feel as what we have designed in our Photoshop file.