Skins: Customizable Theme Settings in SuiteCommerce

TL;DR

Skins in SuiteCommerce are predefined settings that allow administrators to customize a theme's appearance. Each skin can modify aspects like color schemes and layouts, enhancing the overall user experience without altering the underlying theme.

What are Skins?

A skin is a collection of predefined settings that determines the look and feel of a theme in SuiteCommerce. This flexibility allows administrators to implement different styles based on the season or specific branding needs.

Theme vs. Skin

• Theme: A theme is a packaged collection of assets that can be activated across multiple domains. It can house various skins for different appearances.
• Skin: A skin comprises specific configurations that enable administrators to tailor a theme uniquely.

Defining Skins Using JSON

To create a skin, developers use a JSON file that specifies the variables to be altered. Each skin file is placed in the theme's Skins directory. During the development process, running commands like gulp theme:local or gulp theme:deploy will update the theme’s manifest, integrating any newly added skins.

Once the theme is activated, the available skins can be selected through the Site Management Tools (SMT) interface. When a skin is applied, it compiles the specified variable values, effectively altering the theme as intended.

Important Considerations When Creating Skins

• Include only customizable variables in your skin. Non-editable variables will remain unchanged when applied.
• A theme might contain no skins at all if no preset files are created, preventing any selection options from appearing in SMT.
• Exposed Sass variables can be edited at any time, even if skins are not part of the theme.
• Changes made to exposed variables do not overwrite the original skin or Sass files. To implement permanent changes, you must edit the theme's development files or create an entirely new theme.

Best Practices for Skin Creation

• During skin development, ensure that only variables intended for customization are included.
• Use the editable() function in comments to expose Sass variables for customization, allowing site administrators to adjust them through the SMT Theme Skin Manager.
• Organize and document each variable clearly to facilitate ease of use for the administrators.

Key Takeaways

• Skins enable flexible customization of theme appearance in SuiteCommerce.
• Developers define skins via JSON files for effective management within the SMT interface.
• Proper exposure of variables is crucial for effective customization by administrators.

Source: This article is based on Oracle's official NetSuite documentation.