Editing the code for your live help center theme

<div class="article-banners">
<div id="docs-wmp-link"><a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a></div>
<div class="article-banner" id="suite_gpee">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>
<div class="article-banner" id="support_with_guide_all">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Knowledge Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body">
<p class="p">If you need to edit the code for your live theme, it's a good idea to copy the theme first
and edit that version. When you make an update to your theme, you need to save changes before
you can preview them. Therefore, it's a good idea to work on a copy instead of your live
theme. You can make the copied theme live when you finish your updates and testing.</p>
<div class="p">Here's the recommended workflow for updating your live theme:<ol class="ol" id="topic_ist_fyv_sbb__ol_lqd_vxp_ccb">
<li class="li">
<a class="xref" href="#topic_fvy_vxp_ccb">Copy your live theme before making
changes</a>.</li>
<li class="li">
<a class="xref" href="#topic_p3w_wxp_ccb">Edit the copy of your live theme and
preview changes</a>.</li>
<li class="li">
<a class="xref" href="#topic_prr_xxp_ccb">Make the updated theme the live
theme</a>. </li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_fvy_vxp_ccb">
<h2 class="title topictitle2" id="ariaid-title2">Copy your live theme before making changes</h2>
<div class="body">
<p class="p">Before you make changes to your live theme, you should make a copy of it and update the
copied version.</p>
<p class="p"><strong class="ph b">To copy your live help center theme for editing</strong></p>
<div class="p">
<ol class="ol" id="topic_fvy_vxp_ccb__d6e12">
<li class="li">In Guide, click the <strong class="ph b">Customize design</strong> icon (<img class="image" id="topic_fvy_vxp_ccb__d6e18" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.<p class="p">The Themes page opens.</p>
</li>
<li class="li">On the theme you want to copy, click the options menu (<img class="image" id="topic_fvy_vxp_ccb__d6e24" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_theme_menu_gear2.png">), then select <strong class="ph b">Copy</strong>.<p class="p"><img class="image" id="topic_fvy_vxp_ccb__d6e30" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_themes_menu.png" width="250"></p>
<p class="p">The new theme appears on the
Themes page.</p>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_p3w_wxp_ccb">
<h2 class="title topictitle2" id="ariaid-title3">Edit the copy of your live theme and preview changes</h2>
<div class="body">
<p class="p">After you have copied your live theme, you can edit the code in the copied version.
As you make and save changes, you can preview them. You must save a change before you can
preview it.</p>
<p class="p"><strong class="ph b">To edit the theme code in the copy of your live theme and preview your changes</strong></p>
<div class="p">
<ol class="ol" id="topic_p3w_wxp_ccb__d7e11">
<li class="li">In Guide, click the <strong class="ph b">Customize design</strong> icon (<img class="image" id="topic_p3w_wxp_ccb__d7e17" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar. </li>
<li class="li">On the theme you want to edit, click <strong class="ph b">Customize</strong> to open it.<div class="p">
<div class="note note">
<span class="notetitle">Note:</span> If you want to edit your live theme, <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832146970#topic_qwz_5sf_bbb" target="_blank">copy the theme first</a>, then
edit that version. You will need to save changes before you can preview
them, so it's safer to work on a copy, then make the copied theme live
when you're ready.</div>
</div>
<p class="p"><img class="image" id="topic_p3w_wxp_ccb__d7e33" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_view_theme.png" width="500"></p>
</li>
<li class="li">Click <strong class="ph b">Edit code</strong>.<p class="p"><img class="image" id="topic_p3w_wxp_ccb__d7e40" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_menu_option_edit_code.png" width="600"></p>
</li>
<li class="li">Make a code change, then click <strong class="ph b">Save</strong> to save your change. <div class="p">You must save your changes
before you can preview them.<div class="note note">
<span class="notetitle">Note:</span> If you are editing a live theme, you have
to click <strong class="ph b">Publish</strong> and make your changes live before you can
preview. If you don't want to do that, <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832146970#topic_qwz_5sf_bbb" target="_blank">copy the theme</a> and edit that
version.</div>
</div>
</li>
<li class="li">In the code editor, click <strong class="ph b">Preview</strong>.<p class="p"><img class="image" id="topic_p3w_wxp_ccb__d7e62" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/themes_edit_code_preview.png" width="200"></p>
<p class="p">The preview opens in a new
tab.</p>
</li>
<li class="li">Navigate in the preview as you normally would to see different pages in your Help Center.</li>
<li class="li">Do one of the following to preview a specific page template or role:<ul class="ul" id="topic_p3w_wxp_ccb__d7e69">
<li class="li">Click <strong class="ph b">Templates</strong>, then select another template you'd like to
preview.</li>
<li class="li">Click <strong class="ph b">Preview role</strong>, then select another role you'd like to
preview. </li>
</ul>
</li>
<li class="li">Continue to make and save code changes, then view them in the preview tab.<p class="p">As you save changes, the preview should refresh and show your updates.</p>
</li>
<li class="li">Click <strong class="ph b">Close Preview</strong> at the top left of the preview when you are
finished.</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_prr_xxp_ccb">
<h2 class="title topictitle2" id="ariaid-title4">Make your updated theme live</h2>
<div class="body">
<p class="p">After you have updated the copied theme, and you're happy with it, you can make that
theme the live theme.</p>
<p class="p"><strong class="ph b">To set the updated theme as your live help center theme</strong></p>
<div class="p">
<ol class="ol" id="topic_prr_xxp_ccb__d8e11">
<li class="li">In Guide, click the <strong class="ph b">Customize design</strong> icon (<img class="image" id="topic_prr_xxp_ccb__d8e17" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.<p class="p">The Themes page opens.</p>
</li>
<li class="li">On the theme that you want to make live, click the options menu (<img class="image" id="topic_prr_xxp_ccb__d8e23" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_theme_menu_gear2.png">), then select <strong class="ph b">Set as live theme</strong>.<p class="p"><img class="image" id="topic_prr_xxp_ccb__d8e29" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_themes_menu.png" width="250"></p>
</li>
<li class="li">Confirm that you want to make this theme live for your help center.<p class="p">The theme moves to the
top of the page and is applied to your live help center.</p>
</li>
</ol>
</div>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408832558874",
"url": "https://support.zendesk.com/hc/en-us/articles/4408832558874-Editing-the-code-for-your-live-help-center-theme",
"headline": "Editing the code for your live help center theme",
"description": "You can update your live help center theme by copying it first, editing the copied version's code, previewing changes, and then setting the updated theme as live when ready.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2021-10-16T03:47:09+00:00",
"dateModified": "2026-01-21T19:46:25+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408832558874"
},
"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>