> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Directory Structure

> **Note**
>
> Stencil has a hard limit on directory depth within theme files when using the control panel Theme Files Editor.
>
> Themes with a maximum directory depth greater than `9` will be uneditable within the control panel and will require local development to make edits.

The default directory structure for [Cornerstone](https://github.com/bigcommerce/cornerstone)-based themes is as follows:

```shell showLineNumbers={false}
.
├── assets/
├── lang/
├── meta/
├── templates/
├── config.json
├── schema.json
└── schemaTranslations.json
```

## assets/

The `/fonts/` subdirectory contains local versions of theme-specific fonts.

```shell showLineNumbers={false}
├── assets
│   ├── fonts               # theme fonts
│   ├── icons               # logos and ui icons
│   ├── img                 # theme images
│   │   ├── payment-methods # payment method icons
│   │   ├── vendor          # third-party lib icons
│   ├── js                  # javascript
│   │   ├── test-unit       # tests
│   │   ├── theme           # global and page level js
│   │   └── app.js          # main js file; page js mapped here
│   └── scss                # Sassy CSS files
│       ├── components      # scss for ui components
│       ├── fonts           # scss for fonts
│       ├── layouts         # scss for layouts
│       ├── settings        # scss variable definitions
│       ├── tools           # scss functions
│       ├── utilities       # scss utilities
│       ├── vendor          # third-party lib scss
```

## assets/js/

Theme JavaScript.

```shell showLineNumbers={false}
├── assets
│   ├── js                  # javascript
│   │   ├── test-unit       # tests
│   │   ├── theme           # global and page level js
│   │   └── app.js          # main js file; page js mapped here
```

## lang/

Language translation `.json` files.

```shell showLineNumbers={false}
├── lang
│   ├── en-CA.json  # English, Canada
│   ├── en.json     # English
│   ├── fr-CA.json  # French, Canada
│   └── fr.json     # French
```

**Example**:

```json showLineNumbers={false}
// fr.json

{
    "header": {
        "welcome_back": "Bienvenue, {name}"
    }
}
```

## meta/

Marketplace screenshots.

```shell showLineNumbers={false}
├── meta
│   ├── composed.png
│   ├── desktop_bold.png
│   ├── desktop_light.png
│   ├── desktop_warm.png
│   ├── mobile_bold.png
│   ├── mobile_light.png
│   └── mobile_warm.png
```

## templates/

Theme template HTML files.

```shell showLineNumbers={false}
├── templates
│   ├── components
│   │   ├── common
│   │   |   ├── header.html
│   │   |   ├── footer.html
│   │   |   ├── body.html
│   │   ...
│   ├── layout
│   │   ├── base.html
│   │   ...
│   └── pages
```

## config.json

Main configuration file.

```json showLineNumbers={false}

{
  "name": "Cornerstone",
  "version": "4.9.0-rc.1",
  "meta": {...
  },
  "css_compiler": "scss",
  "autoprefixer_cascade": true,
  "autoprefixer_browsers": [...
  ],
  "settings": {...
  },
  "read_only_files": [...
  ],
  "resources": {...
  },
  "variations": [...
  ]
}
```

## schema.json

Page Builder settings schema.

```json showLineNumbers={false}

[
  {
    "name": "i18n.Global",
    "settings": [
      {
        "type": "heading",
        "content": "i18n.BackgroundAndLines"
      },
      {
        "type": "color",
        "label": "i18n.BannerBackground",
        "id": "color-primary"
      },
      ...
    ]
  },
  {
    "name": "i18n.HeaderAndFooter",
    "settings": [...
    ],
  },
  ...
]
```

## schemaTranslations.json

Translations for Page Builder settings.

```json showLineNumbers={false}
{
  "i18n.Global": {
    "default": "Global",
    "fr": "Global",
    "it": "Globale",
    "uk": "Глобально",
    "zh": "全局"
  },
  "i18n.BackgroundAndLines": {
    "default": "Background and lines",
    "fr": "Arrière-plan et lignes",
    "it": "Sfondo e linee",
    "uk": "Фон та лінії",
    "zh": "背景和线条"
  },
  "i18n.BannerBackground": {
    "default": "Banner background",
    "fr": "Bannière de l’arrière-plan",
    "it": "Sfondo del banner",
    "uk": "Фон банеру",
    "zh": "横幅背景"
    ...
  }
}
```