Themes

NOTE — this page has not been updated since Denali; its information may be incomplete, unreliable, or otherwise out of date

Applies to

SuiteCommerce Web Stores

A Theme is a special type of extension that affects a domain’s design, look, and feel. Themes contain any number of HTML templates, Sass files, and other assets that are available as published themes (bundled into a single SuiteApp) or deployed to a NetSuite account by on-site theme developers. After downloading the theme developer tools and creating your developer environment, you are ready to create your own themes.

Benefits of Using Themes

The following list describes some of the benefits of using themes:

Themes introduce a mechanism within the NetSuite user interface for non-technical users alter the look and feel of a web store by installing and activating any number of pre-developed themes from a marketplace.

Themes allow any developer working with SuiteCommerce or SuiteCommerce Advanced (SCA) to create and manage their own themes and activate them for any domains associated with their site. Partners can also publish and distribute themes as bundled SuiteApps.

Themes leverage the features and functionality of Site Management Tools (SMT). You can expose variables to the SMT Theme Customizer. This allows SMT administrators to further customize any theme using the SMT user interface.

Before You Begin

Be aware of the following important information:

These procedures assume that you have already created your developer environment, fetched an active theme to use as a baseline, and are ready to build your theme. For more information, see Theme Developer Tools.

To develop a theme, you must have experience working with HTML, Sass/CSS, and Handlebars.js. Before customizing any theme or extension source code, read and understand the Best Practices for Creating Themes.

As a best practice use the SuiteCommerce Base Theme as a baseline for theme development. This is available as a SuiteApp. See Install Your SuiteCommerce Application for details on this SuiteApp.

The examples presented in this section describe customizing Sass files. However, you can customize HTML files as well to suit your needs. You can also introduce new images and fonts as assets.

After fetching the active theme using the developer tools, you can customize theme-related files directly within your Workspace/<THEME_DIRECTORY> folder.

If you are implementing the Aconcagua release of SuiteCommerce Advanced, you must implement themes to customize Sass or HTML templates.

Theme Development Checklist

The following checklist assumes that you have already activated a 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 must also familiarize yourself with the Best Practices for Creating Themes.

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.