Edit the Theme Manifest
Each theme includes a manifest.json file, which is located within the Workspace directory. A theme’s manifest is a JSON file that includes all the information required to compile resources for an active theme.
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 add any new HTML, Sass, or assets you create as part of your theme customizations. You can edit skin labels as well.
See Add a New File to a Theme for more examples of 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. The following topics describes the 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 is a theme. This field is required.
-
Target (comma-separated string) – indicates the Commerce 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 automatically include them in this file.
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 should manually add any new template files that you introduce as part of your theme customizations to the files array.
//...
"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 should manually add any new Sass files to the files array that you introduce as part of your theme customizations.
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.
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 to include these skins:
//...
, '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'
}
]
//...
Later, you decide that you want the SMT Theme Skin Manager 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:
//...
, 'skins': [
{
'name': 'Winter Color Scheme'
, 'file': 'Skins/winter_skin.json'
}
, {
'name': 'Spring Color Scheme'
, 'file': 'Skins/spring_skin.json'
}
, {
'name': 'Summer Color Scheme'
, 'file': 'Skins/summer_skin.json'
}
, {
'name': 'Fall Color Scheme'
, 'file': 'Skins/fall_skin.json'
}
]
//...
Assets
The assets object defines paths to the images and fonts located in the theme directory’s assets folder in a files 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"
Next Steps
When you are ready, use the theme developer tools to test or deploy your theme. See Test and Deploy Your Theme for details.
To learn about additional capabilities offered with themes, see Do More With Themes.
For guidance about how best to customize your themes, see: