Theme Structure

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 editorsContains 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.jsonThe English language labels file.
fr-FR.jsonThe French language labels file.
de-DE.jsonPlaceholder 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 scriptsContains 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/widgetsContains the widget icon that displays in the widgets selector in Site Builder.
folder imagesContains images used in your theme design, such as icons and backgrounds.

folder scripts

Contains JavaScript files. This directory contains the following subdirectories:

folder modulesContains independent pieces of functionality that may be used more than once.
folder pagesContains scripts that define the functionality for a particular page type.
folder vendorContains third-party scripts.
folder widgetsContains scripts associated with widgets.

folder stylesheets

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

folder baseContains the default style rules for your theme, including mixins and variables.
folder layoutsContains style rules that divide the page into sections.
folder modulesContains style rules that are reusable throughout the theme.
folder pagesContains style rules that apply to a particular page type.
folder stateContains 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 widgetsContains 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 modulesContains modular templates that can be used in other templates and do not generate a full, top-to-bottom HTML page.
folder pagesContains templates for a particular page type. These templates generate full, top-to-bottom HTML pages.
folder back-officeContains operational templates such as packaging slips and order details.
folder widgetsContains templates associated with widgets.
folder emailContains templates associated with emails.
page.hyprThis 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.jsDefines Grunt tasks for building, compressing, watching, and syncing your theme assets with Dev Center.
thumb.pngYour theme's thumbnail image for use in Site Builder.
package.jsonDefines theme metadata and dependencies.
theme.jsonDefines the majority of your theme settings, including metadata and configuration for page types, editors, general settings, email templates, and widgets.
theme-ui.jsonDefines forms for setting theme settings in Admin.