How do I update the breadcrumbs in the Help Center to match a custom Community name?

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.

Note: Be sure to create dynamic content items and variants for each of the dynamic content placeholders used below (or feel free to create and replace with your own placeholders). If you decide not to use dynamic content, you will want to replace the {{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.