Display subcategories as image links instead of text links

[[email protected]]

On my site I have 30 main categories that are accessed by clicking on a separate image link for each.  The page that then loads up shows the subcategories in a main category as text links:

 

Subcategories.tiff

 

Is there a way to either add an image or completely replace these text links with image links?

 

Thank you

[NemoPS]

Can you share the site's url? Custom or default theme?

[[email protected]]

It's a custom theme with a lot of changes:

 

http://www.mugbarista.com

 

Thank you

Edited November 27, 2016 by [email protected] (see edit history)

[NemoPS]

As far as I can see you are using imges already, in the shop by category page. Do you mean something else?

[[email protected]]

As far as I can see you are using imges already, in the shop by category page. Do you mean something else?

That is correct, I am using images for my main categories such as Abstract, Animals, Artwork, etc..

 

What I am talking about are the subcategories that appear once you click on one of my category image buttons. On the page that loads after clicking a main category button there are text links. For example if you click on the Animals button, 12 different types of animals load up as text links including Bears, Birds, Cats, etc.. It's these text links I'd like to display as image links similar to the main categories that contain these text links.

 

Thank you.

[[email protected]]

Also one other questiion to anyone who visits my site, does it load at a satisfactory speed?

 

Thank you.

Edited November 28, 2016 by [email protected] (see edit history)

[NemoPS]

For that, you need to edit category.tpl, the div with id="subcategories", you have some h5s there. You can use  the standard code

 

{if $subcategory.id_image}

<img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{/if}

[[email protected]]

I greatly appreciate your reply. However, I am not clear on exactly how to do this. Can you please explain further?

 

Thank you

 

For that, you need to edit category.tpl, the div with id="subcategories", you have some h5s there. You can use  the standard code

 

{if $subcategory.id_image}

<img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{/if}

[NemoPS]

You can put there in the subcategories 'foreach' in category.tpl