Theme installation

Avatar
Michael Reid

For our clients’ convenience, there is a free Installation service.

You can install your theme by yourself if you like. It is rather simple, use the following instructions.

Step 1. Preparation

Before you proceed to set up your Help Center theme, make sure you are fully prepared. Please complete the following preparation steps:

  • Turn off the "mobile layout" option if you have it. To use the theme on mobile devices, the "mobile layout" option should be turned off at your Zendesk Guide Help Center settings (Help Center -> General Settings -> Mobile Layout)
  • Unzip Theme .zip archive package. The templates are downloaded as a single .zip archive package. The package consists of several folders: "css" folder contains CSS-files, "img" folder contains background images and icons for custom-made blocks, "templates" folder contains HTML-files for all kind of Help Center pages, "js" folder contains Javascript files for the theme.
  • Click the "Customize design" link at the top bar panel.

  • Click "Edit Theme". If you are using a standard theme, Zendesk will make a copy of it. Any changes you make are applied to the copy, not the original. You can revert to the original theme at any time. If you use a customized theme, make a copy of all the code and save it locally before installing the new theme.

Step 2. Image uploading

  • Click "Assets" tab.
  • Upload all the files from the theme package "img" folder to the Zendesk Assets area.

Step 3. CSS update

  • Click the "CSS" tab and delete all the content from the code view. 
  • Paste CSS-code. Open the theme package "css" folder. Drag and drop the css-file to the "CSS" tab content area.
  • Click "Save".

 

Step 4. JS update

  • Click the "JS" tab and delete all the content from the code view. 
  • Paste JS-code. Open the theme package "JS" folder. Drag and drop the js-file to the "JS" tab content area. If your theme does not contain any js-file don’t worry, the "JS" tab content area should be empty.
  • Click "Save".

Step 5. HTML update

  • Click the template dropdown menu, for example "Home page" tab and delete all the content from the code view. 
  • Choose a page template.
  • Paste HTML-code. Open the theme package "templates" folder. Find the file with the same name as the page template from the previous point. Drag and drop the file to the corresponding code view.
  • Click "Save".
  • Repeat all the substeps of step 5 for each page type in Zendesk theme editor.

Step 6. Publish changes

  • Now you can test the new theme with your real content in a preview mode. Your Help Center visitors see the previous theme, since the new one is not published yet.
  • When you're ready to implement the changes, click "Publish changes" at the top of the sidebar.

  Note

You may not see "Submit a request" button because you are logged in as the administrator. You can view the theme as an end-user or an anonymous if you select the corresponding option at the bottom right drop-down menu ("Previewing as").

Was this article helpful?
2 out of 2 found this helpful

Comments

0 comments

Article is closed for comments.

Articles in this section