Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 5 – Part 1 – Product Images In Shopp

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Well, good evening everybody and welcome to this 5th seminar on how to build an online store using Shopp. Tonight is going to be a very technical night because we are finally going to discover why I describe Shopp as the Thesis of eCommerce plugins because Shopp is designed to be customized. It has lots and lots of customization options that can only be accessed from the code and it’s intended that developers be able to do that.

Images on Mental Management’s Online Store

We’re going to take a little bit of time tonight to talk about product images in Shopp. Lanny has a couple of problems with images that I’d like to see us resolve. Here’s an image that you inserted when you were creating a product, right? There are a couple of things going on with this image that make it look the way it does.

The first one is that it doesn’t look to me like Shopp renders a transparent GIF very well and that’s what this is image is. All those little white spots back there are showing because you’re supposed to be able to see through into the background.

Image Background In Shopp & Recommended Image Type

What’s happening is that either Shopp or jQuery is putting this black background back behind the image rather than it being white. And we may be able to manipulate that a little bit but my first suggestion would be just to toss the transparent GIFs entirely. If you feel like you need to use transparency in an image then use a transparent PNG instead. That’s going to give you a much more stable image anyway.

Size of Images in Shopp

That being said, Shopp provides quite a bit of facility for manipulating the size of images. Along with that facility, it has some stock sizes. Those sizes are 240 by 240 for this image size. Shopp generally assumes what you’re going to do is put a larger image in than the standard size and then it’s going to adjust its view of that image.

What’s happening here is that the image you’ve inserted as your product image is smaller than that. And Shopp is providing some boundaries around the outside edge of it rather than shrinking the image down to the right size. It is leaving it full size but it’s jumping up here into the upper corner instead of being centered in the space. And then we have the jQuery funkiness of the transparent GIF.

I think you’re probably going to get a better result if you use a larger image here for your product images. Most of your product images are larger and this might have been just a mistake. For example, if we go and take a look at the first bowling combo… oh actually, this one isn’t large. You can see that little bit of black around that.

Let’s look at With Winning in Mind. It’s not really telling us how big that image is. I suppose we could go in there and take a look at it. But my guess is that this image is larger than this so we can just click on this. Actually, it’s not. It’s just at the right size.

So the other image that looks funny would look like this if it wasn’t a transparent GIF. That is it would have the white all the way around it and no black if it wasn’t a transparent GIF.

However, if you put a larger image in, when somebody clicks on this, the larger image will show up. So I spent a little time working on this demonstration site here to show you what I’m talking about.  If we click on the shoe, this is the actual size of the image that I stuck in there. And if you do that, you can see the full size of the image. So if somebody wants to really see the book cover, they can click on that and see the big book cover. So I’d encourage you to use a larger image so somebody can actually look at it.

Lanny:  The ideal size is 240 by 240?

Rick:  Well no, that’s what Shopp reduces the product image down to as its ideal size. I would say that the ideal size is probably 500 by 500.

Product Location in Images for Ideal Appearance in Shopp

Also, if all of the images are the same size and if you make them so that they’re in the same place in the image every time, which is the ideal thing, then the product images are all going to layout fairly nicely. Although since you’re only going to have one image per product, I suppose you could put the front cover in and put the table of contents in or something like that if you wanted to.

You can see what happens here if all the product images are the same size and you put the text in the same place and you center the product in the same place in all the images then when they all sit together like this in thumbnail views, they look pretty good. So that’s the one trick to think about when you’re inserting these images.

Varying Sizes of Product Images in Shopp

The other thing to consider is that if you’re going to end up with dissimilar sized images which a lot of people have, sometimes the image looks good straight up and down and sometimes it looks good horizontally. Shopp does have the ability to let you specify how the image should display.

So if the image is a great big image but you’re only showing part of it here, you can determine how it should crop, what the minimum height or the minimum width should be before it starts cropping. You can let Shopp scale it down so that the minimum height is met but the width just shakes out and gets cropped or vice versa. You have a lot of control over this with the image so that’s something to keep in mind when you’re doing adding product images.

I think you’re going to have probably the best results with this by simply making your images about 500 by 500 and essentially sticking the products right dead center in the image every time. And if you do that then this whole layout’s always going to be the same on each page and there’s a positive benefit to that.

Lanny:  Okay.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment