Customizing Your List of Categories in Help Center to Include Images


  • James Jordan

    Excellent info, thanks for sharing.  This might be a n00b question, but how did you get the "Your Support Team" column to show up?  Did you just write the code for that yourself, or is that a plug-and-play component in the editor?

  • Sam Dresser


    Not a n00b question at all. I did use custom code to get that in there. I put the category lists into a separate <div>, which I made smaller, then created a <div> that floats right, which is where I hard coded in the support team images and names.

    Not too challenging, but does take a little work.

  • Marci Abraham

    In case anyone is wondering how to figure out the HTML to put in: view source on your "home" page...look for the category list....and copy the  <ul> with all the <li>s in it. Paste it into the HTML code editor in place of the {{category_list}} placeholder.  Customize the pasted HTML with images, etc.

    Save a copy of your code somewhere else....updating the Help Center seems to erase the changes you've made to the theme. (I've read there's a way to save your theme...but haven't found it yet....anyone know?)

  • Marci Abraham

    Found's a little scary! You have to switch themes.....and go all the way to "publish changes". Then you'll be presented with dialog saying "you are editing a custom theme that has not been're going to lose changes....want to save?" then you give it a name. 

  • Jennifer Rowe
    Zendesk Documentation Team

    Hey Marci,

    Nice to see you! Thanks for sharing. I'll ask Charles to add saving your theme to the HC docs if it's not already there somewhere.

    Thanks again!

  • Lesley Browne

    All of my images are in place, however the URLs are not clickable!

  • Mark Hinson

    Hi Sam,

    Thank you for publishing this article on how to customize the HelpCenter, I found it easy to implement and it looks great.

    My question is aimed at Zendesk or anyone that has implemented a similar customization in the HelpCenter to present Categories as images in a multi-language setup.

    We have noticed in HelpCenter each Category is defined by it's language, we can see this when you leave in the {{category_list}} component in the "HTML: Home page" code and then switch between languages the same Category box has a different URL, there is a language indicator in the URL after hc/, for example:- 

    English-  https://{account-name}


    German -  https://{account-name}

    We have also read in the following article that each level of the Knowledge hierarchy; Category/Section/Article in HC are all now language specific., previously in web portal we think Category was generic.  Therefore this means we cannot use a hard coded URL in the "HTML: Home page" for the category.

    My questions are: is there a generic URL that can be used for each Category that is the same for each language chosen?

    if not, then

    Is there a way in the to utilize Sam's approach of hard coding the URLs but be able to discover the language in the code and use the language value in a CASE or IF/THEN statement so the relevant set of language specific Category URLs can be presented.

    thanks, Mark 




  • James Alborough

    Similar question to Mark's....when you use the {{category_list}} component the system also retains the intelligence to hide and display categories based on your category settings and level of access. Is there any way to encode the urls to use custom icons AND hide categories the way the {{category_list}} component does?

  • David Crandall

    This is fine, but you can't use template components.  As stated before, using {{category_list}} doesn't assign specific ID's for each category, so there's no way to style the individual links.  Because of this, categories have to be manually added into the theme each time a new category is created.  Any way around this without a JS hack??

  • Wes Drury

    @David - See if this script will help you.

  • David Melicson

    sorry for reposting, meant to post here:

    having issues implementing this:

     $(document).ready(function() {
    var $section = $('.section-list a').each(function(){
    url = $(this).attr('href');
    val = url.substring(url.lastIndexOf('/') + 1).toLowerCase().replace(/\d+/g, '').substring(1);
    sectionImage = '<img src="//'+ val +'.png">';

    does not seem to work for our HC, am i doing something obviously wrong? I put the full url for the assets. I am trying to achieve pictures beside each section, and would like to do something similar for the categories as well. any help is much appreciated


Post is closed for comments.

Powered by Zendesk