Additional Custom Blocks – Sigma 360

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

Find custom_block with Ctrl+F and then locate "label": "Custom Block 1" after you locate it you need to see the structure first in image below all the custom block setting is inside this bracket :

{
"label": "Custom Block 1",
"variables": [ ... ]
}

where [ ... ] is al custom block setting content, if you see image below you'll know that the setting structure is the same with custom block 2,3,4.. and so on.

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.