Skip to main content

Structure

Theme Directory Structure:

├── .fdk
├── themes
│ ├── assets
│ ├── components
│ ├── config
│ ├── constants
│ ├── custom-templates
│ ├── helper
│ ├── page-layouts
│ ├── pages
│ ├── sections
│ ├── styles
│ └── index.jsx
├── .eslintrc.js
├── .gitignore
├── config.json
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.js

The following are the mandatory sub-directories and files that the theme folder must have.

  1. index.jsx: This is the entry file for our react theme. This file consists of a default exported function that bootstraps the theme bundle object in the engine.
  2. config: This directory houses the 2 config files for our theme viz . settings_data.json and settings_schema.json.
  3. custom-templates: All the custom templates of our theme are to be placed in this folder Custom Pages:
  4. pages: All the system pages are to be kept in this folder. Any other file which does not correspond to a system page name may throw error during theme sync. System Pages:
  5. sections: This is for the re-usable section components which are a part of current theme. Sections , Used in Section Pages:

Optional Subdirectories and Files

The following directories and files are optional and can be included based on the specific needs of your theme. These are not restricted by the engine:

  • page-layouts: Organize your page layout components.
  • helper: Store utility functions or helper methods.
  • styles: Manage theme-specific styles.
  • constants: Define constants for your theme.
  • components: Include reusable components specific to the theme.
  • .eslintrc.js: ESLint configuration file for linting.
  • .gitignore: File to specify untracked files for Git.

Feel free to customize these optional directories as needed for your theme's architecture.


Was this section helpful?