Recent searches


No recent searches

Customizing your help center theme



image avatar

Charles Nadeau

Zendesk Documentation Team

Edited Feb 07, 2025


27

178

178 comments

Hi Everyone, i'm looking to add priority to my "my requests" page.

I think i've got the basics down, but am probably missing something simple.



I've added a table head for priority and a <td> for it as well, but I am not pulling back any results.


 <td>{{priority}}</td> 

I've also tried priority_name priority_description and priority_title.

Any thoughts?

0


image avatar

Tipene Hughes

Zendesk Developer Advocacy

Hey Shane Weber,

Are you seeing any errors at all in the help center code editor? Also, if you can you share a screenshot of the code from your end, that'd be super helpful.

0


Tipene Hughes Thanks for the response, we are not seeing any errors in the code editor, I can force an error by trying misspelling something though. 

0


image avatar

Tipene Hughes

Zendesk Developer Advocacy

Thanks for sending this through - everything looks good with your code. Can you check in admin center to see if the priority ticket field is deactivated? I just tested on my end and deactivating the field resulted in the priorities being blank in the HC requests page. 

Let me know how you go!

0


Thanks it does look to be active, but it's set for only agents to view, could that be the cause?

0


image avatar

Tipene Hughes

Zendesk Developer Advocacy

Yeah I'm 99% sure that would be the cause. Are you able to try toggling between permission settings to test it out? 

0


Hi there,

I'm needing some help adding subsections to my Help Center.

Currently, our Category pages display each individual article in a section. We'd like to create subsections and show those on the category page.

Currently, it's not displaying the sections I created as a test at all.

For the Section pages, we'd like the section title to appear below the search box with the  subsections below that.

Can anyone help me with the code to do this? I tried the code provided here, but it's displaying very oddly small. We'd like the subsections to appear larger and more spaced like the articles below them that haven't been placed in a section yet. (Place an order, Xpressdocs Standard Pricing)
Here is the current Category code with no subsection coding:

<div class="container-divider"></div>
<div class="container">
  <div class="page-container category-container">
    <div class="page-sidebar category-sidebar">
      <h4>Quick Links</h4>

      <h4>Agent Resources</h4>
      <ul class="sidebar-nav">
        <li><a href="https://compasssupport.zendesk.com/hc/en-us/community/topics">Feedback Forum</a></li>
        <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002418048-Your-Marketing">Your Marketing</a></li>
        <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002418068-Your-Business">Your Business </a></li>
        <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002418088-Your-Tools">Your Tools</a></li>
      </ul>
      

      <h4>Company Resources</h4>
      <ul class="sidebar-nav">
        <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002435127-Brand-and-Communication">Brand and Communication</a></li>
        <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/200219096-Tech-Support">Tech Support</a></li>
        <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/360005278514-Information-Security">Information Security</a></li>
        <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002418028-Office-Experience-Promotions">Office Experience + Promotions</a></li>
      </ul>

      <h4>Employee Resources</h4>
      <ul class="sidebar-nav">
       <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002435107-Office-Information">Office Information</a></li>
        <li><a href="https://compasspc.zendesk.com/hc/en-us">P&C Help Center</a></li>
     </ul>

   </div>
   <div class="page-content category-content">
    <div class="main-content">
      <nav class="page-meta-search">
        {{breadcrumbs}}
        {{search submit=false}}
      </nav>

      <header class="page-header">
        <h1>{{category.name}}</h1>
        {{#if category.description}}
        <p class="page-header-description">{{category.description}}</p>
        {{/if}}
      </header>

      <div class="section-tree">
        {{#each sections}}
        <section class="section">
          <h3 class="section-tree-title">
            <a href="{{url}}">{{name}}</a>
          </h3>
          {{#if articles}}
          <ul class="article-list">
            {{#each articles}}
            <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
              {{#if promoted}}
              <span data-title="{{t 'promoted'}}" class="icon-star"></span>
              {{/if}}
              <a href="{{url}}" class="article-list-link">{{title}}</a>
            </li>
            {{/each}}
          </ul>
          {{#if more_articles}}
          <a href="{{url}}" class="see-all-articles">
            {{t 'show_all_articles' count=article_count}}
          </a>
          {{/if}}
          {{else}}
          <i class="section-empty">
            <a href="{{url}}">{{t 'empty'}}</a>
          </i>
          {{/if}}
        </section>
        {{else}}
        <i class="category-empty">
          <a href="{{category.url}}">{{t 'empty'}}</a>
        </i>
        {{/each}}
      </div>

    </div> <!-- / main content -->

    <div class="page-content-sidebar">
      {{recent_articles}}
    </div> <!-- / main content sidebar -->

  </div>
</div>
</div>

And here is the current coding for the Section page with no subsection coding:

<div class="container-divider"></div>
<div class="container">
  <div class="page-container category-container">
    <div class="page-sidebar category-sidebar">

     <h4>Quick Links</h4>

     <h4>Agent Resources</h4>
     <ul class="sidebar-nav">
      <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002418048-Your-Marketing">Your Marketing</a></li>
      <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002418068-Your-Business">Your Business </a></li>
      <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002418088-Your-Tools">Your Tools</a></li>
    </ul>
    

    <h4>Company Resources</h4>
    <ul class="sidebar-nav">
      <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002435127-Brand-and-Communication">Brand and Communication</a></li>
      <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/200219096-Tech-Support">Tech Support</a></li>
      <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/360005278514-Information-Security">Information Security</a></li>
      <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002418028-Office-Experience-Promotions">Office Experience + Promotions</a></li>
    </ul>

         <h4>Employee Resources</h4>
      <ul class="sidebar-nav">
       <li><a href="https://compasssupport.zendesk.com/hc/en-us/categories/115002435107-Office-Information">Office Information</a></li>
        <li><a href="https://compasspc.zendesk.com/hc/en-us">P&C Help Center</a></li>
     </ul>

 </div>
 <div class="page-content category-content">
  <div class="main-content">
    <nav class="page-meta-search">
      {{breadcrumbs}}
      {{search submit=false}}
    </nav>

    <header class="page-header">
      <h1>{{section.name}}</h1>
    </header>

    <div class="section-tree">
      <section class="section">

        {{#if section.articles}}
        <ul class="article-list">
          {{#each section.articles}}
          <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
            {{#if promoted}}
            <span data-title="{{t 'promoted'}}" class="icon-star"></span>
            {{/if}}
            <a href="{{url}}" class="article-list-link">{{title}}</a>
          </li>
          {{/each}}
        </ul>

        {{/if}}
      </section>
    </div>

  </div> <!-- / main content -->

  <div class="page-content-sidebar">
    {{recent_articles}}
  </div> <!-- / main content sidebar -->

</div>
</div>
</div>

Thanks in advance for any help at all!

Brooke

Evan Pitonzo

0


image avatar

Christopher Kennedy

Zendesk Developer Advocacy

Hi Brooke,
 
Do the new subsections have accessible articles within them?  The parent section or category page won't display to end users if they contain no articles that they can access.

0


Hello , I created a custom Page then I tried to loop over the articles with this code from category_page.hbs but it gave me an error that "articles doesn't exists" 

how could I use article object (or any other object) outside category page (or any other page) 

<ul class="article-list">
                {{#each articles}}
                  <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
                    {{#if promoted}} TEST
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
                        <path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
                      </svg>
                    {{/if}}
                    <a href="{{url}}" class="article-list-link">{{title}}</a>
                    {{#if internal}}
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
                        <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
                        <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
                      </svg>
                    {{/if}}
                  </li>
                {{/each}}
              </ul>

0


image avatar

Christopher Kennedy

Zendesk Developer Advocacy

Hi Abdelhameed,
 
This error is expected behavior because the section.articles array from your snippet is not an available property on custom pages.  The custom page doesn't have the context of a current category or section (where all articles are structured within) to be able to render them.  Can you share some more background info on your use case?  Are you looking to include promoted articles on the custom page?  Because that can be done using the promoted_articles property.

0


Hello all,

 

Is there a possibility to update the wording of ‘Submit a Request’ in top right of our guide home page? We would like to change this to say ‘Submit a Ticket’.

 

Furthermore, is it possible to bold article categories on our guide home page? We would like to bold the words before FAQs.

 

 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Nicholas Sexton,

 

Go to your header.hbs file and replace the code with the given code snippet.

 

Current Code:

{{link 'new_request' class='submit-a-request'}}

Screenshot for the same: Desktop


 

Screenshot for the same: Mobile

 

 

 

 

 

Use this given code:

{{#link 'new_request' role="menuitem" class='submit-a-request'}}
   Submit a Ticket
{{/link}}}

Screenshot for the same: Desktop

 

Screenshot for the same: Mobile

 

 

 

 

And use this given CSS code to bold the title of block:

.blocks-item-link {
  font-weight: bold;
}

Screenshot for the same:

 

 

If any confusion feel free to ask :)

Thanks

0


Hello Community,

 

We only allow our customers to submit tickets on Form ABC. However, we create internal tickets on forms JKL, PQR, and XYZ. is there a way to hide tickets on forms JKL, PQR and XYZ from appearing the in end users “my requests” page?

 

requests_page.hbs

 

I am using the Copenhagen Theme version 2.19.4

0


Janais Rule You should be able to achieve that from the form in the Admin Center. There is a checkbox that makes it viewable to endusers: 

 

 

You would just open the form(s) in question and uncheck this box to have it removed from the dropdown list. 

 

To add, as long as you use the other forms as internal forms and don't assign the end user as the requestor, it wouldn't show to them at all when they log in to review their ticket history. 

0


Thanks Nicole,

However, that's our issue - we need to assign the customer as the end user so the tickets are linked back to the organization.

Customers can only submit tickets to our “customer support form” based on the checkbox you show, but since our team creates the tickets for the internal project work and lists the customer as the end user, we're running into a speed bump.

 

This was not an issue in the past because the Help Center was not live. We're rolling it out to our customers in July and need a way to continue creating our internal tickets, but hide the forms from the my requests view if it's not the “customer support” form.

 

 

 

0


Hello Ifra Saqlain ,

 

With my example of bolding the words before “FAQs”, it seems this updated the whole box instead of this specific question. Is it possible to bold the words ‘Business’, ‘Agent’, & ‘Corporate’ with the screenshot below, and keep the rest of the text non bolded?

 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Remove previous SS code and use this code:

.blocks-item-title {     font-weight: bold; }

0


Is it possible to display all the articles under a section rather than having the “see all x articles” link?

0


Hi Zendesk community,

It seems Zendesk's theming API has been upgraded from v3 to v4.

I have a question regarding the change to {{categories}} and the fact that "articles" has been removed entirely from being called from the categories object on the homepage. Our custom design relies on being able to list articles on the homepage under sections. Does this mean articles can be called via another object or has it been removed entirely?

Requirement

How can I call a list of articles that belong to a specific section on the home_page.hbs template?

Currently, on API v3 I use:

{{#each categories}}
{{#each sections}}

{{#is id 123456789}}
<div>
{{#each articles}}
   <a href="{{url}}">
<div>
   <h4 >{{excerpt title characters=40}}</h4>
   <p>{{excerpt body characters=100}}</p>
</div>
   </a>
{{/each}}
</div>
{{/is}}

Will I instead need to inject a list of articles via a script? If so, will I face an issue with API rate limiting or API limits?
 

I've got a potential solution that I need some help with: https://support.zendesk.com/hc/en-us/community/posts/7551780567578-Listing-articles-in-the-home-page-hbs-template-via-curlybars-or-an-API-script-API-v3-to-API-v4

0


Our organization uses four ‘brands’ (example, tech support, office services, HR, and Finance). I removed the ‘submit a request’ option on the MAIN landing page, as this caused confusion for staff. Unfortunately, it removed the ‘submit a request’ option on ONLY ONE = office services. I've tried editing the code to reinstall on the header.hbs, but the page only displays a ‘hamburger’ and does not do anything.

So, WHY would it effect only one of the pages? WHY would it remove it in the first place?

 

here is the code:

<a class="skip-navigation" tabindex="1" href="#main-content">{{t 'skip_navigation' }}</a>

<header class="header">
 <div class="logo">
   {{#link 'help_center'}}
     <img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}" />
     {{#if settings.show_brand_name}}
       <span aria-hidden="true">{{help_center.name}}</span>
     {{/if}}
   {{/link}}
 </div>
 
 <div class="nav-wrapper">
   <button class="menu-button" aria-controls="user-nav" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-menu">
       <path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 3.5h13m-13 4h13m-13 4h13"/>
     </svg>
   </button>
   <nav class="user-nav" id="user-nav">
     {{link 'community'}}
     {{link 'new_request' class='submit-a-request'}}
   </nav>
   {{#if signed_in}}
     <div class="user-info dropdown">
       <button class="dropdown-toggle" aria-haspopup="true">
         {{user_avatar class="user-avatar"}}
         <span class="hide-on-mobile">
           {{user_name}}
           <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
             <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
           </svg>
         </span>
       </button>
       <div class="dropdown-menu" role="menu">
         {{link "my_activities" role="menuitem"}}
         {{my_profile role="menuitem"}}
         {{change_password role="menuitem"}}
         {{link "sign_out" role="menuitem"}}
       </div>
     </div>
   {{else}}
     {{#link "sign_in" class="sign-in"}}
       {{t 'sign_in'}}
     {{/link}}
   {{/if}}
 </div>
</header>
 

0


I've resolved this myself, CLose the ticket

0


image avatar

Tony

Zendesk Customer Care

Hi Patrick,
that's great to hear! Feel free to share your solution with the community if you feel like it!
 
Best,

0


I am at a loss as to how to either add editable fields to the category or make the landing page for a category an overview article. Very much just like zendesk's own developer documentation:

https://developer.zendesk.com/documentation/ticketing/

Help is very much welcome

0


Hi, 

 

I have 2 questions here:
 

1- if I want to enable Gather for internal users only, the article advises removing the community links from the theme.

Now, could you let me know which links to be removed and how to remove them? 

 

2- If we decided to keep the community for the public (external users), how can we manage the posts (internal and external)?

 

Thanks in advance :))

 

 

 

0


Hi, I hope this is the right place for this question and apologies if I missed the answer in the many comments!

 

How do we set up this “Articles in the series” feature. Is there a recipe for that? 

 

We'd love this feature for a stronger presentation of advanced workflows or interconnected processes under one procedure. This would for us strengthen the help center as a tool for process documentation. 

 

 

 

0


Hi ,

 

We have added URL's as fields description for end user reference to visit / update templates (spreadsheets) ,and these Url's are currently visible to end users in help center portal .

 

however when they click on URL , and the URL is getting open in same tab.

 

Is there any way to open URL's in new tab.

 

I have tried this .js , and it is working in sandbox , but not working in production instance and i only see the version difference of portal

Regards,

Ashok

0


Hi community! You can count on GrowthDot If you have any difficulties with theme customizing or need a specific theme tailored to your website.  Also, we have ready to use Zendesk Themes, or we can help you with any issue with your existing one.

0


i'm trying to customize our zendesk guide theme. i've noticed there are certain elements which i cannot edit because they are being rendered with snippets. for instance, on an article page, the {{request_callout}} snippet is rendering the “Have more questions? Submit a request” prompt. how can i edit such snippets if i'm interested in changing the behavior of the <a> tag living inside that snippet? another example is the button in the user nav bar, which appears to be living in the {{user_info}} snippet which has all of the user menu stuff, including the button.

0


Please sign in to leave a comment.