Main Page Image.

Good day,

Needless to say I'm a definite noob at all this but taking initiative to learn as much as possible about it. We've just gone online with our store. www.mafia-motorsports.com/store

I'm curious to know about adding an image(s) to the main page in order to make it "pop" a little more but I'm not sure how to do it.

I also would like to change "home" at the top and replace it with a store-front banner or something to that effect.

I'm sure these have been posted here 10 million times but as this is my first visit, I'm not sure where to look.

Thanks for your time.

-Mike

The first thing to do is search on keywords for what you want. The advanced search will let you limit the search to one subforum or other criteria.

You can add images to the body of the home page in the same place you added the "Whether you're a hardcore Gearhead..." text - define_main_page.php. Just add <img> url's. If you want to position them interestingly, you can include an id="homeImg1" tag and style #homeImg1 in your stylesheet. This is an example of how I did it for link images:

PHP Code:

---

<div id="homeShopView"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . 'index.php?main_page=page&amp;id=2"><img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/frshopview.gif" alt="Our Shop"></img></a>';?></div>

---

A non-linked image could look like this:

PHP Code:

---

<div id="homeShopView"><?php echo '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/frshopview.gif" alt="Our Shop"></img>';?></div>

---

This will display the frshopview.gif image located in /includes/templates/my_template/images/.

The "Home" you want to change is in the breadcrumbs. All output text is defined in language files, which is what allows Zen Cart to be truly multilingual.
A search in admin > Tools > Developers Toolkit for $breadcrumb yielded a line where the "Home" text was being added by its constant name HEADER_TITLE_CATALOG. A search for HEADER_TITLE_CATALOG shows where it is defined:

/includes/languages/english/header.php

Line #15 : define('HEADER_TITLE_CATALOG', 'Home');

Change the Home to Storefront or whatever you want. An image url can be inserted into the define, but will take some tweaking to be interpreted properly.

Thanks for the info. I'm playing around with it a little now.
I'm having trouble finding how to increase the font size and make it bolder.
We found where the images should be loaded and we're changing the "Home" thingy around to incorporate a banner. I was told by the person who installed the store that it couldn't be modified because of the template design. I'm going to use my main logo in the center of the store front and either product pics or pics of my spokesmodel around the main logo. We'll be playing with it until we figure it out. I'm also not liking how it looks just like my forum design. It's hard to tell that you're in a store. I viewed other Zen templates but couldn't find one I liked that would fit our theme.

Again, thanks for your help. You made it easier for someone who usually doesn't touch this stuff.

-Mike
www.mafia-motorsports.com/store

While you're adjusting, you may want to visit http://www.websiteoptimization.com/s...yze/index.html and enter mafia-motorsports.com/store in the top block.
Not the slowest I've seen but, 400k in images translates to nearly 90 seconds for 56k.

gjh42 (or anyone else) could you help me? Under Zen Cart Support > Customizing the Look of Your Shop > The Stylesheet Main Page Image your 3rd September 2007 post you provide code that I have been struggling with. I just could not get a non linked image to work on my home page. The non-linked image coding that you provided (with my modifications for the Sage template) for the define_main_page.php was:

<div id="homepage"><?php echo '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/Frog1.jpg" alt="Sawhorse Jewelry Designs :: Find your good horse"></img>';?></div>

This displays the frog1.jpg image located in /includes/templates/sage/images/

And it works!!!

I can also change image size using the code below.

<div id="homeShopView"><?php echo '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/Frog1.jpg" alt="Sawhorse Jewelry Designs :: Find your good horse" height=338" width=450"></img>';?></div>

However, the image placement default is left align – but I can also align it right:

<div id="homepage"><?php echo '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/Frog1.jpg" alt="Sawhorse Jewelry Designs :: Find your good horse" height="270" width="360" align="right" ></img>';?></div>

However, I do not know how to move the image or images exactly where I want it on the page.

You note in that same post “You can add images to the body of the home page in the same place you added the "Whether you're a hardcore Gearhead..." text - define_main_page.php. Just add <img> url's. If you want to position them interestingly, you can include an id="homeImg1" tag and style #homeImg1 in your stylesheet”

I do not understand what you are saying. (I assume that the stylesheet you are talking about is in includes/templates/sage/css/stylesheet.css) Correct?

I do not know PHP at all and XHTML very little - could you be extremely specific on how to move an image around the page and how to add additional images where one would want them?

Thanks

The most basic method of image positioning starts with including the <img> code in the HTML text in define_main_page.php in the general area you want it to appear - top, middle, bottom. Don't hard-code "right" or "left" in the PHP file; give each piece of image code its own unique id.

Then edit your stylesheet to add (for example):

Code:

---

#homepage {
    float: right; /*this makes it move all the way to the right*/
    margin-right: 30px; /*this clears 30 pixels of space on the right of the image*/
    margin-bottom: 12px; /*this clears 12 pixels from the bottom of the image*/
    }

#homepage2 {
    position: relative; /*this makes it move relative to where it would normally sit*/
    top: 8px; /*this moves the image 8 pixels down from the top*/
    left: 13px; /*this moves the image 13 px away (to the right) from the original left edge*/
    }

---

There are many other things you can do. The best plan is for you to look at www.w3schools.com which has basic tutorials on HTML, CSS and PHP. Refer back to that when you want to know how to do a specific thing. It also has interactive examples where you can instantly see the effect of trying different versions of a command.

Thank you for the information. I took a quick look at www.w3schools.com and I think it is just the ticket. You have given me a fishing pole so I can seek my own additional answers (which I am sure I will need). Your explanation is quite clear and precise. I can now proceed. Thanks again.