Themes

This topic applies to

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.

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

Step

Description

Customize Pre-Existing Theme Files

Follow these instructions to edit existing theme Sass and HTML files. As a best practice, use the SuiteCommerce Base Theme as a starting point.

Add a New File to a Theme

You can also create new HTML, Sass, or asset files to meet your needs. This section explains how to do this.

Expose Sass Variables for Customization

If you want your theme to be customizable using the Site Management Tools Theme Customizer, follow these instructions to expose variables.

Organize Variables for Display in SMT

Just exposing variables is not enough. You can also organize how those variables look in the SMT user interface. Follow these instructions to build an organization scheme using a _groupings.scss file.

Create Skins

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.

Override Active Extension Files

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.

Next Steps

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. See Test a Theme 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.