Zazzle 101: Displaying A Limited Number of Category Thumbnails

IMPORTANT: As of June 2013, Zazzle announced that HTML will no longer be allowed within the description area of our store home pages. The method used below will no longer work.

Unfortunately, what I’m about to share with you takes a little longer than turning on the ‘show categories’ option. What it does give you however, is a way to show a small selection of your categories to entice your customers instead of them being overwhelmed by a wall of category thumbnails!

Let’s take a look at an example of what I mean. The image above shows a screenshot from Noteworthy. You’ll notice that there are 8 category thumbnails displayed, if we look at the sidebar there are clearly a lot more than 8, and yet the ‘display category thumbnail’ option isn’t being used. In fact, the category thumbs aren’t even the same as what’s in the sidebar but that doesn’t matter. It’s only a visual example!

A lot of you may already be familiar with using product images or even 3rd party hosted images in your store description, but did you know that you can use images from your ‘My Images’ folder which aren’t being used on products? Neither did I until fairly recently. The good thing about this is that you don’t have to worry about your images disappearing from your home page if your image host goes down for some reason.

I’m assuming you already have the images you want to use uploaded to Zazzle so first things first, let’s build a basic image link without the url or image source:

Let’s look at what we’ve got so far. The 2 # are where we’ll be putting the URLs for the image and link. The title attribute describes where the link goes. Search engines love this so get in to the habit of giving your links titles. The alt attribute displays the given text if the image fails to load. It’s better than showing a blank space and it also describes the image to search engines. Just replace the text in the example above with your own.

Now that we have the basics let’s replace the first # with the URL where you would like the image to go when clicked. Just go to your store front, find the category link, right-click and choose ‘copy link location’ (Firefox) or ‘Copy Shortcut’ (IE users). Then just paste what you have in clipboard in place of the first #. You should now have something a little like this:

Now the tricky part! We all know how to get the URL for a product image by clicking ‘link’ on any given product page and then copying and pasting the URL that’s given to us by Zazzle. Okay, but how do we find out what the URL for an image is if we haven’t used it on a product?

Here’s how!

Go to your account and click the ‘images’ tab. Navigate your way through your image sets (if you have them), find the image you want to use and click it. A window should open which displays the image with some info about it’s size and what products it’s been used on. Of course, there won’t be any products but that doesn’t matter. Right-click the image and copy the link to clipboard, as you did with the category link, and then paste it in place of the second #. Your code should now look something like this:

Almost there! There’s still a few things we need to do before we can use it.

Don’t Strain Zazzle’s Server

The link you have points to the original image. What we want is the cached version of this image. What’s the difference? If you use the link as it is, then every time you view that particular page, Zazzle will make your browser load that image regardless of whether you already have a copy of it in your browser’s temporary folder. The cached image will be served to your browser the first time you load the page in the same way the other image does. The difference here is that as long as a copy can be found in your browser’s temporary folder it will be loaded from there instead of Zazzle. This in turn decreases server strain on Zazzle as the images are already on your computer. Anyways…

To change the URL to point to the cached image delete everything before /isapi and replace it with http://rlv.zcache.com. Your code should now look a little like this:

The above will give you this:

That’s almost it! One last thing…

Change the image size

You need to tell the cached image what size it needs to be. In the image URL, find max_dim= and change the number which comes after the = to something like 152. This will make the image 152px square. Your image might already be the size you want. For some reason, Zazzle doesn’t put the correct size in the link so it’s best to change it.

Use this method for every thumbnail you want to use in your store description. Remember that your code has to butt up and must have no unwanted spaces otherwise you’ll end up with white space you don’t want. If you want to create a small gap between your thumbnails use   between each link/image. The more you use the bigger the gap.

Your code will look something like this:

This is how it will look in your store:

That’s pretty much it. You can use the same method to insert banners and other images to your store descriptions without having to upload them to your own personal website or image host first.

category thumbnailsstore description