T-Shirt Forums banner
Cancel

The right way to display your tees on pages...

2891 Views 9 Replies 4 Participants Last post by  Rodney, 
S
Well, as Ive said before, its still months away before I get my store online, and I've finally gotten to the step of implementing the actual product on the pages.

So far, I have them laid out 3 designs across by 4 rows down. Although my designs are still being made up, I have downloaded some random fantasy pictures [as my store is a dungeons and dragons niche store] and cut up the pictures into even square boxes, each under neath displaying the name of the shirt, the add to cart button and the price.

At first I had actual tshirt templates up, but I realised even with a picture of the entire tee, the picture would be even MORE smaller to see, so I figure just a box of the actual tee design would be easier.

And man, its amazing what the smallest things can do to a website. I find it very similar to designing a glossy catalogue you would expect to find in your mailbox from a fancy store. Even though the pics arent mine, ive just used them to give me an idea of how the layout of "said designs" would look overall.

Only beef I have is that in a previous discussion in these forums I came to the conclusion that a left sided navigation list running down the side would be easy for anyone to navigate from any page for easy access [as I will have a few design categories the customer can shop for] and heres the prob....

You cant have the pic boxes too big, it squishes the width of the design out too much, and takes the site longer to download each pic, and you cant make them too small otherwise some of that wonderful design is lost in the shrinkage.

I was thinking maybe just maybe theres a way I could code the pages so that the pics would be sorta small but not too small but when you moved your mouse pointer over them the pic in question would jump out at you and then revert back to its original size when the pointer moved away.

That way when a customer had an interest in a particular design, they could 'look closer' in a virtual kind of way to inspect the goods.

What do you all think of this? :confused:
See less See more
Reply
Save
Like
1 - 10 of 10 Posts
Rodney
The boxed "zoomed" image in rows and columns is pretty popular on t-shirt sites (bustedtees is where I think I first saw it, but I see it on a lot of sites now).

I think it's a good way of giving customers a quick look at a lot of t-shirt designs.

I think a 150 width would allow for 3 arcoss (450 pixels with room for spacing and a navigation down the left hand side). 150 pixels is a pretty good sized thumbnail as well (when you're looking at just the design like you're describing).

I'm sure there may be other, more creative ways of doing this though. I'd love to hear others ideas on how it could be managed.
Reply
Save
Like
S
Hrm... trying to incorporate this 'small image becomes big image when mouse pointer moved over top of picture' scenario , I know how to do image flips, I know how to make images a link, but Im uncertain how to make a picture go bigger without it messing with the invisible frames holding everything in place, if I somehow work out a way to do this, I have a horrible feeling the bigger picture will mess the alignment of the frames around it.

Theres gotta be some clever way around this to bring up a quick pop up over image thats larger without changing or doing anything to the existing smaller picture....

*rumages around google to find a solution*
Reply
Save
Like
Rodney
Hrm... trying to incorporate this 'small image becomes big image when mouse pointer moved over top of picture' scenario
Click to expand...
I don't know that you'd have to (or want to). The customer probably expects to click on the thumbnail picture to see a larger image view. Making the thumbnail get larger on the hover over might be unnecessary and a little confusing.

If they click the thumbnail on the main page and it takes them to a larger image of the design (preferrably on an actual garment via a mockup or photograph), I think you've got it covered. Take a look at bustedtees.com, they do it very nicely.
Reply
Save
Like
skulltshirts
Check out this site to see this exact idea in use.... http://liquidblue.com/index.cfm/fuseaction/tshirts.thumbs/cat/fantasy/subcat/skulls.html
Reply
Save
Like
Rodney
the liquidblue site doesn't seem to work very well in Firefox. When I hovered over the image, the zoomed picture was very jumpy.
Reply
Save
Like
skulltshirts
Hmm i use firefox and didnt have that problem???


edit ....after checking again just now, it does seem to jump around some...
Reply
Save
Like
R
that's a pretty fresh effect. I like not having to click and have the "bigger picture" page load.

the new style. :)
Reply
Save
Like
skulltshirts
Its some kind of script effect. I found it before but cant remember where i found it. You could do a search for mouse over effects or mouse over scripts and probally locate the script to do it on your own website!
Reply
Save
Like
Rodney
You could probably see how to do it by looking at the source of that page.

Here's another option (although it adds a click):
http://www.huddletogether.com/projects/lightbox/
Reply
Save
Like
1 - 10 of 10 Posts
This is an older thread, you may not receive a response, and could be reviving an old thread. Please consider creating a new thread.
T-Shirt Forums
A forum community dedicated to T-shirt merchants, professionals and enthusiasts. Come join the discussion about graphics, commerce, dyes, prints, collections, guides, displays, styles, scales, equipment, accessories, reviews, classifieds, and more!
Full Forum Listing
Explore Our Forums
Screen Printing General T-Shirt Selling Discussion Graphics and Design Help Member Introductions Heat Press and Heat Transfers
Top