Editing the code for your live help center theme

What's my plan?

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.

Here's the recommended workflow for updating your live theme:

1. Copy your live theme before making changes.
2. Edit the copy of your live theme and preview changes.
3. Make the updated theme the live theme.

Copy your live theme before making changes

Before you make changes to your live theme, you should make a copy of it and update the copied version.

To copy your live help center theme for editing

1. In Guide, click the Customize design icon () in the sidebar.

   The Themes page opens.

2. On the theme you want to copy, click the options menu (), then select Copy.

   

   The new theme appears on the Themes page.

Edit the copy of your live theme and preview changes

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.

To edit the theme code in the copy of your live theme and preview your changes

1. In Guide, click the Customize design icon () in the sidebar.
2. On the theme you want to edit, click Customize to open it.
   Note: If you want to edit your live theme, it's a good idea to copy the theme first and 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.

   

3. Click Edit code.

   

4. Make a code change, then click Save to save your change.
   You must save your changes before you can preview them.

   Note: If you are editing a live them, you have to click Publish and make your changes live before you can preview. If you don't want to do that, copy the theme and edit that version.
5. In the code editor, click Preview.

   

   The preview opens in a new tab.

6. Navigate in the preview as you normally would to see different pages in your Help Center.
7. Do one of the following to preview a specific page template or role:
   • Click Templates, then select another template you'd like to preview.
   • Click Preview role, then select another role you'd like to preview.
8. Continue to make and save code changes, then view them in the preview tab.

   As you save changes, the preview should refresh and show your updates.

9. Click Close Preview at the top left of the preview when you are finished.

Make your updated theme live

After you have updated the copied theme, and you're happy with it, you can make that theme the live theme.

To set the updated theme as your live help center theme

1. In Guide, click the Customize design icon () in the sidebar.

   The Themes page opens.

2. On the theme that you want to make live, click the options menu (), then select Set as live theme.

   

   Important: Before November, 2016, Help Center contained additional standard themes. If you are using a legacy themes, you can continue to do so. However, if you switch your theme, you will not be able to switch back to the legacy theme.
3. Confirm that you want to make to this theme live for your help center.

   The theme moves to the top of the page and is applied to your live help center.