Question
How do I update the breadcrumbs in the Help Center to match a custom Community name?
Answer
In most places of the Help Center, this is easy to switch out by simply typing new name in place of the
{{t 'community}}
in your Help Center templates, or even by using dynamic content.
There is one spot you might find where this is mostly off limits: if you have a theme using the
{{breadcrumbs}}
helper. The aim of this article is to help accomplish the replacement of the breadcrumbs by utilizing some HTML and our built in Help Center templating language .
The breadcrumbs are found at the top of many Help Center pages like this:
The first requirement to implement this solution is upgrading to the new Community . If you have not upgraded, you will not have the Community templates available in your Help Center for editing.
Once you have upgraded, you will have these five templates in your Help Center:
- Community topic list page
- Community topic page
- Community post list page
- Community post page
- New community post page
In my testing, I used the Wiry Merchant theme. You may have to adjust the code slightly if you try to implement it on other themes. These are meant to be exact replacements for the
{{breadcrumbs}}
advanced helper. You will find the applicable code for each template page below.
{{dc 'community_name'}}
and
{{dc 'new_post'}}
with your own text string such as
Discussions
or
Forums
.Community topic list page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
</ol>
Community topic page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
<li>{{topic.name}}</li>
</ol>
Community post list page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
</ol>
Community post page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
<li><a href="{{topic.url}}">{{topic.name}}</a></li>
</ol>
New community post page
<ol class="breadcrumbs">
<li>{{#link 'help_center'}}{{help_center.name}}{{/link}}</li>
<li>{{#link 'community'}}{{dc 'community_name'}}{{/link}}</li>
<li><a href="{{help_center.url}}/community/posts/new">{{t 'new_post'}}</a></li>
</ol>
I hope this quick tip helps you fine tune your Help Center, so you can give your users just the right experience.
11 Comments
Cool! How about just simply changing the name on the main Help Center page?
Hi Eric!
The main Help Center title is controlled from the Help Center settings under General > Help Center settings. At the bottom of that setting page, you can set the title of your Help Center. There are even multiple options available if your Help Center is available in more than one language.
Does that help with what you were looking to update?
I want to set the title of my community. Way too hard to do.
Hey Eric!
Jake mentions this briefly in his article, but I can provide you with some additional detail.
Provided that you're not on the Starter or Essential plan, you have access to customize the code in your Help Center. This is where you'll go to customize your Community name.
In your Help Center, go to General > Customize design, and then click Edit theme. This will take you to the theme editor.
From there, you'll select the Community topic list page from the drop down menu above the code window. The following screenshot will show you where the Community title is:
Remove the aqua-colored t and the spaces that follow it. Then change community inside the brackets and apostrophes to whatever you want your Community name to be:
Remember to leave the brackets and apostrophes, or it won't work! Click Preview and you'll see what it'll look like in real life before you save the change.
Depending on what theme you're using you may see a slight variation in the code and which line the title appears on, but the general idea will be the same.
We always recommend that you proceed with caution when making any alterations to your Help Center code. Once you start making changes, your Help Center is considered custom and our Support team might not be able to help you if something breaks. When in doubt, ask for help! We have several Help Center gurus here in the Community who can help you out.
Thanks. I did in fact get this working. What about the word Community in the header however?
Hi Eric,
Which Header? Do you have a screenshot? All of the themes are pretty different, so it would be very helpful to know the context.
I'd be happy to have a look.
Is there anyway to edit the text on the Home Page breadcrumb? I believe its on the "category_page.hbs" but can't quite figure out how to change this.
Thanks!
Hi Darren,
The easiest change here would be to rename the category to 'Home Page'. I think I found your Help Center and the category name is actually set to Home Page, but it is meant to store FAQs.
If you navigate to the category page and click 'Edit category' you will be able to change the title there, which will impact the breadcrumbs.
Does that help?
Awesome thanks Jake. That was easy :)
Hi there!
I've just commented on this article:
https://support.zendesk.com/hc/en-us/community/posts/115007678168-Help-Center-Tutorial-Add-a-home-icon-to-your-breadcrumb-navigation-
Is there a way to replace the help center name with an icon? So far I noticed the only way is to add an icon.
Thank you very much in advance!
Hi @Manuel,
Try below code by pasting it at the bottom of your style.css file:
Let me know how it goes for you.
Team Diziana
Please sign in to leave a comment.