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!

Example of a limited selection 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:

Category Name Here

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:

Category Name Here  Category Name Here

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.

written by

UK artist & illustrator with a passion for painting cats and other cute furry animals. When not painting she enjoys photographing local wildlife and collecting vintage postcards. She also has several stores on Zazzle , Redbubble and Society6.

Advertisement

2 Comments

Author’s gravatar

Thanks for this. I’ve been using off-site storage for my thumbnails and most other store graphics, and never thought to code direct from Zazzle’s cache. I have a lot of work to do now, but it will be well worth it in the long run. :)

Reply
Author’s gravatar

The best part of working online is that I am always home with thhe kids, I save a lot of money.
One and only thing to think about here is that lots of the internet web hosting e – Commkerce solutions from yolur business hosting business
may be not what you anticipated. If you are into surveys, just select the survey which you would like to do, complete it
and yyou will receive your money.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">