Sections

Theme structure

Every Zendesk theme has the same folder structure, however there are some important additions for our range of themes. On this page we describe the purpose of each file and folder.

theme/
├── assets/
├── bin/
├── scss/
├── settings/
├── templates/
├── translations/
├── manifest.json
├── script.js
└── style.css

assets/

The assets/ folder contains all custom files used by the theme, by default our framework-level JavaScript files. All files that you add to this folder, like images, can then be used in page templates and theme code.

bin/

The bin/ folder contains Ruby and JavaScript files responsible for generating theme setting translations and compiling Sass source files mentioned below into CSS.

scss/

The scss/ folder contains the Sass source files which you can optionally use to compile the theme’s stylesheet. Review the Styles article to learn more about the benefits of using Sass.

templates/

The templates/ folder contains editable page templates that define the layout of each page type, as well as the global header and footer. Each template is written using Zendesk’s templating language called Curlybars.

translations/

The translations/ folder contains translated labels and descriptions for each theme setting. You should only need to modify these if you add your own custom theme settings and can do so using the update-translation.js file within the assets/ folder.

manifest.json

The manifest.json file contains information about your theme and is used to define the theme’s Settings panel in Guide.

script.js

The script.js file contains the compiled JavaScript for your theme. Because every theme is different, functionality provided by our plugins are added separated through the use of theme assets. The bundled plugins for each theme are contained with the plugins.js file in the assets/ folder.

style.css

The style.css file contains the styles for your theme, compiled from the Sass source files. You can edit this file locally or using the Zendesk Theme Editor, but when making significant changes we recommend taking advantage of the power of the Sass language and the files in the scss/ folder.