Develop Your Theme

This topic applies to

Applies to

SuiteCommerce Web Stores

As a theme developer, you start with a baseline theme and develop your own from there. Best practice is to start development using the SuiteCommerce Base Theme. This is available as a SuiteApp in NetSuite. Simply install this SuiteApp and activate it using the Manage Extensions Wizard. Use the theme developer tools to fetch the theme files into a theme development workspace and start developing.

Theme Development Tutorials

The following tutorials assume that you have already activated the SuiteCommerce Base Theme using the Manage Extensions Wizard and fetched theme files using the theme developer tools. If you are planning to override extension-related HTML and Sass to accommodate your theme, you must activate any related extensions as well. You should also familiarize yourself with the Best Practices for Creating Themes.

Refer to the following topics for assistance before creating a theme:

Step

Description

More Information

1

Create a baseline theme using the SuiteCommerce Base Theme. Follow the best practices related to the Base Theme when using this theme.

SuiteCommerce Base Theme

2

Edit existing theme Sass and HTML files.

Customize Pre-Existing Theme Files

3

Create new HTML, Sass, or asset files to meet your needs.

Add a New File to a Theme

4

If you want elements of your theme (HTML and Sass) to impact an active extension (use a new color, for example), you can create overrides that implement your changes to the active extension.

These procedures explain how to introduce HTML and Sass changes to a deployed extension using the override method.

Override Active Extension Files

5

If you want your theme to be customizable using the Site Management Tools Theme Customizer, follow these instructions to expose variables and organize how those variables look in the SMT user interface.

You can also create skins for your theme. Skins are predefined settings that change the appearance of a theme in a specific way. Follow these instructions to create skin preset files, which define new values for any number of exposed variables.

Set Up Your Theme for Customization in SMT

6

Understand the theme manifest. This is a JSON file that includes all the information required to compile resources for an active theme.

Theme Manifest

7

Throughout development, you may want to test your theme on a local server or on a test domain. You have the following options:

  • When you are ready to test your theme, you can use the theme development tools to test on a local server.

  • To see your theme on a development or production domain, you must deploy to your NetSuite account and activate the theme (and any extensions that include overrides) for the domain.

Test a Theme on a Local Server

Deploy a Theme to NetSuite

8

Activate your theme to view your theme to your NetSuite account.

Manage Themes and Extensions