We’re 100% focused on helping our customers face the Coronavirus pandemic. Click here to download your free eBook: 22 Tactics to Rescue your eCommerce from COVID-19

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. 

Edit-styles-cms-suitecommerce-tavano-team

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.

Edit-styles-cms-suitecommerce-tavano-team-highlights

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.

Edit-styles-cms-suitecommerce-tavano-team-code-heading

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.

Edit-styles-cms-suitecommerce-tavano-team-highlights_1

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. 

Edit-styles-cms-suitecommerce-tavano-team-code-buttons

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 

Edit-styles-cms-suitecommerce-tavano-team-code-theme-palette

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.

Edit-styles-cms-suitecommerce-tavano-team-final

If you need help or if you want more details on how to create skins or edit styles in CMS on a SuiteCommerce theme, send us a message and schedule a call with our team of experts!

Landmark theme

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!

Share: