Anatomy of the Base Theme

The SuiteCommerce Base Theme provides a basic theme that you can activate and use as a baseline for your own theme development. The SuiteCommerce Base Theme is a managed bundle and it includes all best practices as described in Best Practices for Creating Themes. To use the SuiteCommerce Base Theme, activate it and then fetch its source files. See Fetch Active Theme Files for detailed information.

Read the following topics to learn more:

Base Theme Directories and Files
Use the SuiteCommerce Base Theme

Base Theme Directories and Files

By examining the contents of the SuiteCommerce Base Theme, you can better understand how all the resources within a theme work together. When you fetch the SuiteCommerce Base Theme, the theme developer tools populate your Workspace directory with all of the folders and files that make up this theme. Your local Workspace directory includes:

               Workspace/
         SuiteCommerceBaseTheme/
               assets/
               Modules/
               Overrides/
               Skins/
               manifest.json

The following table provides more information about each of the preceding directories and files.

Folder/File	Description
assets	The assets directory includes two subdirectories, font-awesome and img, which hold the fonts and images that the modules in the Modules folder depend on. Specifically, the font-awesome folder holds the only custom font used in the SuiteCommerce Base Theme and the img folder is a container for all of the site's base imagery (for example, credit card icons, favicon, and so on). When customizing an existing theme or building a new theme, you can organize your theme’s fonts and images any way you like within the asset’s parent directory. If you want to add a custom font, create a new sub-directory in the assets directory with the same name as the font you want to use. If you prefer to organize the images for your site into separate folders, you can create those folders in the img directory. All files in the asset’s parent directory are included in your theme’s package when you test locally or deploy.
Modules	The Modules directory holds all the modules that make up the theme. A module defines a specific area of functionality (feature or utility) for your site. Each module includes a Sass and a Templates folder. The Sass folder houses the style sheets for a module while the Templates folder contains all the templates for a module. When customizing an existing theme or developing a new theme, you can directly edit these style and template files to customize the appearance of your site. For example, if you want to change the vertical alignment of the header logo for your site, you can edit the Workspace/<THEME_DIRECTORY>/Modules/Header@sc-<release>/Sass/_header-logo.scss file.
Overrides	The Overrides directory does not hold files for the theme. Instead, this directory holds the files for theme-specific overrides of any extensions your site has at the time you fetch the theme. Theme-specific overrides are needed when an extension is developed to add new functionality to a site, but the layout and style of that new functionality does not conform to the rest of the site. In such a scenario, the extension developer can create theme-specific overrides for the unique style and layout that is needed. For more information, see Override Active Extension Files.
Skins	The Skins directory holds preset look and feel options that site administrators can select while using the Site Management Tools (SMT). The SuiteCommerce Base Theme includes two skins: skin1.json and skin2.json. A skin.json file contains an object of key-value pairs where the values in the file create a unique look and feel when the skin is selected by an administrator in SMT. For example, if you open the skin1.json file, you can see that it changes the primary text color for buttons to white and the primary hover text color for buttons to white. You can create additional skins by copying an existing object of key-value pairs in a theme, supplying your own values, and then saving the object as a .json file. The .json files that you add to the Skins directory are automatically added to the manifest.json file when you deploy. The name of the skin matches the name of the .json file in the Skins directory. For example, a file named skin900.json produces a skin named skin900, but you can change the name in the manifest file. For more information about themes and SMT, including creating skins, exposing Sass variables for cutomization, and setting up themes for cutomization in SMT, see Enable Customization from Site Management Tools.
manifest.json	This JSON file includes all the information required to compile the resources for the theme. It lists all HTML templates, Sass, and other assets for the theme. The manifest.json file is automatically updated when the compilation process runs. You only need to edit this file to introduce new HTML, Sass, or other assets you create as part of your theme customizations. For more information about working with the theme manifest, see Edit the Theme Manifest.

Folder/File

Description

assets

The assets directory includes two subdirectories, font-awesome and img, which hold the fonts and images that the modules in the Modules folder depend on. Specifically, the font-awesome folder holds the only custom font used in the SuiteCommerce Base Theme and the img folder is a container for all of the site's base imagery (for example, credit card icons, favicon, and so on).

When customizing an existing theme or building a new theme, you can organize your theme’s fonts and images any way you like within the asset’s parent directory. If you want to add a custom font, create a new sub-directory in the assets directory with the same name as the font you want to use. If you prefer to organize the images for your site into separate folders, you can create those folders in the img directory. All files in the asset’s parent directory are included in your theme’s package when you test locally or deploy.

Modules

The Modules directory holds all the modules that make up the theme. A module defines a specific area of functionality (feature or utility) for your site. Each module includes a Sass and a Templates folder. The Sass folder houses the style sheets for a module while the Templates folder contains all the templates for a module.

When customizing an existing theme or developing a new theme, you can directly edit these style and template files to customize the appearance of your site. For example, if you want to change the vertical alignment of the header logo for your site, you can edit the Workspace/<THEME_DIRECTORY>/Modules/Header@sc-<release>/Sass/_header-logo.scss file.

Overrides

The Overrides directory does not hold files for the theme. Instead, this directory holds the files for theme-specific overrides of any extensions your site has at the time you fetch the theme.

Theme-specific overrides are needed when an extension is developed to add new functionality to a site, but the layout and style of that new functionality does not conform to the rest of the site. In such a scenario, the extension developer can create theme-specific overrides for the unique style and layout that is needed.

For more information, see Override Active Extension Files.

Skins

The Skins directory holds preset look and feel options that site administrators can select while using the Site Management Tools (SMT). The SuiteCommerce Base Theme includes two skins: skin1.json and skin2.json.

A skin.json file contains an object of key-value pairs where the values in the file create a unique look and feel when the skin is selected by an administrator in SMT. For example, if you open the skin1.json file, you can see that it changes the primary text color for buttons to white and the primary hover text color for buttons to white.

You can create additional skins by copying an existing object of key-value pairs in a theme, supplying your own values, and then saving the object as a .json file. The .json files that you add to the Skins directory are automatically added to the manifest.json file when you deploy. The name of the skin matches the name of the .json file in the Skins directory. For example, a file named skin900.json produces a skin named skin900, but you can change the name in the manifest file.

For more information about themes and SMT, including creating skins, exposing Sass variables for cutomization, and setting up themes for cutomization in SMT, see Enable Customization from Site Management Tools.

manifest.json

This JSON file includes all the information required to compile the resources for the theme. It lists all HTML templates, Sass, and other assets for the theme. The manifest.json file is automatically updated when the compilation process runs.

You only need to edit this file to introduce new HTML, Sass, or other assets you create as part of your theme customizations.

For more information about working with the theme manifest, see Edit the Theme Manifest.

For more information about creating custom themes, see Best Practices for Creating Themes and Theme Tutorials.

Use the SuiteCommerce Base Theme

If you want to use the SuiteCommerce Base Theme as the starting point for your theme customizations, install and activate it as follows:

Verify the SuiteCommerce Base Theme SuiteApp is installed. The SuiteCommerce Base Theme is a managed SuiteApp and so you should receive updates to this bundle automatically.
1. Find the Bundle ID for the SuiteCommerce Base Theme listed in the table in Install Your Commerce Website Applications.
2. Go to Customization > SuiteBundler > Search & Install Bundles > List, find the SuiteCommerce Base Theme, and verify the Bundle ID.
Activate the SuiteCommerce Base Theme on a domain. See Manage Themes and Extensions.
Use the Theme Developer Tools to fetch the active theme files for the domain. See Fetch Active Theme Files.

Important Information About the SuiteCommerce Base Theme

When you deploy a theme based on the SuiteCommerce Base Theme, the theme developer tools prompt you to create a unique name. You cannot overwrite the base theme but you can create a new theme based on it.
The base theme is a managed bundle. Updates to this theme coincide with major releases of SuiteCommerce, SuiteCommerce MyAccount, and SuiteCommerce Advanced (SCA).
SuiteCommerce and SuiteCommerce MyAccount updates are all backward compatible with the base theme. Therefore, when your account receives the latest SuiteCommerce bundle update, any themes created with older versions of the base theme are compatible with your SuiteCommerce or SuiteCommerce MyAccount site.
SCA customers must take care when creating themes using later releases of the SuiteCommerce Base Theme. Each managed update of the base theme is intended to be used with the corresponding core releases of SCA or later. Therefore, a theme created using the SuiteCommerce Base Theme 2019.1 release is compatible with sites implementing the same major release (SCA 2019.1) and later. That same theme might not be compatible on sites implementing an earlier SCA release (2018.2, for example).
SuiteCommerce Base Theme is the only theme published by Oracle NetSuite available to SuiteCommerce MyAccount sites. You can use the SuiteCommerce Base Theme as a baseline for your own theme to be compatible with SuiteCommerce MyAccount.

Base Theme Directories and Files

Use the SuiteCommerce Base Theme

Important Information About the SuiteCommerce Base Theme

Related Topics