Datafeedr Support Forums - Display categories as thumbnails

- Tips, Tricks & Tutorials (/forumdisplay.php?f=66)

- - Display categories as thumbnails (/showthread.php?t=6055)

Display categories as thumbnails

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

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

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

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:

HTML Code:

[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

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

Quote:

Originally Posted by Traveljunkie (Post 32680)

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.

Quote:

Originally Posted by Traveljunkie (Post 32680)

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:

Code:

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

Eric