One of the simplest things that ensures a site looks great is having consistent quality images. While you may not have control over ther quality of your images at least you can control the size of the images displayed on your store front.
By having consistently sized images it ensures your visitors viewing experience is a much more positive one.
There is nothing worse than going to a site and having to try to follow the page down when pushed out of shape by poorly laid out images.
So how do we do it? Easy.
First we will control the size of the images on the product display page.
Step 1. Open the shop700.css file.
You will find this in the CSS folder in the main template folder you are using for your site.
For example if using the default 3 column template look in:
/templates/default-3cols/css/shop700.css
Step 2. Search for the following class:
.product_thumbnail
The code will look like:
Lets set the default width to be 150 pixels.
The new code will be:
This will force all images to display at 150 pixels in width. The heigt of the image will automatically adjust.
Wow! That looks much better. Ok, let's fix our extended pages.
In the same file locate the follwoing class:
#productexdleft .main_image
By default the width of all of your images is set to 200 pixels. I have been playing with my layout so would like my images to be bigger. So let's change the width to 250 pixels.
Save and let's have a look at our new page layout. That looks much better!