1. Commerce
  2. Commerce Developer Documentation
  3. Develop Themes
  4. Do More With Themes
  5. Enable Customization from Site Management Tools
  6. Create Skins

Create Skins

What is a Skin?

Generally speaking, a skin is a selectable set of predefined settings that change the appearance of a theme. One theme can include any number of skins that SMT administrators select to change that theme’s appearance. For example, a theme might include multiple skins with a different color scheme for specific seasons.

  • Theme – a ready-made package that can be activated for any number of domains. A theme can include any number of skins.

  • Skin – a set of predefined variables that lets SMT administrators alter a theme in a specific way.

From a development perspective, you define a skin using a JSON file. Each file contains the variables and corresponding values that change when the skin is applied using SMT. You create one file in the theme’s Skins directory for each skin you want to make available. When you run the gulp theme:local or gulp theme:deploy command, the developer tools update the theme’s manifest file, automatically adding a skin for each file located in the Skins directory.

When you deploy, and later activate, the theme for a domain, your presets appear as selectable skins in the SMT user interface. When SMT administrators apply your skin, the application compiles the values, and the theme incorporates the changes.

Important:

If you apply a skin, then make changes to one or more variables, you will see your changes in the theme preview. However, if you then select a new skin, your changes to the individual variables will be lost.

Important Information

Be aware of the following information when creating skins:

  • When developing your skin, include only variables that are exposed for customization. If your skin includes variables that are not editable, they will not change when the skin is applied. See Expose Sass Variables for Customization for details.

  • A theme can include any number of skins or no skins at all. If you do not create any skin preset files, SMT does not provide the option to select a skin.

  • Sass variables exposed to SMT are available for customization at any time using the SMT Theme Skin Manager. A theme does not need to include skins for exposed variables to be editable. Likewise, after an SMT administrator selects a skin, they can make their own changes to individual variables.

  • When SMT administrators apply changes to exposed variables, those changes apply to the domain, but they do not overwrite the predefined skin or the theme’s Sass files. The only way to permanently change a Sass variable or save changes to a skin is to edit the theme’s development files or create a new theme using the developer tools.

Related Topics

General Notices