Keep your visitors looking with Minilist

One of the common usability recommendations for any online shopping site is to ensure that shoppers can find the things that they want with the least number of clicks. Currently in a Printfection store, if a shopper is viewing one product, lets say a mens tshirt and they wish to see what other shirt styles are available, they need to click back up on the breadcrumb or menu to get back to the parent section. Until now!!

Welcome to Minilist

Introducing Minilist, a new way to have small pictures of all products from the parent section shown under the current product:

Minilist screenshot

You can see this in action at: Ukulele Shirt World.

Setting it up

As with most of my addons, Minilist uses unobtrusive javascript to pull a list of images from the parent section and display them. To install Minilist, you will need to add the following to your Base HTML:


<script src="http://www.australele.com/usw/js/tp-jq.js" type="text/javascript">
</script>
<script type="text/javascript">
var headtext = "This design also available on:";
var newsize = 60;
</script>
<script src="http://www.australele.com/usw/js/minilist.js" type="text/javascript">
</script>

The headtext variable is the text displayed above the images and can be set to anything you like. The newsize variable is the height and width of the images. The smaller the number the smaller the images.

Style It

Minilist is completely styleable using CSS as well, so you can have it fit in exactly with your store. Use the following in your Custom CSS:

#minilist {text-align: center; width: 380px}
#minilist img {border: none; margin: 0px !important}
#minilist h3 {margin-bottom: 5px; text-align: left}

One Final note

Minilist requires that your store has a breadcrumb in it. If you don't have a breadcrumb, you will need to add one to the base HTML using the ##breadcrumb## tag.

17.06.2008. 20:21

Go on 08.08.2008. 10:03

How do you get the images to stagger in rows mine is going in one long horizontal line

Go on 14.08.2008. 13:41

Is there a way where we can have multiple rows of the tee thumbnails? Opposed to one across...when i moved the pixels in from the right side i noticed that the number of tees were cut.

Suzukicrash on 09.09.2008. 13:15

thanks, trying to build my site right now and this is a good addition

Unbreakable Apparel on 12.10.2008. 21:07

Hey that's really cool, just installed it, thanks!