BigCommerce
Storefront
Stencil
Themes
Foundations
Directory Structure

Directory Structure

The default directory structure for Cornerstone (opens in a new tab)-based themes is as follows:

.
├── assets/
├── lang/
├── meta/
├── templates/
├── config.json
├── schema.json
└── schemaTranslations.json

assets/

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

├── 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.

├── 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.

├── lang
   ├── en-CA.json  # English, Canada
   ├── en.json     # English
   ├── fr-CA.json  # French, Canada
   └── fr.json     # French

Example:

// fr.json
 
{
    "header": {
        "welcome_back": "Bienvenue, {name}"
    }
}

meta/

Marketplace screenshots.

├── 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.

├── templates
   ├── components
      ├── common
      |   ├── header.html
      |   ├── footer.html
      |   ├── body.html
      ...
   ├── layout
      ├── base.html
      ...
   └── pages

config.json

Main configuration file.

 
{
  "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.

 
[
  {
    "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.

{
  "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": "横幅背景"
    ...
  }
}
Did you find what you were looking for?