Theme Manifest

This topic applies to

Applies to

SuiteCommerce Web Stores

Your theme’s workspace includes a manifest.json file for the theme. This file is located in each theme directory within the Workspace directory. The theme’s manifest is a JSON file that include all the information required to compile resources for an active theme. This topic explains this file.

Workspace/<THEME_DIRECTORY>/manifest.json

This file lists all HTML templates, Sass, and assets related to the active theme that you downloaded when you ran the gulp theme:fetch command. You only need to edit this file to introduce any new HTML, Sass, or assets you create as part of your theme customizations. You can edit Skin labels as well at your option.

Note

See Add a New File to a Theme for instructions on how to edit this file when you add any new HTML, Sass, or assets.


This file also manages any extension overrides. However, the theme development tools add the necessary overrides to this manifest when you deploy your customizations. This section describes the following sections of the theme manifest:

Theme Metadata

The first entries in the manifest file include metadata about the theme or extension itself. These fields are automatically populated when you initially run the gulp theme:deploy command.

{
   "name": "StandardTheme",
   "vendor": "SuiteCommerce",
   "type": "theme",
   "target": "SuiteCommerce",
   "version": "1.2.0",
   "description": "Standard theme for SuiteCommerce",
//...
  • Name (string) – uniquely identifies the name of the theme. This field is required.

  • Vendor (string) – identifies the vendor as a string. This field is required.

  • Type (string) – indicates if the type as a theme. This field is required.

  • Target (comma-separated string) – indicates the SuiteCommerce Applications supported by the theme. This field is required.

  • Version (string) – indicates the version of the theme, such as 1.0.0. This field is required.

  • Description (string) – provides a description of the theme as it appears in NetSuite. This field is optional.

Overrides

The override object is only included if you introduce extension overrides. When you use the Override method, the Gulp.js commands detect any HTML or Sass overrides and include them in this file automatically.

For example, if you override the _error.sass file of the Extension1 extension and run the gulp theme:deploy command, the theme development tools add the following override your theme’s manifest.json file as part of the deployment process:

//...
"override": [
   {
      "src": "Overrides/Extension1/Modules/MyExamplePDPExtension1/Sass/_error.scss",
      "dst": "Extension1/Modules/MyExamplePDPExtension1/Sass/_error.scss"
   },
//...

Templates

The templates object lists all HTML template files included in the theme by application. The application object includes one object per application (shopping, myaccount, and checkout). Each application lists each file in the files array.

You manually add any new template files to this array that you introduced as part of your theme customizations.

//...
"templates": {
   "application":{
      "shopping":{
         "files":[
            "Modules/AddToCartModifier/Templates/add_to_cart_modifier.tpl"
            //...
         ]
      }
      "myaccount":{
         "files":[
            //...
         ]
      }
      "checkout":{
         "files":[
            //...
         ]
      }
   }
}
//...

Sass

The sass object declares the paths to each application entry point and all Sass files to be loaded when you deploy. You manually add any new Sass files to the files array that you introduced as part of your theme customizations.

Note

When listing a new Sass file, declare each file in an order that makes the most semantic sense within the Sass hierarchy.


//...
"sass": {
   "entry_points":{ 
      "shopping":"Modules/Shopping/shopping.scss",
      "myaccount": "Modules/MyAccount/myaccount.scss",
      "checkout": "Modules/Checkout/checkout.scss"
   }
   "files":[ 
      "Modules/Shopping/shopping.scss",
      "Modules/MyAccount/myaccount.scss",
      "Modules/Checkout/checkout.scss",
      "Modules/twitter-bootstrap-sass@3.3.1/assets/stylesheets/bootstrap/_alerts.scss",
      //...
   ]
}
//...

Skins

The skins array is automatically populated when you run either the gulp theme:local or gulp theme:deploy commands. This array defines an object for each new skin preset file located in the Skins directory when you run these commands. Each skin object includes the following properties:

  • name – declares the name of the skin as it appears in SMT. As a default, this value equals the file name.

  • file – declares the name and location of the skin preset file. This name must match the name of the file in the Skins directory.

//...
,   'skins': [
      {
         'name': 'winter_skin'
      ,   'file': 'Skins/winter_skin.json'
      }
   ,   {
         'name': 'spring_skin'
      ,   'file': 'Skins/spring_skin.json'
      }   
   ,   {
         'name': 'summer_skin'
      ,   'file': 'Skins/summer_skin.json'
      }   
   ,   {
         'name': 'fall_skin'
      ,   'file': 'Skins/fall_skin.json'
      }      
]
//...

By default, If necessary, you can edit the manifest.json file to provide a more visually appealing value for the name property.

Example

You want to provide four selectable skins for a theme, each with a different color scheme to correspond with the different seasons: winter, spring, summer, and fall. You create four individual skin preset files in your theme’s Skins directory: winter_skin.json, spring_skin.json, summer_skin.json, and fall_skin.json.

You use the theme developer tools to run the theme gulp:local command. The developer tools automatically edit your theme’s manifest.json file:

Later, you decide that you want the SMT Theme Customizer to display different names for each skin. You open the manifest.json file and make the following edits to each skin object’s name property:

Assets

The assets object defines paths to the images and fonts located in the theme directory’s assets folder. This defines an array for each image and font used. These paths are relative to the theme’s assets folder path. This is where you add any new asset files introduced as part of your theme customizations.

//...
"assets": {
      "img": {
         "files": [
            "img/favicon.ico",
            "img/image-not-available.png",
            "img/add-to-cart-logo.png",
            //...
         ]
      },
      "font-awesome": {
         "files": [
            "font-awesome/FontAwesome.otf",
            "font-awesome/custom/fontawesome-webfont.eot",
            //...
         ]
      },
      "fonts": {
         "files": [
            "fonts/DancingScript-Bold.ttf",
            "fonts/DancingScript-Regular.ttf",
            //...
         ]
      }
}
//...

Record Paths

The final part of the manifest file lists the path to the theme, the Extension record and Activation IDs as stored in NetSuite.

//...
"path": "SuiteBundles/Bundle 193239/SuiteCommerce Base Theme",
"extension_id": "4535",
"activation_id": "59"