If you’re running your site on a SuiteCommerce theme, you can create your own skins and edit styles yourself in SMT (Site Management Tools). Here’s a quick guide on how to do it.
Our Innovations and Product team, led by our Design Tech Lead Marisa Garcia, is continuously working in updating and improving the themes created here at Tavano Team. Now, all of our themes are up to date to SuiteCommerce versions 2019.2 or later.
If you’re not familiar with our themes, follow this link to start checking them out!
Our themes are compatible with NetSuite’s Theme Skins Manager (now called Theme Customizer. As a result, now you can make simple aesthetic changes yourself from SMT without a single line of code. Let’s get started, shall we?
How to Edit Styles in SMT | SuiteCommerce Themes
First of all, login with your NetSuite account and enter the SMT, then go to the Theme Skin Manager. Click on Settings and then Themes.
Here you will be able to edit your skins and change styles like colors, sizes, font family, buttons, and so on.
You will see your default skins, as well as your custom skins that were added by code (Skin 1 and Skin 2 in this example). But I’ll get into the code later.
If you want to customize or activate a skin, you’ll have to make a copy of an existing one. Please note that the option to edit the skin is only available in Aconcagua or later versions. The option to copy a skin became available with the 2019.2 version.
Once you have your skin copied, you can customize it. Click on Edit, and you’ll see that there are a lot of variables you can change. For example, the group Theme Palette will show you options to change all the colors from the primary color to the color of the smallest details in your theme.
Here you can play editing all of the variables that you want. The process is straightforward and intuitive, so it will be effortless for you to try new combinations, experiment with colors, fonts, and contrasts until you find one that you like. You can also set light or dark versions for your theme, among many other settings.
The Typography group will let you edit font sizes, font families, colors, and any other detail you could think of that relates to typography. For the sake of this demo, I changed Heading 1 color to red.
There’s also the buttons section, where you’ll be able to edit details such as size, padding, height, or spacing. Again, just for the sake of this demo, I will set the primary button color to light blue, and the text color to red.
The Element Layout section will allow you to edit the header, navigation, and footer details. You’ll see in the demo below that I edited the header background, links, borders, and search box, all in just a few seconds!
You can now assign a name to your new skin and save it. For the last step, you’ll have to activate it. To do so, go to:
Customized Theme Skins > Set to Active > Confirm
This process will only take a couple of minutes, after which you’ll have your brand new skin.
How to Edit Styles in Code | SuiteCommerce Themes
If you prefer to manage your changes in skins and variables directly from the code, here’s how you’ll do it.
Workspace > Theme > Skins
Here you will see the skins and all the variables affected by this skin, where you can edit them directly in the code.
You can also add new skins by making a duplicate of an existing skin – a simple copy/paste will do. To help the SMT find and load the new skin, you have to include it in the skin section of the manifest files. Copy and paste it here and assign a name to your new skin.
Another thing I’d like to show you is how to customize variables and groups that appear in the SMT when you edit the skin. So let’s find an editable variable, for example, the main color variables. Go to:
Modules > BaseSassStyles/Sass > variables > _colors.scss
You can see below where to find the primary colors. Here you can edit it directly in the code.
Let’s see how to edit the groups or add a variable to a group for the SMT. First, find the file that contains the group data. Here is where you can edit groups. Go to:
Modules > BaseSassStyles/Sass > reference-theme > _grouping.scss
Let’s take, for example, the Theme Palette group, which contains other smaller groups.
After changing and editing the variables, you’ll have to run the code and activate the theme in the NetSuite backend. Again, this process can take a couple of minutes. Make sure to double-check that everything is looking as you wanted.
If you need to make adjustments or further changes in the future, now you know how to do it yourself!
And for the final reveal, here it is! Mind you; I certainly did not think the color combination through.
This demo was made using our SuiteCommerce Advanced Landmark theme. Watch the video below to see it in action and to discover all of its built-in features. Click here to talk to a consultant and get started!