Theme Customizer

This topic applies to

Applies to

Commerce Web Stores | Site Management Tools

 

 

This information refers to SuiteCommerce or the Aconcagua release of SuiteCommerce Advanced or later.

The Theme Customizer lets you make changes to the appearance of your website. The change can be something as simple as applying a new font color and weight for headings. Or, it can be more drastic such as switching to a dark background color and a lighter font. Maybe you simply want to switch to fall colors for the change of seasons. Additionally, the Theme Customizer lets you preview changes before you commit and save them.

Theme Customizer Prerequisites

Your site and theme must meet certain requirements before you can use the Theme Customizer in SMT. There are three requirements for using the theme customizer:

  • You must be using version 3 of Site Management Tools.

  • You must be on the Aconcagua release of Commerce web stores or later.

  • The theme deployed to the site must include elements that can be edited.

More on Themes

The website theme controls the appearance of your site. The theme determines everything from the color of the page background, to the font size and weight, and many other elements. Themes are normally created by web designers or developers and are deployed to your Commerce web store site in NetSuite. When the designer creates the theme, they can specify that certain elements in the theme are customizable. These customizable elements are listed in the side panel when you select the Theme Customizer from the SMT Settings menu.

As you make changes to these elements they are displayed in real time in the preview pane.

There are several different types of controls for customizing website attributes. The customizable elements, possible values, and types of controls can vary from theme to theme and even for different skins within a theme. If there are attributes, you want to change, but those aren’t available, talk to your developer to see if they can change the theme to give you control for more elements. There’s even an entire set of documentation just for the developer that tells how to do it. The Themes topic tells all about it.

Themes with Skins

A theme can include one or more skins. A skin is a group of elements that are designed to compliment each other. You can quickly change the site appearance, simply by choosing a different skin. To select a skin, select it from the Skin dropdown list at the top of the Theme Customizer. Selecting a skin causes two things to happen:

  1. The site preview updates to reflect the attributes of that skin. The variables are reset to their defaults for each new skin selected.

  2. The Theme Customizer displays the customizable attributes for the selected skin.

It is also possible to have a theme with no skins at all. If this is the case, the Skin dropdown list isn’t displayed, and the theme customizer shows the customizable attributes for the current theme.

Example: Theme With Multiple Skins

You have a theme named Seasons deployed to your site. This theme includes four different skins:

  • Winter

  • Spring

  • Summer

  • Fall

As the seasons change, you choose the corresponding skin. When summer turns to fall, you want your site to mirror the goldenrods, crimsons, and umbers in nature. In the Theme Customizer, you choose the Fall skin. You’re happy with most of the elements, but you think the level three headings could be a few sizes larger and a darker shade of red. So in the Theme Customizer, you change the font size and weight for the heading and choose a deeper red. You preview the changes and are happy with the new look, so you save the changes.

Theme Skin Manager

This information refers to SuiteCommerce or the 2019.2 release of SuiteCommerce Advanced or later.

The Theme Skin Manager lets you preview, edit, and manage the currently deployed theme, skins, and customized skins. You can name your customized theme skins to reference and activate them later. This lets you keep the same theme and change the different values in the skin for a sale or season change, while retaining the same overall feel of your site.

The currently active theme has a blue checkmark and the words Active on site next to the Ellipsis. When you set a theme to active, you are given a confirmation question. If you answer Yes, the skin is live on site immediately. You do not have to publish this change. If you answer No, the skin is not applied.

The Theme Skin Manager gives you multiple options on theme management.

Under theme skins, click the Ellipsis on the theme you want to manage, you can copy or preview.

Under customized theme skins, click the Ellipsis of the theme you want to manage and perform one of the following actions:

  • Set to Active

  • Preview

  • Copy

  • Edit

  • Delete

Under the Theme Skins subtab, the default skin is the current skin. The default skin and any other skins available under the Theme Skins subtab cannot be edited or deleted. You cannot delete a Customized Theme Skin if it is currently the active theme.

To create a Customized Theme Skin:

  1. Click Settings and click Themes.

  2. Click the Ellipsis of the theme you want to copy and click Copy.

  3. Click the Ellipsis of your copied theme and click Edit.

  4. The Theme Settings menu displays on the right side of the page. Set the name and all the attributes for your new skin.

  5. Click Save.

To activate a Customized Theme Skin:

  1. Click Settings and then click Themes.

  2. Click the Ellipsis of the theme you want to use and click Set to Active. This is now the active theme.

To edit a Customized Theme Skin:

  1. Click Settings and then click Themes.

  2. Click the Ellipsis of the theme you want to edit and click Edit.

  3. If you are editing the active theme, click Apply Changes and the edits are live on the site immediately.

  4. If you are editing a theme that is not active, click Save to save your edits.

To delete a Customized Theme Skin:

  1. Click Settings and then click Themes.

  2. Click the Ellipsis of the theme you want to delete and click Delete.

  3. Click Yes to delete the theme. Click No to keep the theme.