Your Help Center can be customized in various ways to better reflect your brand. In this article, we’ll guide you through changing the navigation button icons. This is a slightly advanced task as it requires adjusting the HTML template of your Help Center.

Step 1: Access the Template Editor

To begin, navigate to the Template Editor where you can edit the HTML of your Help Center:

• Go to Admin > Help Center > Help Center Design > Open Template Editor.

• In the Template Editor, search for the file named ‘nav_buttons_big.html’ (found under the Portal section).

  
  

Step 2: Upload Your New Icons

Before updating the icons, you need to upload the images you want to use:

• Click on the image icon at the top of the Template Editor page.

• Upload your new image by selecting it from your computer.

Step 3: Update the Icon on a Navigation Button

To change the icon for a navigation button, you'll need to modify the <img> element in the button's HTML code. Follow these steps:

• Locate the Navigation Button Code:
  Each navigation button is within a block of code that starts with {% if and ends with {% endif %}. This is a conditional statement that determines when and where the button is displayed.

• Find the <figure> Element:
  Inside this code block, look for the <figure> element that contains an <img> tag. This <img> tag is what displays the current icon

• Replace the Source in the <img> Element:

  • Select the section starting with src and ending on />

    

  • Click on the image icon at the top of the page again.

  • Click on the link icon below the image you just uploaded. This will automatically insert the image link to your new icon. Then, remove the opening <img tag, as it is already included before the class in this section of code.

    

Step 4: Repeat for Each Button

Repeat the process above for each navigation button you want to update with a new icon.

Step 5: Save Your Changes

After you have updated all the icons:

• Click the Save Block button at the bottom of the page to save your changes. If you don't see a green "Success!" notification after saving, click on the template name in the top left corner of the editor, navigate to the home.html template, and save it there.

• Check your Help Center to ensure the new icons are displaying correctly.

Congratulations! You have successfully updated the navigation button icons on your Help Center.