SuiteCommerce Theme Skin Manager

Introduction

In the NetSuite SuiteCommerce Theme Skin Manager, a skin is a group of UI elements (colors, fonts, layout styles, etc.) that are designed to complement each other visually. A skin defines the visual identity of a site within a Suitecommerce theme. Each theme can contain multiple skins, allowing different appearances to be switched between styles easily without changing the site’s core structure or layout  of the SuiteCommerce site.

 

Theme Skin Manager Pre-requisites

1. SMT Version 3 is Enabled

• The account must be using SMT version 3.
• To check and enable it:
  • Go to the Configuration Record of the website. 
  • Navigate to Integrations > Site Management Tools. 
  • In the CMS Adapter Version dropdown, select Version 3.

2.The webstore must use SuiteCommerce and the 2019.2 release of SuiteCommerce Advanced or later.

3.The theme must include skins. Not all themes are built with skins by default. Ensure that the selected theme contains one or more skins.

Steps to Customize a Skin in Theme Skin Manager

Step 1: Log in to SMT for the domain 

• In the top-right corner, click the Settings icon.
• Select Themes to open the Theme Skin Manager.

Step 2 : View Available Skins

• All the default skins included with the theme will be listed here. These cannot be edited directly.

Step 3 : Copy a Skin

• Locate the desired skin and click Copy.

Step 4 : Custom Skin Is Created

• A new editable version of the skin is created under Customized Theme Skins.

Step 5 : Make the Changes

• Modify the copied skin, such as colors, fonts, UI elements, and buttons.

 Note: Default skins cannot be edited, but copied skins can be fully customized.

 

Working with the Theme Skin Manager

Once a skin is copied, it appears under the Customized Theme Skins section. From this section, custom skins can be previewed, copied, edited, deleted, and activated.All these options are available upon clicking the three dots beside the selected skin.

Preview a Skin

• Preview allows the style elements of a skin to be viewed such as fonts, colors, layout structure 
• The currently previewed skin is marked with a highlighted eye icon.

Copy a Skin

• On clicking Copy, a duplicate of the skin will appear in the Customised Theme skins list.
• After a skin is copied, its elements (such as colors and fonts) can be edited, and once ready, it can be activated to apply the changes live on the site.

 

Edit a Skin

• The Edit option allows you to change design elements such as Headings, Buttons, colors, fonts .
  

• If editing the active skin, click Apply Changes to make edits live.

 

• If editing an inactive skin, click Save to store your changes.

 

Activate a Skin

• Click Set to Active to make the skin live on the domain immediately.
• An active skin is marked with a blue checkmark and the words Active on site.

Delete a Skin

• Only inactive custom skins can be deleted.

Advantages

• Skins can be managed easily in one place.
• Skins can be previewed before being applied.
• Old or unused skins can be deleted or replaced.
• Default skins can’t be changed, so they stay safe.

Conclusion

SMT (Site Management Tools) helps manage and customize SuiteCommerce website themes easily. It allows users to preview, copy, and edit skins without affecting the original NetSuite theme. This makes designing SuiteCommerce websites simple and flexible.

Need help managing your NetSuite SuiteCommerce site, reach out to our team of experts today.