Custom blocks are useful to highlight key information on the Help Center homepage or if you need to highlight certain categories, or need to include links to other websites outside the Help Center.
The X-Ray theme comes with 6 custom blocks. These blocks can be configured in the theme settings. You can change the icon, text, description and URL of each block.
How to add custom blocks?
This document contains detailed instructions to add more custom blocks (i.e. if you need more than 6 custom blocks):
- Download the theme code
- Edit home_page.hbs
- Edit manifest.json
- Import new theme file to Zendesk
Download the theme code
- In the Guide Admin section, navigate to the theme workbench.
- Click on the theme settings icon, and choose Download. This will download the theme zip file.
- Extract the .zip file into a folder.
Edit home_page.hbs file
- Once extracted open the folder theme file with your code or text editor app such as Notepad or Notepad++. In our example, we're using Visual Studio Code
- Locate homepage.hbs in templates folder and open it
- Find custom_block with Ctrl+F
- The custom block code is inside the {{#isnt setting.custom_block_<no. customblock>_title ''}} and end with {{/is}}, so you should copy all the code inside the if brackets, follow the image below
-
{{#isntsettings.custom_block_1_title''}}
<divclass="custom-blocks-item medium-blocks">
<aclass="custom-block-link"href="{{#ifsettings.dc_toggle}}
{{dc'custom_block_1_url'}}
{{else}}
{{settings.custom_block_1_link}}
{{/if}}">
<divclass="custom-block-icon">
<imgsrc="{{settings.custom_block_1_icon}}"alt="{{settings.custom_block_1_title}}">
</div>
<h3class="custom-block-title">
{{#ifsettings.dc_toggle}}
{{dc'custom_block_1_title'}}
{{else}}
{{settings.custom_block_1_title}}
{{/if}}
</h3>
<pclass="custom-block-description">
{{#ifsettings.dc_toggle}}
{{dc'custom_block_1_description'}}
{{else}}
{{settings.custom_block_1_desc}}
{{/if}}
</p>
</a>
</div>
{{/isnt}}
- Paste the code below custom_block_6 don't forget to change the custom_block number, (ex: if you copy custom_block_1 rename to custom_block_7) , so basically it's number is in order, and make sure no duplicate number or your newest added custom block will be same with the one you copied.
Here is the list of code that you need to rename when copying follow the picture above:
- {{dc 'custom_block_<customblock no.>url'}}
- {{settings.custom_block_<customblock no.>url'}}
- {{settings.custom_block_<customblock no.>icon'}}
- {{dc 'custom_block_<customblock no.>title'}}
- {{settings.custom_block_<customblock no.>title'}}
- {{dc 'custom_block_<customblock no.>description'}}
- {{settings.custom_block_<customblock no.>description'}}
Now after adding new custom block from the homepage we need to add it's setting for the image and the title.
Edit manifest.json file
- Now that you've added the additional code for the new custom block. Let's update the manifest.json file. This way you can change the custom block settings through the theme settings (instead of editing the source code every time you need to update the additional custom block)
- Locate the manifest.json file and open it
- After copying the setting from custom block 1 follow this below image to block the code and copy, copy from this symbol "{" and end with this symbol ",". if you open with visual code you can minimize the code like this image below to make it easier to see the structure.
- Now locate the last custom block setting in our case is custom block 6, following this image below, you need to paste the copied code after the "}," symbol. make sure you follow the image below.
- Rename the custom block number to match your custom block new number in our case it's 7, you just need to keep the custom_block_icon, custom_block_title, custom_block_desc, and custom_block_url settings and delete the other setting follow the image below.
- After that exit the code editor go to settings folder to place your new custom block image.
- Place your custom block image here, make sure the name follow the image below it's "custom_block_<custom block no.>icon" and if you can make the format all the same to prevent error.
- Go back to X-Ray folder select all the items there and then add it to archive.
- Set the format to .zip
Import the new theme file to Zendesk
- Drag the X-Ray.zip or yourtheme.zip to Zendesk Guide theme workbench.
- Drag and drop it here.
- Once loaded, you can configure the settings and make it your live theme.
- Your newly added custom block should appear now and you can customize it from the customize menu in the Zendesk theme settings.
