The project files in which you develop themes have the directory structure shown in this topic. You can use the 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. |
fr-FR.json | The French language labels file. |
de-DE.json | 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. |