adding image links to categories on main page

I would like to add image links to each of my categories on the initial main page that opens with zen in addition to my main navigation on the left. What file needs to be altered? Do I just add the links inside the body tag? Any help would be greatly appreciated. Thanks! My site is located at: http://www.lowcountrycandles.com/cart

The effect I would like can be viewed at: http://www.rootcandles.com/shop/categories.cfm

You'll need to add a category image for each category.
Admin>Catalog>Categories/Products

then for each respective category, you'll see a green circle with an 'e' on the right side. Click that to edit and scroll down to Category Image.

To display them on the main section upon entering your online store...
Admin>Configuration>Layout Settings

set 'Categories - Always Show on Main Page' = 1 (default is 0)
There are also many other nifty options there to tweak your site to your liking. :smile:

Be careful not to load your page(s) with too many "heavy" images. This could cause your site to load slowly and discourage visitors. Try to optimize your images to keep the file sizes as small as possible without sacrificing too much image quality.

This is working great. Thanks! Just a couple more questions...is their a way that I can move the links on the main page to different places on the page? Also, is there a way to allow the images to be just a bit larger on this main page? Thanks so much!

Image sizes are managed in Admin>Configuration>Images
(you might want to set up a test shop with demo products option to get a good understanding of ZC) :wink2:

Changing the page will require some editing of your override copy.
includes/templates/YOUR_TEMPLATE_DIR/templates/tpl_index_categories.php

Thanks again!

hi
I saw your webpage and your questions were exactly what I was searching for I was able to get pictures on my main page for each category but i still cant get the picture to be larger can you tell me exactly where in admin to go and the sizes approx also how did you change your font and size thanks soo much

Configuration > Images >
Subcategory Image Width
Subcategory Image Height

How big are your image files (in pixels)? You need files at least as large as you want them to display, preferably exactly the same size as the display.

Fonts are changed in your stylesheet.

awesome that worked ----i logically thought top subcategory was the ones to change ----thank yu mypics are 500x500
by the way doyou know how to change the font size and style
for the categories? thanks :)

You should get the Firefox Web Developer extension, as that will let you find the classes/ids that apply to page elements and try out stylesheet editing in real time.

how do i use the firefox ? and how can it adjust my text thanks

Install Firefox if you don't have it yet, then get Web Developer from https://www.chrispederick.com (its author).

In the Web Developer toolbar, the Information > Display Element Information button will show you lots of CSS-relevant information about any element you click on.

The CSS > Edit CSS button will let you try out styling with the classes/ids that the info button shows you, and see the results instantly.

To learn what kinds of changes to make, you should know something about CSS - it will be useful to you in any other web design work you ever do as well. Look at https://www.w3schools.com, and look at your stylesheet too - you can learn some things about styling from what is already there.

Thanks I have firefix and infact figured out the addon i now can view the calls/id but still im not sure where to change ir what to change
Im specifically wanting to change the category NAMES font and style as they appear in the main page center not the side boxes the only things i see in that area under the id/class is
#productDescription
.categoryListBoxContents
.clearBoth

any suggestions ? wen i search those areas i dont see anything to change heres what i see

if i search product description -
.content,/ #productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}

if i search .categoryListBoxContents

/The main content classes/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

/.content,/ #productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}

thanks

The specific element you want does not yet have its own font declaration, so you can add what you want. Make a new rule, since you don't want to change the font on that whole list of elements. If you want to change .categoryListBoxContents, try this:```
.categoryListBoxContents {
font-size: 1.2em;
font-weight: bold;
font-family: georgia, serif;
}

very nice that worked )))) how can i add or change the color thanks so much you have been a great help
Also can I use any font ? or is it best to use common fonts I noticed the websiye above has a different font thanks agin
)

You can specify any font you want, but it will only display if it is installed on the viewer's computer. Therefore, it is best to use common fonts, and you can call for a series of similar fonts to increase the chances of getting one you want to display. When you call out a font-family, start with the most preferred, and end with something generic that is guaranteed to be on every computer, like serif or sans-serif.

color: #0399ff;

will control the text color for an element, usually stated in hexadecimal notation as shown.

background-color: #aabbcc;
will give a color on the whole background of the element, and
background-color: none;
will make it transparent so you see what is behind it.

Thanks for the information above on how to show main category images on the main page. Is it possible to adjust the image size of just these images without changing images throughout the site? I'm only wanting to adjust the size of the main category images showing on my main page.

Thanks for all the help,

Jim

i can not get my catagories to list on the main page i haved tried everything i keep getting this There are no products to list in this category, anybody know what to do please my site is https://www.sounddestroyermat.com

You can add #indexHomeBody to any selector in your stylesheet to only affect its styling on the home page.

#indexHomeBody .categoryListBoxContents {
    height: 200px !important;
    width: 250px !important;
    }