Theme Structure

The project files in which you develop themes have the directory structure shown in this topic. You can use the Kibo eCommerce Theme Generator to automatically scaffold these files.

folder admin

Contains features that extend menus in Admin. This directory contains the following subdirectories:

folder editors Contains editors, which allow you to create forms for widget and other Admin menus.

folder labels

Contains files in which you can modify the values of certain user-facing labels and messages. This directory contains the following files:

en-US.json The English language labels file.
de-DE.json Note:  Placeholder for German language labels file. Internationalization is not fully supported at this time.

folder compiled

Contains minified and compressed versions of your assets for use in production. This directory contains the following subdirectories:

folder scripts Contains compressed and concatenated JavaScript files.

folder resources

Contains non-code resources for your theme, such as background images, videos, icons, fonts, etc. This directory contains the following subdirectories:

folder admin/widgets Contains the widget icon that displays in the widgets selector in Site Builder.
folder images Contains images used in your theme design, such as icons and backgrounds.

folder scripts

Contains JavaScript files. This directory contains the following subdirectories:

folder modules Contains independent pieces of functionality that may be used more than once.
folder pages Contains scripts that define the functionality for a particular page type.
folder vendor Contains third-party scripts.
folder widgets Contains scripts associated with widgets.

folder stylesheets

Contains LESS files that implement the CSS for your theme. This directory contains the following subdirectories:

folder base Contains the default style rules for your theme, including mixins and variables.
folder layouts Contains style rules that divide the page into sections.
folder modules Contains style rules that are reusable throughout the theme.
folder pages Contains style rules that apply to a particular page type.
folder state Contains style rules that describe how elements display when in a particular state, such as enabled or disabled, required or optional, loading or fading, etc.
folder widgets Contains style rules associated with widgets.

folder templates

Contains the Hypr files that serve as templates for the pages on your site. This directory contains the following subdirectories and files:

folder modules Contains modular templates that can be used in other templates and do not generate a full, top-to-bottom HTML page.
folder pages Contains templates for a particular page type. These templates generate full, top-to-bottom HTML pages.
folder back-office Contains operational templates such as packaging slips and order details.
folder widgets Contains templates associated with widgets.
folder email Contains templates associated with emails.
page.hypr This is the base template that all other templates extend from.

folder Important Files in the Root Directory

The following files are located in your theme's root directory and are important for building theme assets and specifying theme settings:

Gruntfile.js Defines Grunt tasks for building, compressing, watching, and syncing your theme assets with Dev Center.
thumb.png Your theme's thumbnail image for use in Site Builder.
package.json Defines theme metadata and dependencies.
theme.json Defines the majority of your theme settings, including metadata and configuration for page types, editors, general settings, email templates, and widgets.
theme-ui.json Defines forms for setting theme settings in Admin.