Set Up Theme Developer Tools

Before you can create a theme, you need to download the theme developer tools and extract them to create a top-level theme development workspace. Then you can use the theme developer tools to run Gulp.js commands to fetch files from the server, test your changes locally, and deploy themes to NetSuite. For more information about working with the theme developer tools, see Theme Development Life Cycle.

Important:

You can only develop one theme per top-level theme workspace. To develop two or more themes simultaneously, you must set up multiple instances of the theme developer tools, one for each theme.

Note:

The theme developer tools are required for all SuiteCommerce sites and any SuiteCommerce Advanced (SCA) sites implementing the Aconcagua release or later. You cannot customize your SCA site’s Sass or HTML template files without these tools.

Prerequisites

Before downloading the theme developer tools, complete the following tasks:

• Verify that you have SuiteCommerce or SuiteCommerce Advanced installed as described in Install Your Commerce Website Applications.

• Verify that you have SuiteCommerce Extension Manager installed as described in Install Your Commerce Website Applications.

• Set up your developer environment as described in Install Node.js and Install Gulp.js.

Download Theme Developer Tools

Locate and download the theme developer tools appropriate for your implementation as described in the following procedure.

To download and extract theme developer tools:

1. Log in to your NetSuite account.

2. In NetSuite, go to Documents > Files > File Cabinet.

3. Navigate to SuiteBundles/Bundle 500777/.

4. Download the .zip file you find there:

   ThemeDevelopmentTools-23.2.x.zip (where x equals the latest minor release).

   Important:

   If you are implementing the Aconcagua or the 2018.2 release of SuiteCommerce Advanced, download the ThemeDevelopmentTools-18.2.1.zip file. These are the only tools compatible with your implementation.

5. Extract the .zip file to a location in your local environment. This becomes your root development directory for custom themes.

   The .zip file extracts into a directory of the same name, but you can rename this directory to suit your needs.

   Important:

   Do not move, delete, or rename any files or folders within the top-level development directory.

6. Open a command line or terminal window.

7. Access your root development directory created previously.

8. Enter the following command to install required Node.js packages into this directory:

   npm install

   This command installs the dependencies required to manage your custom themes. These files are stored in the node_modules subdirectory of the root development directory. This command may take several minutes to complete.

   Note:

   If you use a sandbox account, follow the preceding steps to create two separate root development directories—one for production and one for sandbox. Following this best practice helps ensure you fetch from and deploy to the correct account later in the development lifecycle.

Using Theme Developer Tools with Token-Based Authentication

Theme Developer Tools can be used to support token-based authentication (TBA) for your site. To take advantage of this, complete the following steps:

Note:

If you completed these steps when setting up the Extension Developer Tools, you do not need to repeat these steps.

1. Create an integration record.

   For more information, see Create Integration Records for Applications to Use TBA.

   1. In the Name field, enter a name for the integration record.

   2. In the State field, select Enabled.

   3. Check the Token-Based Authentication box.

   4. Check the TBA: Authorization Flow box.

   5. In the Callback URL field, enter: http://localhost:7777/tba.

   6. Clear the Authorization Code Grant box.

   7. Check the User Credentials box.

2. Save the integration. Be sure to copy the consumer key/secret before closing the page.

3. Paste the consumer key/secret in the .env file.

   Note:

   This file is inside the root theme developer tools folder that was downloaded when setting up developer tools. For more information about locating this folder, see Download Theme Developer Tools.

Next Steps

After setting up the theme developer tools, you can continue as follows:

• To learn more about how themes work and the files that make up a theme, see Theme Development Files and Folders and Anatomy of the Base Theme. (Recommended if you’re new to website development and learning best practices.)

• If you want to use the SuiteCommerce Base Theme as the starting point for your custom theme, see Use the SuiteCommerce Base Theme.

• To be sure your custom theme works as intended, review Best Practices for Creating Themes.

• If you are ready to begin theme development, see Develop Your Theme for instructions.

Related Topics

Theme Development Files and Folders

Anatomy of the Base Theme

Develop Your Theme

Test and Deploy Your Theme

Best Practices for Creating Themes

Commerce Sass Style Definitions

Theme Tutorials

Do More With Themes

General Notices