Display categories as thumbnails

[axel]

Eric & Stefan,

I've searched yet haven't seen this addressed yet.
I can convert site categories to thumbnails on the front page with plugins. How do I convert store categories to thumbnails?
Examples of this are:
http://www.build.com/
http://www.atgstores.com/
http://www.wayfair.com/
http://www.homedepot.com/
http://www.lowes.com/
http://www.homecenter.com/

Thank you

[Eric]

Hi

You need to add images to your categories (instruction) and then use the Category List module to display the category images anywhere you want to display them.

Eric

[Traveljunkie]

I have followed this link and set up images and descriptions but these do not display on my home page as a way to navigate to my category.

I would like the images to be shown in boxes similar to those on www.yoga-bliss.co.uk or www.yogamatters.co.uk

Please advise

I cannot see a way of doing this in the category list

[Eric]

Hi

If you add a Category List module to your store's front page Default view and then add the following HTML code to the Category List module, you should have category images appearing:

[category.list id='dfcatcol1' before='<div class="cl">' after='</div>']
	<div class="cell col2">
		<div class="bdr">
			<?php if ($category->image) { ?>
				<img src="[category.image]" alt="[category.name]" style="float:left;margin:0 10px 10px 0; width:100px;" />
			<?php } elseif ($category->thumbnail) { ?>
				<img src="[category.thumbnail]" alt="[category.name]" style="float:left;margin:0 10px 10px 0; width:100px;" />
			<?php } ?>
			<a href="[category.link]" title="[category.name]">[category.name]</a>
			<br />
			<div class="catdesc">[category.description]</div>
		</div>
	</div>
[/category.list]

Eric

[Traveljunkie]

Hi Eric

Thanks for this.

This has worked to put the categories on the front page.

I then click through on a category and because I have copied the same code o=
n to the category default I also get the sub categories come up as pictures w=
hich is what I want.

However unless I have the product module on the page when I then click on a s=
ub category no products come up.

Is there a way for me to remove the products from the sub category page and o=
nly have them showing when you click on the relate sub category?

I presume I need to set up a custom view but do I do this as a category or a=
product detail?

Also I would like to be able to put boxes round the categories .

Redhotyogastyle.com/store/category/accessories is a good page to view as it s=
hould be clear what I am trying to do. I would like the boxes to be around e=
ach sub category similar to how the related products are displayed but perha=
ps with the title in a box with coloured background.=20

I realise I need some custom code but I have tried a number of options witho=
ut success.

Thanks for your help

Regards

Traveljunkie

[Eric]

Hi

Originally Posted by Traveljunkie

Is there a way for me to remove the products from the sub category page and only have them showing when you click on the relate sub category?

It depends on if the category you are in has products in it or it only has products in its sub-categories. You can see those options in your Category Page View Properties:



In the view properties, you can choose to not display products from sub-categories if the current category has 0 products in it. If the current category does have products in it, it will always display those products.

Originally Posted by Traveljunkie

Also I would like to be able to put boxes round the categories.

Adding the following code to your Custom CSS will put borders around the categories:

#view .cl .cell .bdr { border-size: 1px; }

Eric