Navigating the theme folder

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, including JavaScript and CSS files for our extensions, JavaScript files required by our theming framework and placeholder images. You can add and use your own theme assets by adding files to assets/ folder.

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 theme’s Sass source files which you can compile the theme’s stylesheet. Sass is a preprocessor that lets you use features that don’t exist in standard CSS yet like variables, nesting, mixins and inheritance. Using Sass is completely optional and an alternative to editing the theme’s style.css file directly, but it can make writing custom CSS much faster and more enjoyable.

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 Zendesk Guide. You can use it to add or edit theme settings.

script.js

The script.js file contains basic JavaScript for your theme. It’s a great place to add your own custom functionality. Functionality provided by our theming framework and extensions are added separated through the use of theme assets. The core extensions used by every theme are bundled into the extensions.js file in the assets/ folder.

style.css

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

Questions or feedback about this article? Let us know