Customizing the Settings panel of the theme

<div class="article-banners">
<div id="docs-wmp-link"><a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" target="_blank" rel="noopener noreferrer">What's my plan?</a></div>
<div class="article-banner" id="suite_gpee"><figure class="wysiwyg-table wysiwyg-table-align-left"><table><tbody><tr>
<td><strong>All Suites</strong></td>
<td>Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr></tbody></table></figure></div>
<div class="article-banner" id="support_with_guide_all"><figure class="wysiwyg-table wysiwyg-table-align-left"><table><tbody><tr>
<td><strong>Support with</strong></td>
<td>Knowledge Professional or Enterprise</td>
</tr></tbody></table></figure></div>
</div><p>When you <a href="https://support.zendesk.com/hc/en-us/articles/4408828976538#topic_udw_zdc_hbb" target="_blank" rel="noopener noreferrer">download a theme</a>, the exported files include a file named <strong>manifest.json</strong>. The file defines the Settings panel of the theme in Knowledge.</p><p><img class="img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_manifest.png" alt="" width="300px"></p><p>This guide describes the manifest file and what you can do with it. It also provides a reference of its specification. For an example, export your theme and open the <strong>manifest.json</strong> file in a text editor.</p><p><img class="img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_manifest_file.png" alt="" width="480px"></p><p>Topics covered:</p><ul>
<li data-list-item-id="ebdc39b639167e3ea3be1f9ef64766c35"><a href="#understanding-the-manifest-json-file">Understanding the manifest.json file</a></li>
<li data-list-item-id="e19a35865e452afe75e6954cbf7efe44d"><a href="#using-settings-in-manifest-json-as-variables">Using settings in manifest.json as variables</a></li>
<li data-list-item-id="efa3a63387948741659e8028f271c826a"><a href="#modifying-the-manifest-json-file">Modifying the manifest.json file</a></li>
<li data-list-item-id="e6c4bbce6c653d20eff7040e74c6bf066"><a href="#h_01KT4RSH8FV7PSDF4Z6VTSPRJK">Theme permissions</a></li>
<li data-list-item-id="e13ff7612a2a993f37b8db44518b5ae71"><a href="#manifest-object">Manifest object</a></li>
<li data-list-item-id="efc644f133ef6e9a20f78de8f73fb519f"><a href="#setting-object">Setting object</a></li>
<li data-list-item-id="e096a356d27c822dca7a14d23a9cd2424"><a href="#variable-object">Variable object</a></li>
<li data-list-item-id="e9bc342d5a38a1adbf1dcf269e4bd9f34"><a href="#type-property">Type property</a></li>
<li data-list-item-id="eb0d6fdfaecee03c0031198348d350be5"><a href="#file-type">File type</a></li>
<li data-list-item-id="efb5bebd96f36e1b66b3f3ccc6815192d"><a href="#list-type">List type</a></li>
<li data-list-item-id="e14743f0bd49fa93ab16a6ed46d6da96d"><a href="#range-type">Range type</a></li>
<li data-list-item-id="e2b27aaad62cd661c8a6c67230a945da4"><a href="#translations">Translations</a></li>
</ul><h3 id="understanding-the-manifest-json-file">Understanding the manifest.json file</h3><p>When you export a theme, the exported files include a file named <strong>manifest.json</strong>. You can use the manifest file to define the theme's <a href="https://support.zendesk.com/hc/en-us/articles/4408824139546" target="_self">Settings panel</a> in Guide.</p><p>You can modify existing settings in the panel or create new ones. In the following example, the manifest file assigns a default value of "#30aabc" to the <strong>color_brand_text</strong> setting:</p><pre class="wysiwyg-code-block"><code class="language-auto javascript">"settings": [
{
"label": "Colors",
"variables": [
{
"identifier": "color_brand_text",
"type": "color",
"description": "color_brand_text_description",
"label": "color_brand_text_label",
"value": "#30aabc"
},
...
]
},
...
]
</code></pre><p>After <a href="https://support.zendesk.com/hc/en-us/articles/4408828976538#topic_jpd_zdc_hbb">importing the theme</a> into Guide, the <strong>color_brand_text</strong> setting appears in the Settings panel with the label <strong>Brand text color</strong>, as specified by the "label" property in the manifest file, and the default hex value of the color picker is #30aabc, as specified by the "value" property:</p><p><img class="img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_theme_setting_example.png" alt="" width="300px"></p><h3 id="using-settings-in-manifest-json-as-variables">Using settings in manifest.json as variables</h3><p>Settings are also called <em>variables</em> because you can use a setting's identifier as a variable in the theme's files. Changing a value in the Settings panel updates the value in all the files that use the variable.</p><p>You can insert a variable in the theme's <strong>style.css</strong> file using the <code>$identifier</code> syntax, or in a page template using the <code>settings.identifier</code> helper in Curlybars. Examples:</p><p><strong>style.css</strong></p><pre class="wysiwyg-code-block"><code class="language-auto css">input:focus {
border: 1px solid $color_brand_text;
}
</code></pre><p>You can also use single curly brackets to embed the helper in a CSS expression, as follows:</p><pre class="wysiwyg-code-block"><code class="language-auto css">max-width: #{$search_width}px;
</code></pre><p><strong>Page template</strong></p><pre class="wysiwyg-code-block"><code class="language-auto html">&lt;div style="background-color:{{settings.color_brand_text}}"&gt;
</code></pre><h3 id="modifying-the-manifest-json-file">Modifying the manifest.json file</h3><p>The <strong>manifest.json</strong> file is not included in the list of files in the Edit Code page in Help Center. To edit the <strong>manifest.json</strong> file, you must export the theme to files, make changes to the manifest file on your system, then import the theme in Guide.</p><p><strong>To export the theme</strong></p><ul><li data-list-item-id="e7f0085eb171a364029066c0b4907db0f">See <a href="https://support.zendesk.com/hc/en-us/articles/4408828976538#topic_udw_zdc_hbb" target="_blank" rel="noopener noreferrer">Downloading a help center theme</a>.</li></ul><p><strong>To import the modified theme</strong></p><ul><li data-list-item-id="e092d960fecab1101fcb3816ebcde9a38">See <a href="https://support.zendesk.com/hc/en-us/articles/4408828976538#topic_jpd_zdc_hbb" target="_blank" rel="noopener noreferrer">Importing a help center theme</a>.</li></ul><h3 id="h_01KT4RSH8FV7PSDF4Z6VTSPRJK">Theme permissions</h3><p>You can prevent a theme from being editable or downloadable by adding a permissions object to the root of the <strong>manifest.json</strong> file.</p><h4 id="toc_1">Example</h4><pre class="wysiwyg-code-block"><code class="language-auto javascript">"permissions": {
"downloadable": false,
"editable": false
}</code></pre><p>The permissions object includes the following properties:</p><figure class="wysiwyg-table wysiwyg-table-align-left"><table style="margin-left: 0px; margin-right: auto;">
<thead><tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Comment</th>
</tr></thead>
<tbody>
<tr>
<td>downloadable</td>
<td>boolean</td>
<td>Controls whether the theme can be downloaded. Defaults to <code>true</code> if omitted</td>
</tr>
<tr>
<td>editable</td>
<td>boolean</td>
<td>Controls whether the theme can be edited. Defaults to <code>true</code> if omitted</td>
</tr>
</tbody>
</table></figure><h3 id="manifest-object">Manifest object</h3><p>The manifest's document root object has the following properties:</p><figure class="wysiwyg-table wysiwyg-table-align-left"><table>
<thead><tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Comment</th>
</tr></thead>
<tbody>
<tr>
<td>name</td>
<td>string</td>
<td>Theme name</td>
</tr>
<tr>
<td>author</td>
<td>string</td>
<td>The person, team, or organization who created the theme</td>
</tr>
<tr>
<td>version</td>
<td>string</td>
<td>Theme version that follows the <a href="https://semver.org/">Semantic versioning 2.0.0</a> standard</td>
</tr>
<tr>
<td>api_version</td>
<td>string</td>
<td>Templating API version</td>
</tr>
<tr>
<td>settings</td>
<td>array</td>
<td>List of setting objects. See <a href="#setting_object">Setting object</a>
</td>
</tr>
</tbody>
</table></figure><h4 id="h_01KT4RYEKKMB2NRRRVMGQNQVTE">Example</h4><pre class="wysiwyg-code-block"><code class="language-auto javascript">{
"name": "My second theme",
"author": "Jane Doe",
"version": "1.0.1",
"api_version": 3,
"settings": [
...
]
}
</code></pre><h3 id="setting-object">Setting object</h3><p>The settings in both the <a href="#manifest-object">manifest file </a> and the Settings panel in Guide are organized into groups such as Colors or Fonts. Each setting group is defined in the manifest file by a <em>setting object</em>. Each object consists of a label and one or more settings, such as Brand Color and Text Color.</p><p>You can modify setting objects or create your own. The objects are reflected in the theme's Settings panel when you import the theme in Guide.</p><p>Each setting object has the following properties:</p><figure class="wysiwyg-table wysiwyg-table-align-left"><table>
<thead><tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Comment</th>
</tr></thead>
<tbody>
<tr>
<td>label</td>
<td>string</td>
<td>A translation property name. See <a href="#translations">Translations</a>. Displays a title for a group of settings. </td>
</tr>
<tr>
<td>variables</td>
<td>array</td>
<td>
<p>List of settings in the group. Also called variables. See <a href="#variable-object">Variable object</a>. The manifest file can have a maximum quantity of 200 variable objects.</p>
<p>See <a href="https://www.google.com/url?q=https://support.zendesk.com/hc/en-us/articles/4408831783962-Guide-product-limits-for-your-help-center%23topic_cnb_vnd_dcb&amp;sa=D&amp;source=docs&amp;ust=1686667397108455&amp;usg=AOvVaw2sZuLqHt-h3BnM2FgIGRWb" target="_self">Guide product limits for your help center</a> (Total number of settings in manifest.json).</p>
</td>
</tr>
</tbody>
</table></figure><h4 id="toc_2">Example</h4><pre class="wysiwyg-code-block"><code class="language-auto javascript">"settings": [
{
"label": "colors_group_label",
"variables": [{...}, ...]
},
{
"label": "fonts_group_label",
"variables": [{...}, ...]
},
{
"label": "brand_group_label",
"variables": [{...}, ...]
},
{
"label": "banners_group_label",
"variables": [{...}, ...]
}
]
</code></pre><div class="p"><div class="note">
<span class="notetitle">Note:</span> The value of the <code>"label"</code> properties are translation property names. See <a href="#translations">Translations</a>.</div></div><p>The example creates the following categories in the Settings panel:</p><p><img class="img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_panel_modified.png" alt="" width="300px"></p><h3 id="variable-object">Variable object</h3><p>Each <a href="#setting-object">setting object</a> has a <code>variables</code> array that lists the actual settings. They're called variables because you can insert them as variables in Help Center templates or in CSS. See <a href="https://www.google.com/url?q=https://support.zendesk.com/hc/en-us/articles/4408831783962-Guide-product-limits-for-your-help-center%23topic_cnb_vnd_dcb&amp;sa=D&amp;source=docs&amp;ust=1686667397108455&amp;usg=AOvVaw2sZuLqHt-h3BnM2FgIGRWb" target="_self">Guide product limits for your help center</a> (Total number of settings in manifest.json).</p><p>You can define any variable you want. However, the manifest file must contain two file variables with the following identifiers: "logo" and "favicon". See <a href="#required-variables">Required variables</a>.</p><p>Each variable has the following properties:</p><figure class="wysiwyg-table wysiwyg-table-align-left"><table>
<thead><tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Comment</th>
</tr></thead>
<tbody>
<tr>
<td>identifier</td>
<td>string</td>
<td>Variable name that you can use in CSS or Curlybars expressions. Must be 30 characters or less and contain only alphanumeric characters and _ (underscore)</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>UI control in the Settings panel in Guide to get the value from the user. One of <code>text</code>, <code>list</code>, <code>checkbox</code>, <code>color</code>, <code>file</code>, or <code>range</code>. See <a href="#type-property">Type property</a>
</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>
<p><span style="background-color: #ffffff; color: #464646;">The name of the setting that gets displayed next to the UI control in the Settings panel. Must be 40 characters or less.</span></p>
<p><span style="background-color: #ffffff; color: #464646;">To translate this value, use a translation property name. See </span><a href="https://support.zendesk.com/hc/en-us/articles/5865881240858#translations"><span style="background-color: #ffffff; color: #1f73b7;">Translations</span></a><span style="background-color: #ffffff; color: #464646;">. Translations do not have a limit of characters.</span></p>
</td>
</tr>
<tr>
<td>description</td>
<td>string</td>
<td>
<p><span style="background-color: #ffffff; color: #464646;">A brief description of the setting that gets displayed next to the UI control in the Settings panel. Must be 80 characters or less.</span></p>
<p><span style="background-color: #ffffff; color: #464646;">To translate this value, use a translation property name. See </span><a href="https://support.zendesk.com/hc/en-us/articles/5865881240858#translations"><span style="background-color: #ffffff; color: #1f73b7;">Translations</span></a><span style="background-color: #ffffff; color: #464646;">. Translations do not have a limit of characters.</span></p>
</td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The setting's default value</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>For the <code>list</code> type only. An array of list items. See <a href="#option-object">Option object</a>
</td>
</tr>
<tr>
<td>min</td>
<td>integer</td>
<td>For the <code>range</code> type only. The minimum value of the range</td>
</tr>
<tr>
<td>max</td>
<td>integer</td>
<td>For the <code>range</code> type only. The maximum value of the range</td>
</tr>
</tbody>
</table></figure><h4 id="toc_3">Example</h4><pre class="wysiwyg-code-block"><code class="language-auto javascript">"variables": [
{
"identifier": "color_brand",
"type": "color",
"label": "color_brand_label",
"description": "color_brand_description",
"value": "#0072EF"
},
...
]
</code></pre><p>The example creates the following label and control in the Settings panel:</p><p><img class="img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_panel_variable.png" alt="" width="400px"></p><h4 id="toc_4">Required variables</h4><p>You must specify the following two variables in the manifest file or the file will be rejected on import:</p><ul>
<li data-list-item-id="eca39eab18a13094da8fe31afeb947546">logo - the <code>identifier</code> must be "logo" and the <code>type</code> must be "file"</li>
<li data-list-item-id="ec42ab14273bc0d66d3180f859e6d68ef">favicon - the <code>identifier</code> must be "favicon" and the <code>type</code> must be "file"</li>
</ul><p><strong>Example</strong></p><pre class="wysiwyg-code-block"><code class="language-auto javascript">"variables": [
{
"identifier": "logo",
"type": "file",
"description": "logo_description",
"label": "logo_label"
},
{
"identifier": "favicon",
"type": "file",
"description": "favicon_description",
"label": "favicon_label"
}
]
</code></pre><h3 id="type-property">Type property</h3><p>Each <a href="#variable-object">variable object</a> has a <code>type</code> property that specifies a UI control to set the setting value in the Settings panel in Guide. The property can have one of the following values:</p><ul>
<li data-list-item-id="e3635892189665bfbfd2f6a4d65c81b8d">
<code>text</code> - Text input field. Each text field has a limit of 1000 characters.</li>
<li data-list-item-id="ebc6c550595791dfb0b5cd1b4d7f0d6df">
<code>list</code> - Dropdown list. Includes a list of option objects for the list items. See <a href="#list-type">List type</a>
</li>
<li data-list-item-id="ee8607597497781e11f409a10d7d7ce32">
<code>checkbox</code> - Checkbox. See <a href="#checkbox-type">Checkbox type</a>
</li>
<li data-list-item-id="e47449318ebc8a28ae37eb465040ca735">
<code>color</code> - Color picker</li>
<li data-list-item-id="e1dd86db31d9306daa1be774d37a9ff3a">
<code>file</code> - File uploader. See <a href="#file-type">File type</a>
</li>
<li data-list-item-id="ebde762943caf92b27ccd3e774511670c">
<code>range</code> - Range input field. See <a href="#range-type">Range type</a>
</li>
</ul><h4 id="toc_5">Example</h4><pre class="wysiwyg-code-block"><code class="language-auto javascript">{
"identifier": "color_headings",
"type": "color",
...
}
</code></pre><h3 id="list-type">List type</h3><p>If the <a href="#types">type</a> of a variable object is "list", then the object includes an <code>options</code> array to populate the dropdown list. Each option in the list has the following properties:</p><figure class="wysiwyg-table wysiwyg-table-align-left" style="width: 657px;"><table>
<thead><tr>
<th style="width: 60.875px;" scope="col">Name</th>
<th style="width: 63.8594px;" scope="col">Type</th>
<th style="width: 522.266px;" scope="col">Comment</th>
</tr></thead>
<tbody>
<tr>
<td style="width: 52.875px;">label</td>
<td style="width: 55.8594px;">string</td>
<td style="width: 514.266px;">
<p>Friendly text displayed for the list item. Must be 40 characters or less.</p>
<p><span style="background-color: #ffffff; color: #464646;">To translate this value, use a translation property name. See </span><a href="https://support.zendesk.com/hc/en-us/articles/5865881240858#translations"><span style="background-color: #ffffff; color: #1f73b7;">Translations</span></a><span style="background-color: #ffffff; color: #464646;">. Translations do not have a limit of characters.</span></p>
</td>
</tr>
<tr>
<td style="width: 52.875px;">value</td>
<td style="width: 55.8594px;">string</td>
<td style="width: 514.266px;">Underlying value of the list item</td>
</tr>
</tbody>
</table></figure><p><span style="background-color: #ffffff; color: #464646;">You must specify more than one option in the array or importing the theme will fail. The number of options should not exceed 20. See</span><a href="https://support.zendesk.com/hc/en-us/articles/4408831783962-Guide-product-limits-for-your-help-center#topic_cnb_vnd_dcb"><span style="background-color: #ffffff; color: #464646;"> </span><span class="wysiwyg-underline">Guide product limits for your help center</span></a><span style="background-color: #ffffff; color: #464646;"> (Total number of options in a list type setting).</span></p><h4 id="toc_6">Example</h4><pre class="wysiwyg-code-block"><code class="language-auto javascript">{
"identifier": "font_headings",
"type": "list",
"label": "Heading",
"description": "Font for headings",
"value": "Arial, 'Helvetica Neue', Helvetica, sans-serif",
"options": [
{
"label": "Arial",
"value": "Arial, 'Helvetica Neue', Helvetica, sans-serif"
},
{
"label": "Copperplate Light",
"value": "'Copperplate Light', 'Copperplate Gothic Light', serif"
},
{
"label": "Baskerville",
"value": "Baskerville, 'Times New Roman', Times, serif"
}
]
}
</code></pre><h3 id="checkbox-type">Checkbox type</h3><p>If the <a href="#types">type</a> of a variable object is "checkbox", use the object's <strong>value</strong> property to specify the value that's set when the user selects the checkbox. The value must be a boolean.</p><figure class="wysiwyg-table wysiwyg-table-align-left"><table>
<thead><tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Comment</th>
</tr></thead>
<tbody><tr>
<td>value</td>
<td>boolean</td>
<td>
<code>true</code> or <code>false</code>
</td>
</tr></tbody>
</table></figure><h4 id="toc_7">Example</h4><pre class="wysiwyg-code-block"><code class="language-auto javascript">{
"identifier": "scoped_hc_search",
"type": "checkbox",
"description": "scoped_help_center_search_description",
"label": "scoped_help_center_search_label",
"value": true
}
</code></pre><h3 id="file-type">File type</h3><p>A variable object with a <a href="#types">type</a> of "file" adds a file uploader control in the Settings panel. This type of variable doesn't have a <strong>value</strong> property. Example:</p><pre class="wysiwyg-code-block"><code class="language-auto javascript">{
"identifier": "community_image",
"type": "file",
"description": "community_image_description",
"label": "community_image_label"
}
</code></pre><p>The value is a file URL determined by the system.</p><p>You must provide a default file for the theme to use until a user uploads a different file. The name of the default file must match the variable's identifier. Place the file in the <strong>settings</strong> folder in your theme files. Example:</p><p><img class="img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_default_file.png" alt="" width="280px"></p><p>Use file variables where URLs are expected in the theme files. Examples:</p><p><strong>style.css</strong></p><pre class="wysiwyg-code-block"><code class="language-auto css">.community_banner {
background-image: url($community_image);
}
</code></pre><p><strong>Page template</strong></p><pre class="wysiwyg-code-block"><code class="language-auto html">&lt;img src="{{settings.community_image}}"&gt;
</code></pre><h3 id="range-type">Range type</h3><p>A variable object with a type of "range" adds a slider control in the Settings panel. Example:</p><p><img class="img-screenshot" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_range_type.png" alt="" width="200px"></p><p>A range variable includes a <strong>min</strong> and a <strong>max</strong> property to specify the range of values that the user can set when they move the slider. The values must be integers.</p><h4 id="toc_8">Example</h4><pre class="wysiwyg-code-block"><code class="language-auto javascript">{
"identifier": "font_size",
"type": "range",
"description": "font_size_description",
"label": "font_size_label",
"min": 70,
"max": 150,
"value": 100
}
</code></pre><h3 id="translations">Translations</h3><p>The visible strings in the Settings panel are all defined in <em>translations</em>. A translation consists of a property name and value. Example:</p><p><code>"text_color_label": "Text color"</code></p><p>The property names are arbitrary. You can specify any name you like.</p><p>The translations are stored in language-specific JSON files in the <strong>translations</strong> folder in the theme's root folder:</p><pre class="wysiwyg-code-block"><code class="language-auto">/ translations
- en-us.json
- es.json
- fr.json
- ...
</code></pre><p>Each file consists of a JSON object with a list of translations:</p><p><strong>en-us.json</strong></p><pre class="wysiwyg-code-block"><code class="language-auto json">{
"brand_color_description": "Brand color for major navigational elements",
"brand_color_label": "Brand color",
...
}
</code></pre><p>The translations are used to specify the labels and descriptions in the Settings panel.</p><p><strong>To specify strings for labels and descriptions</strong></p><ol>
<li data-list-item-id="ee4726d44becead347b5f5e5526e8b1ad">In the <strong>translations</strong> folder, locate the JSON file for the default language of your Help Center. Example: <strong>en-us.json</strong>.</li>
<li data-list-item-id="e35fb3bc0ddae07647b3b471c8794ac5d">
<p>Update the values of existing properties or add new properties. Example:</p>
<pre class="wysiwyg-code-block"><code class="language-auto json">{
"text_color_label": "Text color",
"text_color_description": "Text color for body and heading elements",
...
}
</code></pre>
</li>
<li data-list-item-id="e9fa8689e10d501da0e99549a73bb835d">
<p>In variables, use the translation property name as the value of <code>"label"</code> or <code>"description"</code> attributes.</p>
<pre class="wysiwyg-code-block"><code class="language-auto json">"variables": [
{
"identifier": "color_text",
"type": "color",
"label": "text_color_label",
"description": "text_color_description",
"value": "#0072EF"
},
...
]
</code></pre>
<p>See <a href="#variable-object">Variable object</a>. If you create a property or change a property name, make sure to update your variables.</p>
</li>
</ol><p>You can localize the labels and descriptions in the Settings panel. You need to provide the localized strings yourself.</p><p><strong>To localize labels and descriptions</strong></p><ol>
<li data-list-item-id="e4bcb2210a03c3f0a318b178bd4ca46b1">In the <strong>translations</strong> folder, locate the JSON file for each extra language you want to support.</li>
<li data-list-item-id="eb89b134b7959dc830bb33a63e73748cb">
<p>Copy the property names defined in your default translation file. Example:</p>
<pre class="wysiwyg-code-block"><code class="language-auto json">{
"text_color_description": "",
"text_color_label": "",
...
}
</code></pre>
</li>
<li data-list-item-id="e248180fc81ec795cf1ae290d8707c43e">
<p>Specify a localized string for each property. Examples:</p>
<p><strong>fr.json</strong></p>
<pre class="wysiwyg-code-block"><code class="language-auto javascript">{
"text_color_description": "Couleur du texte pour les éléments du titre et du corps",
"text_color_label": "Couleur du texte",
...
}
</code></pre>
</li>
</ol><script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408846524954",
"url": "https://support.zendesk.com/hc/en-us/articles/4408846524954-Customizing-the-Settings-panel-of-the-theme",
"headline": "Customizing the Settings panel of the theme",
"description": "You can customize the Settings panel of a theme by modifying the manifest.json file to define, organize, and use settings as variables in your theme's files, then import the updated theme to apply changes.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2021-10-16T05:29:30+00:00",
"dateModified": "2026-01-21T19:50:15+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408846524954"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Knowledge",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298860954"
}
}
}</script>