Sections

How it works

Anyone who has ever built a custom theme for Zendesk Guide knows that, even with a finalized design, bringing your vision to life can be difficult. We provide you with the tools you need to create beautiful and unique self-service experiences for your customers.

Some ready-made themes attempt to provide layout and styling options through the use of theme settings, but this approach doesn’t come close to addressing the countless possibilities that exist. The result: Help Centers that look very similar. We recognize that although themes give you an excellent starting point, customizing them to meet your company’s brand or an existing set of style guidelines can take a lot of time and effort without the right tools.

We provide those tools.

Framework

To close the gap between design and reality we’ve developed a comprehensive theming framework comprising:

  1. Settings are used to control the foundation on which everything else is built.

    1. Theme settings allow you to configure certain aspects of the theme’s appearance, like theme colors, images and fonts.
    2. Sass variables give you complete control over everything else. You can update the default color palettes or create new ones, change responsive breakpoints, define sizing scales, fine-tune utilities and elements and more!
    3. Base styles are applied to HTML elements based on your chosen settings, which utilities, elements and patterns then build upon.
  2. Utilities have a specific, often singular role and can be used for everything from minor tweaks to building entire page layouts. For example, text alignment utilities provide control over the alignment of text within an element and can be combined with other utilities to quickly and easily change the appearance of an element or even the entire page.

    Our framework adopts an atomic or utility-first approach to styling, which aims to:

    • Allow your designers to define the overall style of your Help Center (see settings) and ensure that future changes are made in accordance with it.
    • Eliminate the need to invent arbitrary class names for elements which differ only slightly in appearance.
    • Allow developers to confidently make changes.
    • Allow parts of (or entire) pages to be copied from individual themes or the Pattern Library.
    • Make your code easier to maintain and scale.
  3. Elements are reusable parts of a page that can be used in a variety of different contexts.

    Buttons

    For example, buttons and lists are elements that feature throughout our themes. Although each has their own basic look-and-feel, they can be used in a variety of ways both alone and as parts of larger patterns.

    Elements can be thought of as collections of utilities that, due to being used in many places throughout the Help Center, have been consolidated into one or two class names. They can, as a result, easily be modified by adding utilities to achieve a unique look-and-feel. When creating novel layouts and designs, we recommend starting with utilities and creating new elements once repeating combinations start to emerge.

  4. Patterns are collections of elements and utilities which, as a result of being compositions of more fundamentals parts of the framework, can be copied and pasted between themes or directly from our ever-growing library.

    Category block

    For example, we provide numerous category list patterns that demonstrate different ways of presenting categories. Some make use of elements like cards and list groups, while others are built largely from utilities. These and other patterns can be used as-is or customized through the use of elements or utilities.

Because all of our themes are built using this framework, elements, patterns and even entire pages can be copied from one theme to another. This makes branding and customization faster, allows for rapid prototyping of ideas and ensures that changes are made in a consistent way based on the parameters decided by you when configuring top-level settings.

Of course if one of our themes already meets your requirements, you can simply import it into Guide without making any changes at all!

Folder structure

Every Zendesk theme has the same folder structure, however there are some important additions for our range of themes.

├── 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.

bin/

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

scss/

The scss/ folder contains the source Sass files used to compile the theme’s stylesheet.

templates/

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

translations/

The translations/ folder contains translated labels and descriptions for each theme setting. If required, these can be updated 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.

style.css

The style.css file contains the styles for your theme, compiled from the Sass source files.

Our services

If you don’t have the time to create your own custom theme using our theming framework, we can help by offering the following services:

  • We can customize one of our ready-made themes to absolute perfection, ensuring that your brand is at the forefront and your visitors get the best possible experience.
  • We can build an entirely new theme for you using our powerful and propriety theming framework. This includes not just the look-and-feel, but any and all custom functionality required.
  • We don’t just do themes. We can help you improve your agent experience as well through custom Zendesk Support and Chat apps. We’ll manage the entire process from design through delivery.

We are experts in design, development, UX and (most importantly) Zendesk and offer a full warranty on our work. Your satisfaction is guaranteed.

If one of the themes from our ever-growing collection ticks all of the boxes for you, we offer installation with every purchase. Getting up and running with couldn’t be easier.